new typescript skeleton for agent ui (#781)

2025-02-16 18:20:51 +01:00 · 2024-11-18 13:45:47 -05:00 · 2024-11-18 13:45:47 -05:00 · 0bdbc9effb
commit 0bdbc9effb
parent 3205b92d06
35 changed files with 6080 additions and 4 deletions
--- a/agent/agentUiTs/.gitignore
+++ b/agent/agentUiTs/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/agent/agentUiTs/README.md
+++ b/agent/agentUiTs/README.md
@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
--- a/agent/agentUiTs/eslint.config.js
+++ b/agent/agentUiTs/eslint.config.js
@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/agent/agentUiTs/index.html
+++ b/agent/agentUiTs/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/zrok.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/agent/agentUiTs/package-lock.json
+++ b/agent/agentUiTs/package-lock.json
--- a/agent/agentUiTs/package.json
+++ b/agent/agentUiTs/package.json
@ -0,0 +1,35 @@
+{
+  "name": "agentuits",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "fetch": "^1.1.0",
+    "isomorphic-fetch": "^3.0.0",
+    "node-fetch": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "request": "^2.88.2",
+    "url": "^0.11.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
+  }
+}
--- a/agent/agentUiTs/public/zrok.png
+++ b/agent/agentUiTs/public/zrok.png
--- a/agent/agentUiTs/src/App.css
+++ b/agent/agentUiTs/src/App.css
@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/agent/agentUiTs/src/App.tsx
+++ b/agent/agentUiTs/src/App.tsx
@ -0,0 +1,43 @@
+import './App.css'
+import {useEffect, useState} from 'react'
+import {AgentApi, Configuration} from "./api";
+
+function App() {
+    const [version, setVersion] = useState("not set");
+    const [errorMessage, setErrorMessage] = useState("no error");
+
+    useEffect(() => {
+        let api = new AgentApi(new Configuration({basePath: window.location.origin}));
+        api.agentVersion().then((v) => {
+            if(v.v) {
+                setVersion(v.v);
+            } else {
+                console.log(v);
+            }
+        }).catch((v) => {
+           console.log("caught", v.toString());
+        });
+    }, []);
+
+    useEffect(() => {
+        let api = new AgentApi(new Configuration({basePath: window.location.origin}));
+        api.agentAccessPrivate({token: "a", bindAddress: "127.0.0.1:9911"}).catch(e => {
+            console.log(e.response.json().then(eb => {
+                setErrorMessage(eb.message);
+                console.log(eb.message);
+            }));
+        }).then(v => {
+            console.log(v);
+        });
+    }, []);
+
+    return (
+        <>
+            <h1>Agent UI</h1>
+            <h2>{version}</h2>
+            <h4>{errorMessage}</h4>
+        </>
+    )
+}
+
+export default App
--- a/agent/agentUiTs/src/api/.openapi-generator-ignore
+++ b/agent/agentUiTs/src/api/.openapi-generator-ignore
@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md
--- a/agent/agentUiTs/src/api/.openapi-generator/FILES
+++ b/agent/agentUiTs/src/api/.openapi-generator/FILES
@ -0,0 +1,16 @@
+.openapi-generator-ignore
+apis/AgentApi.ts
+apis/index.ts
+index.ts
+models/AccessDetail.ts
+models/AccessPrivateResponse.ts
+models/ProtobufAny.ts
+models/RpcStatus.ts
+models/ShareDetail.ts
+models/SharePrivateResponse.ts
+models/SharePublicResponse.ts
+models/ShareReservedResponse.ts
+models/StatusResponse.ts
+models/VersionResponse.ts
+models/index.ts
+runtime.ts
--- a/agent/agentUiTs/src/api/.openapi-generator/VERSION
+++ b/agent/agentUiTs/src/api/.openapi-generator/VERSION
@ -0,0 +1 @@
+7.7.0
--- a/agent/agentUiTs/src/api/apis/AgentApi.ts
+++ b/agent/agentUiTs/src/api/apis/AgentApi.ts
@ -0,0 +1,348 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import * as runtime from '../runtime';
+import type {
+  AccessPrivateResponse,
+  RpcStatus,
+  SharePrivateResponse,
+  SharePublicResponse,
+  StatusResponse,
+  VersionResponse,
+} from '../models/index';
+import {
+    AccessPrivateResponseFromJSON,
+    AccessPrivateResponseToJSON,
+    RpcStatusFromJSON,
+    RpcStatusToJSON,
+    SharePrivateResponseFromJSON,
+    SharePrivateResponseToJSON,
+    SharePublicResponseFromJSON,
+    SharePublicResponseToJSON,
+    StatusResponseFromJSON,
+    StatusResponseToJSON,
+    VersionResponseFromJSON,
+    VersionResponseToJSON,
+} from '../models/index';
+
+export interface AgentAccessPrivateRequest {
+    token?: string;
+    bindAddress?: string;
+    autoMode?: boolean;
+    autoAddress?: string;
+    autoStartPort?: number;
+    autoEndPort?: number;
+    responseHeaders?: Array<string>;
+}
+
+export interface AgentReleaseAccessRequest {
+    frontendToken?: string;
+}
+
+export interface AgentReleaseShareRequest {
+    token?: string;
+}
+
+export interface AgentSharePrivateRequest {
+    target?: string;
+    backendMode?: string;
+    insecure?: boolean;
+    closed?: boolean;
+    accessGrants?: Array<string>;
+}
+
+export interface AgentSharePublicRequest {
+    target?: string;
+    basicAuth?: Array<string>;
+    frontendSelection?: Array<string>;
+    backendMode?: string;
+    insecure?: boolean;
+    oauthProvider?: string;
+    oauthEmailAddressPatterns?: Array<string>;
+    oauthCheckInterval?: string;
+    closed?: boolean;
+    accessGrants?: Array<string>;
+}
+
+/**
+ * 
+ */
+export class AgentApi extends runtime.BaseAPI {
+
+    /**
+     */
+    async agentAccessPrivateRaw(requestParameters: AgentAccessPrivateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<AccessPrivateResponse>> {
+        const queryParameters: any = {};
+
+        if (requestParameters['token'] != null) {
+            queryParameters['token'] = requestParameters['token'];
+        }
+
+        if (requestParameters['bindAddress'] != null) {
+            queryParameters['bindAddress'] = requestParameters['bindAddress'];
+        }
+
+        if (requestParameters['autoMode'] != null) {
+            queryParameters['autoMode'] = requestParameters['autoMode'];
+        }
+
+        if (requestParameters['autoAddress'] != null) {
+            queryParameters['autoAddress'] = requestParameters['autoAddress'];
+        }
+
+        if (requestParameters['autoStartPort'] != null) {
+            queryParameters['autoStartPort'] = requestParameters['autoStartPort'];
+        }
+
+        if (requestParameters['autoEndPort'] != null) {
+            queryParameters['autoEndPort'] = requestParameters['autoEndPort'];
+        }
+
+        if (requestParameters['responseHeaders'] != null) {
+            queryParameters['responseHeaders'] = requestParameters['responseHeaders'];
+        }
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/v1/agent/accessPrivate`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => AccessPrivateResponseFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async agentAccessPrivate(requestParameters: AgentAccessPrivateRequest = {}, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<AccessPrivateResponse> {
+        const response = await this.agentAccessPrivateRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async agentReleaseAccessRaw(requestParameters: AgentReleaseAccessRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<object>> {
+        const queryParameters: any = {};
+
+        if (requestParameters['frontendToken'] != null) {
+            queryParameters['frontendToken'] = requestParameters['frontendToken'];
+        }
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/v1/agent/releaseAccess`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse<any>(response);
+    }
+
+    /**
+     */
+    async agentReleaseAccess(requestParameters: AgentReleaseAccessRequest = {}, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<object> {
+        const response = await this.agentReleaseAccessRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async agentReleaseShareRaw(requestParameters: AgentReleaseShareRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<object>> {
+        const queryParameters: any = {};
+
+        if (requestParameters['token'] != null) {
+            queryParameters['token'] = requestParameters['token'];
+        }
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/v1/agent/releaseShare`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse<any>(response);
+    }
+
+    /**
+     */
+    async agentReleaseShare(requestParameters: AgentReleaseShareRequest = {}, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<object> {
+        const response = await this.agentReleaseShareRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async agentSharePrivateRaw(requestParameters: AgentSharePrivateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<SharePrivateResponse>> {
+        const queryParameters: any = {};
+
+        if (requestParameters['target'] != null) {
+            queryParameters['target'] = requestParameters['target'];
+        }
+
+        if (requestParameters['backendMode'] != null) {
+            queryParameters['backendMode'] = requestParameters['backendMode'];
+        }
+
+        if (requestParameters['insecure'] != null) {
+            queryParameters['insecure'] = requestParameters['insecure'];
+        }
+
+        if (requestParameters['closed'] != null) {
+            queryParameters['closed'] = requestParameters['closed'];
+        }
+
+        if (requestParameters['accessGrants'] != null) {
+            queryParameters['accessGrants'] = requestParameters['accessGrants'];
+        }
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/v1/agent/sharePrivate`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => SharePrivateResponseFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async agentSharePrivate(requestParameters: AgentSharePrivateRequest = {}, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<SharePrivateResponse> {
+        const response = await this.agentSharePrivateRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async agentSharePublicRaw(requestParameters: AgentSharePublicRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<SharePublicResponse>> {
+        const queryParameters: any = {};
+
+        if (requestParameters['target'] != null) {
+            queryParameters['target'] = requestParameters['target'];
+        }
+
+        if (requestParameters['basicAuth'] != null) {
+            queryParameters['basicAuth'] = requestParameters['basicAuth'];
+        }
+
+        if (requestParameters['frontendSelection'] != null) {
+            queryParameters['frontendSelection'] = requestParameters['frontendSelection'];
+        }
+
+        if (requestParameters['backendMode'] != null) {
+            queryParameters['backendMode'] = requestParameters['backendMode'];
+        }
+
+        if (requestParameters['insecure'] != null) {
+            queryParameters['insecure'] = requestParameters['insecure'];
+        }
+
+        if (requestParameters['oauthProvider'] != null) {
+            queryParameters['oauthProvider'] = requestParameters['oauthProvider'];
+        }
+
+        if (requestParameters['oauthEmailAddressPatterns'] != null) {
+            queryParameters['oauthEmailAddressPatterns'] = requestParameters['oauthEmailAddressPatterns'];
+        }
+
+        if (requestParameters['oauthCheckInterval'] != null) {
+            queryParameters['oauthCheckInterval'] = requestParameters['oauthCheckInterval'];
+        }
+
+        if (requestParameters['closed'] != null) {
+            queryParameters['closed'] = requestParameters['closed'];
+        }
+
+        if (requestParameters['accessGrants'] != null) {
+            queryParameters['accessGrants'] = requestParameters['accessGrants'];
+        }
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/v1/agent/sharePublic`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => SharePublicResponseFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async agentSharePublic(requestParameters: AgentSharePublicRequest = {}, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<SharePublicResponse> {
+        const response = await this.agentSharePublicRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async agentStatusRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<StatusResponse>> {
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/v1/agent/status`,
+            method: 'GET',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => StatusResponseFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async agentStatus(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<StatusResponse> {
+        const response = await this.agentStatusRaw(initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async agentVersionRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<VersionResponse>> {
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/v1/agent/version`,
+            method: 'GET',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => VersionResponseFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async agentVersion(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<VersionResponse> {
+        const response = await this.agentVersionRaw(initOverrides);
+        return await response.value();
+    }
+
+}
--- a/agent/agentUiTs/src/api/apis/index.ts
+++ b/agent/agentUiTs/src/api/apis/index.ts
@ -0,0 +1,3 @@
+/* tslint:disable */
+/* eslint-disable */
+export * from './AgentApi';
--- a/agent/agentUiTs/src/api/index.ts
+++ b/agent/agentUiTs/src/api/index.ts
@ -0,0 +1,5 @@
+/* tslint:disable */
+/* eslint-disable */
+export * from './runtime';
+export * from './apis/index';
+export * from './models/index';
--- a/agent/agentUiTs/src/api/models/AccessDetail.ts
+++ b/agent/agentUiTs/src/api/models/AccessDetail.ts
@ -0,0 +1,84 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface AccessDetail
+ */
+export interface AccessDetail {
+    /**
+     * 
+     * @type {string}
+     * @memberof AccessDetail
+     */
+    frontendToken?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AccessDetail
+     */
+    token?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AccessDetail
+     */
+    bindAddress?: string;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AccessDetail
+     */
+    responseHeaders?: Array<string>;
+}
+
+/**
+ * Check if a given object implements the AccessDetail interface.
+ */
+export function instanceOfAccessDetail(value: object): value is AccessDetail {
+    return true;
+}
+
+export function AccessDetailFromJSON(json: any): AccessDetail {
+    return AccessDetailFromJSONTyped(json, false);
+}
+
+export function AccessDetailFromJSONTyped(json: any, ignoreDiscriminator: boolean): AccessDetail {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'frontendToken': json['frontendToken'] == null ? undefined : json['frontendToken'],
+        'token': json['token'] == null ? undefined : json['token'],
+        'bindAddress': json['bindAddress'] == null ? undefined : json['bindAddress'],
+        'responseHeaders': json['responseHeaders'] == null ? undefined : json['responseHeaders'],
+    };
+}
+
+export function AccessDetailToJSON(value?: AccessDetail | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'frontendToken': value['frontendToken'],
+        'token': value['token'],
+        'bindAddress': value['bindAddress'],
+        'responseHeaders': value['responseHeaders'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/AccessPrivateResponse.ts
+++ b/agent/agentUiTs/src/api/models/AccessPrivateResponse.ts
@ -0,0 +1,60 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface AccessPrivateResponse
+ */
+export interface AccessPrivateResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof AccessPrivateResponse
+     */
+    frontendToken?: string;
+}
+
+/**
+ * Check if a given object implements the AccessPrivateResponse interface.
+ */
+export function instanceOfAccessPrivateResponse(value: object): value is AccessPrivateResponse {
+    return true;
+}
+
+export function AccessPrivateResponseFromJSON(json: any): AccessPrivateResponse {
+    return AccessPrivateResponseFromJSONTyped(json, false);
+}
+
+export function AccessPrivateResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): AccessPrivateResponse {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'frontendToken': json['frontendToken'] == null ? undefined : json['frontendToken'],
+    };
+}
+
+export function AccessPrivateResponseToJSON(value?: AccessPrivateResponse | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'frontendToken': value['frontendToken'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/ProtobufAny.ts
+++ b/agent/agentUiTs/src/api/models/ProtobufAny.ts
@ -0,0 +1,63 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface ProtobufAny
+ */
+export interface ProtobufAny {
+    [key: string]: object | any;
+    /**
+     * 
+     * @type {string}
+     * @memberof ProtobufAny
+     */
+    type?: string;
+}
+
+/**
+ * Check if a given object implements the ProtobufAny interface.
+ */
+export function instanceOfProtobufAny(value: object): value is ProtobufAny {
+    return true;
+}
+
+export function ProtobufAnyFromJSON(json: any): ProtobufAny {
+    return ProtobufAnyFromJSONTyped(json, false);
+}
+
+export function ProtobufAnyFromJSONTyped(json: any, ignoreDiscriminator: boolean): ProtobufAny {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+            ...json,
+        'type': json['@type'] == null ? undefined : json['@type'],
+    };
+}
+
+export function ProtobufAnyToJSON(value?: ProtobufAny | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+            ...value,
+        '@type': value['type'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/RpcStatus.ts
+++ b/agent/agentUiTs/src/api/models/RpcStatus.ts
@ -0,0 +1,83 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+import type { ProtobufAny } from './ProtobufAny';
+import {
+    ProtobufAnyFromJSON,
+    ProtobufAnyFromJSONTyped,
+    ProtobufAnyToJSON,
+} from './ProtobufAny';
+
+/**
+ * 
+ * @export
+ * @interface RpcStatus
+ */
+export interface RpcStatus {
+    /**
+     * 
+     * @type {number}
+     * @memberof RpcStatus
+     */
+    code?: number;
+    /**
+     * 
+     * @type {string}
+     * @memberof RpcStatus
+     */
+    message?: string;
+    /**
+     * 
+     * @type {Array<ProtobufAny>}
+     * @memberof RpcStatus
+     */
+    details?: Array<ProtobufAny>;
+}
+
+/**
+ * Check if a given object implements the RpcStatus interface.
+ */
+export function instanceOfRpcStatus(value: object): value is RpcStatus {
+    return true;
+}
+
+export function RpcStatusFromJSON(json: any): RpcStatus {
+    return RpcStatusFromJSONTyped(json, false);
+}
+
+export function RpcStatusFromJSONTyped(json: any, ignoreDiscriminator: boolean): RpcStatus {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'code': json['code'] == null ? undefined : json['code'],
+        'message': json['message'] == null ? undefined : json['message'],
+        'details': json['details'] == null ? undefined : ((json['details'] as Array<any>).map(ProtobufAnyFromJSON)),
+    };
+}
+
+export function RpcStatusToJSON(value?: RpcStatus | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'code': value['code'],
+        'message': value['message'],
+        'details': value['details'] == null ? undefined : ((value['details'] as Array<any>).map(ProtobufAnyToJSON)),
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/ShareDetail.ts
+++ b/agent/agentUiTs/src/api/models/ShareDetail.ts
@ -0,0 +1,116 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface ShareDetail
+ */
+export interface ShareDetail {
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareDetail
+     */
+    token?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareDetail
+     */
+    shareMode?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareDetail
+     */
+    backendMode?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ShareDetail
+     */
+    reserved?: boolean;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof ShareDetail
+     */
+    frontendEndpoint?: Array<string>;
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareDetail
+     */
+    backendEndpoint?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ShareDetail
+     */
+    closed?: boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareDetail
+     */
+    status?: string;
+}
+
+/**
+ * Check if a given object implements the ShareDetail interface.
+ */
+export function instanceOfShareDetail(value: object): value is ShareDetail {
+    return true;
+}
+
+export function ShareDetailFromJSON(json: any): ShareDetail {
+    return ShareDetailFromJSONTyped(json, false);
+}
+
+export function ShareDetailFromJSONTyped(json: any, ignoreDiscriminator: boolean): ShareDetail {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'token': json['token'] == null ? undefined : json['token'],
+        'shareMode': json['shareMode'] == null ? undefined : json['shareMode'],
+        'backendMode': json['backendMode'] == null ? undefined : json['backendMode'],
+        'reserved': json['reserved'] == null ? undefined : json['reserved'],
+        'frontendEndpoint': json['frontendEndpoint'] == null ? undefined : json['frontendEndpoint'],
+        'backendEndpoint': json['backendEndpoint'] == null ? undefined : json['backendEndpoint'],
+        'closed': json['closed'] == null ? undefined : json['closed'],
+        'status': json['status'] == null ? undefined : json['status'],
+    };
+}
+
+export function ShareDetailToJSON(value?: ShareDetail | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'token': value['token'],
+        'shareMode': value['shareMode'],
+        'backendMode': value['backendMode'],
+        'reserved': value['reserved'],
+        'frontendEndpoint': value['frontendEndpoint'],
+        'backendEndpoint': value['backendEndpoint'],
+        'closed': value['closed'],
+        'status': value['status'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/SharePrivateResponse.ts
+++ b/agent/agentUiTs/src/api/models/SharePrivateResponse.ts
@ -0,0 +1,60 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface SharePrivateResponse
+ */
+export interface SharePrivateResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharePrivateResponse
+     */
+    token?: string;
+}
+
+/**
+ * Check if a given object implements the SharePrivateResponse interface.
+ */
+export function instanceOfSharePrivateResponse(value: object): value is SharePrivateResponse {
+    return true;
+}
+
+export function SharePrivateResponseFromJSON(json: any): SharePrivateResponse {
+    return SharePrivateResponseFromJSONTyped(json, false);
+}
+
+export function SharePrivateResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): SharePrivateResponse {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'token': json['token'] == null ? undefined : json['token'],
+    };
+}
+
+export function SharePrivateResponseToJSON(value?: SharePrivateResponse | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'token': value['token'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/SharePublicResponse.ts
+++ b/agent/agentUiTs/src/api/models/SharePublicResponse.ts
@ -0,0 +1,68 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface SharePublicResponse
+ */
+export interface SharePublicResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof SharePublicResponse
+     */
+    token?: string;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof SharePublicResponse
+     */
+    frontendEndpoints?: Array<string>;
+}
+
+/**
+ * Check if a given object implements the SharePublicResponse interface.
+ */
+export function instanceOfSharePublicResponse(value: object): value is SharePublicResponse {
+    return true;
+}
+
+export function SharePublicResponseFromJSON(json: any): SharePublicResponse {
+    return SharePublicResponseFromJSONTyped(json, false);
+}
+
+export function SharePublicResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): SharePublicResponse {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'token': json['token'] == null ? undefined : json['token'],
+        'frontendEndpoints': json['frontendEndpoints'] == null ? undefined : json['frontendEndpoints'],
+    };
+}
+
+export function SharePublicResponseToJSON(value?: SharePublicResponse | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'token': value['token'],
+        'frontendEndpoints': value['frontendEndpoints'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/ShareReservedResponse.ts
+++ b/agent/agentUiTs/src/api/models/ShareReservedResponse.ts
@ -0,0 +1,92 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface ShareReservedResponse
+ */
+export interface ShareReservedResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareReservedResponse
+     */
+    token?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareReservedResponse
+     */
+    backendMode?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareReservedResponse
+     */
+    shareMode?: string;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof ShareReservedResponse
+     */
+    frontendEndpoints?: Array<string>;
+    /**
+     * 
+     * @type {string}
+     * @memberof ShareReservedResponse
+     */
+    target?: string;
+}
+
+/**
+ * Check if a given object implements the ShareReservedResponse interface.
+ */
+export function instanceOfShareReservedResponse(value: object): value is ShareReservedResponse {
+    return true;
+}
+
+export function ShareReservedResponseFromJSON(json: any): ShareReservedResponse {
+    return ShareReservedResponseFromJSONTyped(json, false);
+}
+
+export function ShareReservedResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): ShareReservedResponse {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'token': json['token'] == null ? undefined : json['token'],
+        'backendMode': json['backendMode'] == null ? undefined : json['backendMode'],
+        'shareMode': json['shareMode'] == null ? undefined : json['shareMode'],
+        'frontendEndpoints': json['frontendEndpoints'] == null ? undefined : json['frontendEndpoints'],
+        'target': json['target'] == null ? undefined : json['target'],
+    };
+}
+
+export function ShareReservedResponseToJSON(value?: ShareReservedResponse | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'token': value['token'],
+        'backendMode': value['backendMode'],
+        'shareMode': value['shareMode'],
+        'frontendEndpoints': value['frontendEndpoints'],
+        'target': value['target'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/StatusResponse.ts
+++ b/agent/agentUiTs/src/api/models/StatusResponse.ts
@ -0,0 +1,81 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+import type { AccessDetail } from './AccessDetail';
+import {
+    AccessDetailFromJSON,
+    AccessDetailFromJSONTyped,
+    AccessDetailToJSON,
+} from './AccessDetail';
+import type { ShareDetail } from './ShareDetail';
+import {
+    ShareDetailFromJSON,
+    ShareDetailFromJSONTyped,
+    ShareDetailToJSON,
+} from './ShareDetail';
+
+/**
+ * 
+ * @export
+ * @interface StatusResponse
+ */
+export interface StatusResponse {
+    /**
+     * 
+     * @type {Array<AccessDetail>}
+     * @memberof StatusResponse
+     */
+    accesses?: Array<AccessDetail>;
+    /**
+     * 
+     * @type {Array<ShareDetail>}
+     * @memberof StatusResponse
+     */
+    shares?: Array<ShareDetail>;
+}
+
+/**
+ * Check if a given object implements the StatusResponse interface.
+ */
+export function instanceOfStatusResponse(value: object): value is StatusResponse {
+    return true;
+}
+
+export function StatusResponseFromJSON(json: any): StatusResponse {
+    return StatusResponseFromJSONTyped(json, false);
+}
+
+export function StatusResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): StatusResponse {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'accesses': json['accesses'] == null ? undefined : ((json['accesses'] as Array<any>).map(AccessDetailFromJSON)),
+        'shares': json['shares'] == null ? undefined : ((json['shares'] as Array<any>).map(ShareDetailFromJSON)),
+    };
+}
+
+export function StatusResponseToJSON(value?: StatusResponse | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'accesses': value['accesses'] == null ? undefined : ((value['accesses'] as Array<any>).map(AccessDetailToJSON)),
+        'shares': value['shares'] == null ? undefined : ((value['shares'] as Array<any>).map(ShareDetailToJSON)),
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/VersionResponse.ts
+++ b/agent/agentUiTs/src/api/models/VersionResponse.ts
@ -0,0 +1,68 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface VersionResponse
+ */
+export interface VersionResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof VersionResponse
+     */
+    v?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof VersionResponse
+     */
+    consoleEndpoint?: string;
+}
+
+/**
+ * Check if a given object implements the VersionResponse interface.
+ */
+export function instanceOfVersionResponse(value: object): value is VersionResponse {
+    return true;
+}
+
+export function VersionResponseFromJSON(json: any): VersionResponse {
+    return VersionResponseFromJSONTyped(json, false);
+}
+
+export function VersionResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): VersionResponse {
+    if (json == null) {
+        return json;
+    }
+    return {
+        
+        'v': json['v'] == null ? undefined : json['v'],
+        'consoleEndpoint': json['consoleEndpoint'] == null ? undefined : json['consoleEndpoint'],
+    };
+}
+
+export function VersionResponseToJSON(value?: VersionResponse | null): any {
+    if (value == null) {
+        return value;
+    }
+    return {
+        
+        'v': value['v'],
+        'consoleEndpoint': value['consoleEndpoint'],
+    };
+}
+
--- a/agent/agentUiTs/src/api/models/index.ts
+++ b/agent/agentUiTs/src/api/models/index.ts
@ -0,0 +1,12 @@
+/* tslint:disable */
+/* eslint-disable */
+export * from './AccessDetail';
+export * from './AccessPrivateResponse';
+export * from './ProtobufAny';
+export * from './RpcStatus';
+export * from './ShareDetail';
+export * from './SharePrivateResponse';
+export * from './SharePublicResponse';
+export * from './ShareReservedResponse';
+export * from './StatusResponse';
+export * from './VersionResponse';
--- a/agent/agentUiTs/src/api/runtime.ts
+++ b/agent/agentUiTs/src/api/runtime.ts
@ -0,0 +1,426 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * agent/agentGrpc/agent.proto
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: version not set
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+
+export interface ConfigurationParameters {
+    basePath?: string; // override base path
+    fetchApi?: FetchAPI; // override for fetch implementation
+    middleware?: Middleware[]; // middleware to apply before/after fetch requests
+    queryParamsStringify?: (params: HTTPQuery) => string; // stringify function for query strings
+    username?: string; // parameter for basic security
+    password?: string; // parameter for basic security
+    apiKey?: string | Promise<string> | ((name: string) => string | Promise<string>); // parameter for apiKey security
+    accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string | Promise<string>); // parameter for oauth2 security
+    headers?: HTTPHeaders; //header params we want to use on every request
+    credentials?: RequestCredentials; //value for the credentials param we want to use on each request
+}
+
+export class Configuration {
+    constructor(private configuration: ConfigurationParameters = {}) {}
+
+    set config(configuration: Configuration) {
+        this.configuration = configuration;
+    }
+
+    get basePath(): string {
+        return this.configuration.basePath != null ? this.configuration.basePath : BASE_PATH;
+    }
+
+    get fetchApi(): FetchAPI | undefined {
+        return this.configuration.fetchApi;
+    }
+
+    get middleware(): Middleware[] {
+        return this.configuration.middleware || [];
+    }
+
+    get queryParamsStringify(): (params: HTTPQuery) => string {
+        return this.configuration.queryParamsStringify || querystring;
+    }
+
+    get username(): string | undefined {
+        return this.configuration.username;
+    }
+
+    get password(): string | undefined {
+        return this.configuration.password;
+    }
+
+    get apiKey(): ((name: string) => string | Promise<string>) | undefined {
+        const apiKey = this.configuration.apiKey;
+        if (apiKey) {
+            return typeof apiKey === 'function' ? apiKey : () => apiKey;
+        }
+        return undefined;
+    }
+
+    get accessToken(): ((name?: string, scopes?: string[]) => string | Promise<string>) | undefined {
+        const accessToken = this.configuration.accessToken;
+        if (accessToken) {
+            return typeof accessToken === 'function' ? accessToken : async () => accessToken;
+        }
+        return undefined;
+    }
+
+    get headers(): HTTPHeaders | undefined {
+        return this.configuration.headers;
+    }
+
+    get credentials(): RequestCredentials | undefined {
+        return this.configuration.credentials;
+    }
+}
+
+export const DefaultConfig = new Configuration();
+
+/**
+ * This is the base class for all generated API classes.
+ */
+export class BaseAPI {
+
+    private static readonly jsonRegex = new RegExp('^(:?application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(:?;.*)?$', 'i');
+    private middleware: Middleware[];
+
+    constructor(protected configuration = DefaultConfig) {
+        this.middleware = configuration.middleware;
+    }
+
+    withMiddleware<T extends BaseAPI>(this: T, ...middlewares: Middleware[]) {
+        const next = this.clone<T>();
+        next.middleware = next.middleware.concat(...middlewares);
+        return next;
+    }
+
+    withPreMiddleware<T extends BaseAPI>(this: T, ...preMiddlewares: Array<Middleware['pre']>) {
+        const middlewares = preMiddlewares.map((pre) => ({ pre }));
+        return this.withMiddleware<T>(...middlewares);
+    }
+
+    withPostMiddleware<T extends BaseAPI>(this: T, ...postMiddlewares: Array<Middleware['post']>) {
+        const middlewares = postMiddlewares.map((post) => ({ post }));
+        return this.withMiddleware<T>(...middlewares);
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    protected isJsonMime(mime: string | null | undefined): boolean {
+        if (!mime) {
+            return false;
+        }
+        return BaseAPI.jsonRegex.test(mime);
+    }
+
+    protected async request(context: RequestOpts, initOverrides?: RequestInit | InitOverrideFunction): Promise<Response> {
+        const { url, init } = await this.createFetchParams(context, initOverrides);
+        const response = await this.fetchApi(url, init);
+        if (response && (response.status >= 200 && response.status < 300)) {
+            return response;
+        }
+        throw new ResponseError(response, 'Response returned an error code');
+    }
+
+    private async createFetchParams(context: RequestOpts, initOverrides?: RequestInit | InitOverrideFunction) {
+        let url = this.configuration.basePath + context.path;
+        if (context.query !== undefined && Object.keys(context.query).length !== 0) {
+            // only add the querystring to the URL if there are query parameters.
+            // this is done to avoid urls ending with a "?" character which buggy webservers
+            // do not handle correctly sometimes.
+            url += '?' + this.configuration.queryParamsStringify(context.query);
+        }
+
+        const headers = Object.assign({}, this.configuration.headers, context.headers);
+        Object.keys(headers).forEach(key => headers[key] === undefined ? delete headers[key] : {});
+
+        const initOverrideFn =
+            typeof initOverrides === "function"
+                ? initOverrides
+                : async () => initOverrides;
+
+        const initParams = {
+            method: context.method,
+            headers,
+            body: context.body,
+            credentials: this.configuration.credentials,
+        };
+
+        const overriddenInit: RequestInit = {
+            ...initParams,
+            ...(await initOverrideFn({
+                init: initParams,
+                context,
+            }))
+        };
+
+        let body: any;
+        if (isFormData(overriddenInit.body)
+            || (overriddenInit.body instanceof URLSearchParams)
+            || isBlob(overriddenInit.body)) {
+          body = overriddenInit.body;
+        } else if (this.isJsonMime(headers['Content-Type'])) {
+          body = JSON.stringify(overriddenInit.body);
+        } else {
+          body = overriddenInit.body;
+        }
+
+        const init: RequestInit = {
+            ...overriddenInit,
+            body
+        };
+
+        return { url, init };
+    }
+
+    private fetchApi = async (url: string, init: RequestInit) => {
+        let fetchParams = { url, init };
+        for (const middleware of this.middleware) {
+            if (middleware.pre) {
+                fetchParams = await middleware.pre({
+                    fetch: this.fetchApi,
+                    ...fetchParams,
+                }) || fetchParams;
+            }
+        }
+        let response: Response | undefined = undefined;
+        try {
+            response = await (this.configuration.fetchApi || fetch)(fetchParams.url, fetchParams.init);
+        } catch (e) {
+            for (const middleware of this.middleware) {
+                if (middleware.onError) {
+                    response = await middleware.onError({
+                        fetch: this.fetchApi,
+                        url: fetchParams.url,
+                        init: fetchParams.init,
+                        error: e,
+                        response: response ? response.clone() : undefined,
+                    }) || response;
+                }
+            }
+            if (response === undefined) {
+              if (e instanceof Error) {
+                throw new FetchError(e, 'The request failed and the interceptors did not return an alternative response');
+              } else {
+                throw e;
+              }
+            }
+        }
+        for (const middleware of this.middleware) {
+            if (middleware.post) {
+                response = await middleware.post({
+                    fetch: this.fetchApi,
+                    url: fetchParams.url,
+                    init: fetchParams.init,
+                    response: response.clone(),
+                }) || response;
+            }
+        }
+        return response;
+    }
+
+    /**
+     * Create a shallow clone of `this` by constructing a new instance
+     * and then shallow cloning data members.
+     */
+    private clone<T extends BaseAPI>(this: T): T {
+        const constructor = this.constructor as any;
+        const next = new constructor(this.configuration);
+        next.middleware = this.middleware.slice();
+        return next;
+    }
+};
+
+function isBlob(value: any): value is Blob {
+    return typeof Blob !== 'undefined' && value instanceof Blob;
+}
+
+function isFormData(value: any): value is FormData {
+    return typeof FormData !== "undefined" && value instanceof FormData;
+}
+
+export class ResponseError extends Error {
+    override name: "ResponseError" = "ResponseError";
+    constructor(public response: Response, msg?: string) {
+        super(msg);
+    }
+}
+
+export class FetchError extends Error {
+    override name: "FetchError" = "FetchError";
+    constructor(public cause: Error, msg?: string) {
+        super(msg);
+    }
+}
+
+export class RequiredError extends Error {
+    override name: "RequiredError" = "RequiredError";
+    constructor(public field: string, msg?: string) {
+        super(msg);
+    }
+}
+
+export const COLLECTION_FORMATS = {
+    csv: ",",
+    ssv: " ",
+    tsv: "\t",
+    pipes: "|",
+};
+
+export type FetchAPI = WindowOrWorkerGlobalScope['fetch'];
+
+export type Json = any;
+export type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'OPTIONS' | 'HEAD';
+export type HTTPHeaders = { [key: string]: string };
+export type HTTPQuery = { [key: string]: string | number | null | boolean | Array<string | number | null | boolean> | Set<string | number | null | boolean> | HTTPQuery };
+export type HTTPBody = Json | FormData | URLSearchParams;
+export type HTTPRequestInit = { headers?: HTTPHeaders; method: HTTPMethod; credentials?: RequestCredentials; body?: HTTPBody };
+export type ModelPropertyNaming = 'camelCase' | 'snake_case' | 'PascalCase' | 'original';
+
+export type InitOverrideFunction = (requestContext: { init: HTTPRequestInit, context: RequestOpts }) => Promise<RequestInit>
+
+export interface FetchParams {
+    url: string;
+    init: RequestInit;
+}
+
+export interface RequestOpts {
+    path: string;
+    method: HTTPMethod;
+    headers: HTTPHeaders;
+    query?: HTTPQuery;
+    body?: HTTPBody;
+}
+
+export function querystring(params: HTTPQuery, prefix: string = ''): string {
+    return Object.keys(params)
+        .map(key => querystringSingleKey(key, params[key], prefix))
+        .filter(part => part.length > 0)
+        .join('&');
+}
+
+function querystringSingleKey(key: string, value: string | number | null | undefined | boolean | Array<string | number | null | boolean> | Set<string | number | null | boolean> | HTTPQuery, keyPrefix: string = ''): string {
+    const fullKey = keyPrefix + (keyPrefix.length ? `[${key}]` : key);
+    if (value instanceof Array) {
+        const multiValue = value.map(singleValue => encodeURIComponent(String(singleValue)))
+            .join(`&${encodeURIComponent(fullKey)}=`);
+        return `${encodeURIComponent(fullKey)}=${multiValue}`;
+    }
+    if (value instanceof Set) {
+        const valueAsArray = Array.from(value);
+        return querystringSingleKey(key, valueAsArray, keyPrefix);
+    }
+    if (value instanceof Date) {
+        return `${encodeURIComponent(fullKey)}=${encodeURIComponent(value.toISOString())}`;
+    }
+    if (value instanceof Object) {
+        return querystring(value as HTTPQuery, fullKey);
+    }
+    return `${encodeURIComponent(fullKey)}=${encodeURIComponent(String(value))}`;
+}
+
+export function mapValues(data: any, fn: (item: any) => any) {
+  return Object.keys(data).reduce(
+    (acc, key) => ({ ...acc, [key]: fn(data[key]) }),
+    {}
+  );
+}
+
+export function canConsumeForm(consumes: Consume[]): boolean {
+    for (const consume of consumes) {
+        if ('multipart/form-data' === consume.contentType) {
+            return true;
+        }
+    }
+    return false;
+}
+
+export interface Consume {
+    contentType: string;
+}
+
+export interface RequestContext {
+    fetch: FetchAPI;
+    url: string;
+    init: RequestInit;
+}
+
+export interface ResponseContext {
+    fetch: FetchAPI;
+    url: string;
+    init: RequestInit;
+    response: Response;
+}
+
+export interface ErrorContext {
+    fetch: FetchAPI;
+    url: string;
+    init: RequestInit;
+    error: unknown;
+    response?: Response;
+}
+
+export interface Middleware {
+    pre?(context: RequestContext): Promise<FetchParams | void>;
+    post?(context: ResponseContext): Promise<Response | void>;
+    onError?(context: ErrorContext): Promise<Response | void>;
+}
+
+export interface ApiResponse<T> {
+    raw: Response;
+    value(): Promise<T>;
+}
+
+export interface ResponseTransformer<T> {
+    (json: any): T;
+}
+
+export class JSONApiResponse<T> {
+    constructor(public raw: Response, private transformer: ResponseTransformer<T> = (jsonValue: any) => jsonValue) {}
+
+    async value(): Promise<T> {
+        return this.transformer(await this.raw.json());
+    }
+}
+
+export class VoidApiResponse {
+    constructor(public raw: Response) {}
+
+    async value(): Promise<void> {
+        return undefined;
+    }
+}
+
+export class BlobApiResponse {
+    constructor(public raw: Response) {}
+
+    async value(): Promise<Blob> {
+        return await this.raw.blob();
+    };
+}
+
+export class TextApiResponse {
+    constructor(public raw: Response) {}
+
+    async value(): Promise<string> {
+        return await this.raw.text();
+    };
+}
--- a/agent/agentUiTs/src/index.css
+++ b/agent/agentUiTs/src/index.css
@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/agent/agentUiTs/src/main.tsx
+++ b/agent/agentUiTs/src/main.tsx
@ -0,0 +1,10 @@
+import "./index.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/agent/agentUiTs/src/vite-env.d.ts
+++ b/agent/agentUiTs/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/agent/agentUiTs/tsconfig.app.json
+++ b/agent/agentUiTs/tsconfig.app.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/agent/agentUiTs/tsconfig.json
+++ b/agent/agentUiTs/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/agent/agentUiTs/tsconfig.node.json
+++ b/agent/agentUiTs/tsconfig.node.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/agent/agentUiTs/vite.config.ts
+++ b/agent/agentUiTs/vite.config.ts
@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/v1': {
+        target: 'http://localhost:8888',
+        changeOrigin: true,
+      }
+    }
+  }
+})
--- a/bin/generate_rest.sh
+++ b/bin/generate_rest.sh
@ -45,13 +45,13 @@ swagger generate client -P rest_model_zrok.Principal -f "$zrokSpec" -c rest_clie
 echo "...generating web console js client"
 openapi -s specs/zrok.yml -o ui/src/api -l js

+echo "...generating agent console js client"
+openapi-generator-cli generate -i agent/agentGrpc/agent.swagger.json -o agent/agentUiTs/src/api -g typescript-fetch
+
 echo "...generating ts client"
 openapi-generator-cli generate -i specs/zrok.yml -o sdk/nodejs/sdk/src/zrok/api -g typescript-node

 echo "...generating python client"
 swagger-codegen generate -i specs/zrok.yml -o sdk/python/sdk/zrok -c $pythonConfig -l python

-git checkout rest_server_zrok/configure_zrok.go
-
-echo "...generating agent console js client"
-swagger-codegen generate -i agent/agentGrpc/agent.swagger.json -o agent/agentUi/src/api -l javascript
+git checkout rest_server_zrok/configure_zrok.go