@assistant-ui/vscode 0.0.0-stage → 0.0.0

package/src/theme.css

@@ -0,0 +1,327 @@
+@custom-variant dark (&:is(.vscode-dark *, .vscode-high-contrast:not(.vscode-high-contrast-light) *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: 1.5rem;
+  --font-sans: var(--vscode-font-family, ui-sans-serif, system-ui, sans-serif);
+  --font-mono: var(
+    --vscode-editor-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
+}
+
+/*
+ * Tokens live on body, not :root: VS Code sets its theme classes on body, and
+ * body-scoped values win over a template's :root values in any import order.
+ */
+@layer base {
+  body {
+    --aui-vscode-background: var(
+      --vscode-sideBar-background,
+      var(--vscode-editor-background, Canvas)
+    );
+    --aui-vscode-foreground: var(
+      --vscode-sideBar-foreground,
+      var(--vscode-foreground, CanvasText)
+    );
+
+    --radius: 0.375rem;
+    --background: var(--aui-vscode-background);
+    --foreground: var(--aui-vscode-foreground);
+    --card: var(--vscode-editorWidget-background, var(--background));
+    --card-foreground: var(--vscode-editorWidget-foreground, var(--foreground));
+    --popover: var(
+      --vscode-menu-background,
+      var(--vscode-editorWidget-background, var(--background))
+    );
+    --popover-foreground: var(
+      --vscode-menu-foreground,
+      var(--vscode-editorWidget-foreground, var(--foreground))
+    );
+    --primary: var(--vscode-button-background, #0078d4);
+    --primary-foreground: var(--vscode-button-foreground, #ffffff);
+    /*
+     * Derived from the surface: the VS Code candidates equal a surface in some
+     * default theme (input and editor in Light Modern) or are transparent
+     * (secondary buttons in Dark Modern).
+     */
+    --secondary: color-mix(in srgb, var(--foreground) 12%, var(--background));
+    --secondary-foreground: var(--foreground);
+    --muted: color-mix(in srgb, var(--foreground) 6%, var(--background));
+    --muted-foreground: var(--vscode-descriptionForeground, GrayText);
+    --accent: var(
+      --vscode-list-hoverBackground,
+      var(
+        --vscode-toolbar-hoverBackground,
+        color-mix(in srgb, var(--foreground) 10%, transparent)
+      )
+    );
+    --accent-foreground: var(--vscode-list-hoverForeground, var(--foreground));
+    --destructive: var(--vscode-errorForeground, light-dark(#e51400, #f14c4c));
+    --border: var(
+      --vscode-panel-border,
+      var(
+        --vscode-widget-border,
+        color-mix(in srgb, var(--foreground) 15%, transparent)
+      )
+    );
+    --input: var(
+      --vscode-input-border,
+      var(--vscode-dropdown-border, var(--border))
+    );
+    --ring: var(--vscode-focusBorder, #0078d4);
+    --chart-1: var(--vscode-charts-blue, #3794ff);
+    --chart-2: var(--vscode-charts-green, #89d185);
+    --chart-3: var(--vscode-charts-yellow, #cca700);
+    --chart-4: var(--vscode-charts-orange, #d18616);
+    --chart-5: var(--vscode-charts-purple, #b180d7);
+    --sidebar: var(--vscode-sideBar-background, var(--background));
+    --sidebar-foreground: var(
+      --vscode-sideBar-foreground,
+      var(--vscode-foreground, var(--foreground))
+    );
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--vscode-sideBar-border, var(--border));
+    --sidebar-ring: var(--ring);
+
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(
+      --vscode-font-family,
+      ui-sans-serif,
+      system-ui,
+      sans-serif
+    );
+    font-size: var(--vscode-font-size, 13px);
+    font-weight: var(--vscode-font-weight, normal);
+  }
+
+  body:is(
+    [data-aui-vscode-surface="editor"],
+    [data-aui-vscode-surface="editor"] *
+  ) {
+    --aui-vscode-background: var(--vscode-editor-background, Canvas);
+    --aui-vscode-foreground: var(
+      --vscode-editor-foreground,
+      var(--vscode-foreground, CanvasText)
+    );
+  }
+
+  body:is(
+    [data-aui-vscode-surface="panel"],
+    [data-aui-vscode-surface="panel"] *
+  ) {
+    --aui-vscode-background: var(
+      --vscode-panel-background,
+      var(--vscode-editor-background, Canvas)
+    );
+    --aui-vscode-foreground: var(--vscode-foreground, CanvasText);
+  }
+
+  body:is(.vscode-light, .vscode-high-contrast-light) {
+    color-scheme: light;
+  }
+
+  /* Light Modern sets --vscode-descriptionForeground to its foreground colour. */
+  body.vscode-light:not(.vscode-high-contrast) {
+    --muted-foreground: color-mix(
+      in srgb,
+      var(--foreground) 72%,
+      var(--background)
+    );
+  }
+
+  body:is(
+    .vscode-dark,
+    .vscode-high-contrast:not(.vscode-high-contrast-light)
+  ) {
+    color-scheme: dark;
+  }
+
+  /* Dark High Contrast sets --vscode-button-background to its black background. */
+  body:is(.vscode-high-contrast, .vscode-high-contrast-light) {
+    --primary: var(--vscode-textLink-foreground, LinkText);
+    --primary-foreground: var(--background);
+    --border: var(--vscode-contrastBorder, CanvasText);
+    --input: var(--vscode-contrastBorder, CanvasText);
+    --ring: var(
+      --vscode-contrastActiveBorder,
+      var(--vscode-focusBorder, Highlight)
+    );
+    --sidebar-border: var(--border);
+  }
+
+  /*
+   * Recent VS Code releases inject the webview defaults as
+   * @layer vscode-default, which ranks below Tailwind's layers but still
+   * applies wherever preflight sets nothing, and which the unlayered
+   * revert-layer rules below would fall back to. revert here drops them to the
+   * browser defaults.
+   */
+  :where(img, video) {
+    max-height: revert;
+  }
+
+  :where(a code) {
+    color: revert;
+  }
+
+  :where(a, input, select, textarea):focus {
+    outline: revert;
+    outline-offset: revert;
+  }
+
+  :where(code, kbd) {
+    color: revert;
+    background-color: revert;
+    border-radius: revert;
+  }
+
+  :where(kbd) {
+    box-shadow: revert;
+    vertical-align: revert;
+  }
+
+  :where(blockquote) {
+    background: revert;
+  }
+}
+
+/*
+ * VS Code injects an unlayered default stylesheet into every webview, which
+ * outranks Tailwind's layers; revert-layer hands these properties back to them.
+ */
+body {
+  margin: revert-layer;
+  padding: revert-layer;
+  background-color: revert-layer;
+  color: revert-layer;
+  font-family: revert-layer;
+  font-size: revert-layer;
+  font-weight: revert-layer;
+}
+
+img,
+video {
+  max-width: revert-layer;
+  max-height: revert-layer;
+}
+
+a,
+a code,
+a:hover {
+  color: revert-layer;
+}
+
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: revert-layer;
+  outline-offset: revert-layer;
+}
+
+code,
+pre code {
+  font-family: revert-layer;
+  color: revert-layer;
+  background-color: revert-layer;
+  padding: revert-layer;
+  border-radius: revert-layer;
+}
+
+blockquote {
+  background: revert-layer;
+  border-color: revert-layer;
+}
+
+:is(.vscode-high-contrast, .vscode-high-contrast-light)
+  :is(
+    [data-radix-popper-content-wrapper] > *,
+    [role="dialog"],
+    [role="menu"],
+    [role="listbox"],
+    [role="tooltip"]
+  ) {
+  outline: 1px solid var(--vscode-contrastBorder, CanvasText);
+  outline-offset: -1px;
+}
+
+:is(.vscode-high-contrast, .vscode-high-contrast-light)
+  :is(
+    .aui-user-message-content,
+    [data-slot="composer-quote"],
+    [data-slot="chat-panel-user-message"],
+    [data-slot="chat-panel-composer"]
+  ) {
+  outline: 1px solid var(--vscode-contrastBorder, CanvasText);
+  outline-offset: -1px;
+}
+
+:is(.vscode-high-contrast, .vscode-high-contrast-light)
+  [data-slot="aui_thread-list-item"]:is([data-active], :hover) {
+  outline: 1px dashed
+    var(--vscode-contrastActiveBorder, var(--vscode-focusBorder, Highlight));
+  outline-offset: -1px;
+}
+
+:is(.vscode-high-contrast, .vscode-high-contrast-light)
+  [data-slot="aui_thread-list-item"][data-active] {
+  outline-style: solid;
+}
+
+:is(.vscode-high-contrast, .vscode-high-contrast-light)
+  [data-slot="thread-list"]
+  [aria-current="true"] {
+  outline: 1px solid
+    var(--vscode-contrastActiveBorder, var(--vscode-focusBorder, Highlight));
+  outline-offset: -1px;
+}
+
+:is(.vscode-high-contrast, .vscode-high-contrast-light) :focus-visible {
+  outline: 1px solid
+    var(--vscode-contrastActiveBorder, var(--vscode-focusBorder, Highlight));
+  outline-offset: -1px;
+}

package/src/webview/csp-nonce.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the nonce `renderWebviewHtml` wrote to `<meta property="csp-nonce">`,
+ * for libraries that inject `<style>` or `<script>` tags at runtime.
+ */
+export function getCspNonce(): string | undefined {
+  const meta = globalThis.document?.querySelector<HTMLMetaElement>(
+    'meta[property="csp-nonce"]',
+  );
+  return meta?.nonce || meta?.getAttribute("nonce") || undefined;
+}

package/src/webview/fetch.ts

@@ -0,0 +1,210 @@
+import {
+  isHostToWebviewMessage,
+  VSCODE_BRIDGE_CHANNEL,
+  VSCODE_VIRTUAL_ORIGIN,
+  type HostToWebviewMessage,
+  type WebviewToHostMessage,
+} from "../protocol";
+import { isForeignHttpUrl } from "../route-url";
+import { getVSCodeApi } from "./vscode-api";
+import { randomIdPrefix } from "./id";
+
+export type VSCodeBridgePort = {
+  postMessage(message: WebviewToHostMessage): void;
+  onMessage(listener: (message: unknown) => void): () => void;
+};
+
+export type VSCodeFetch = (
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) => Promise<Response>;
+
+const NULL_BODY_STATUSES = new Set([101, 204, 205, 304]);
+
+const idPrefix = randomIdPrefix();
+let nextId = 0;
+
+export const webviewPort: VSCodeBridgePort = {
+  postMessage: (message) => getVSCodeApi().postMessage(message),
+  onMessage: (listener) => {
+    const handler = (event: MessageEvent) => listener(event.data);
+    globalThis.addEventListener("message", handler);
+    return () => globalThis.removeEventListener("message", handler);
+  },
+};
+
+const abortReason = (signal: AbortSignal): unknown =>
+  signal.reason ?? new DOMException("This operation was aborted", "AbortError");
+
+const readBody = async (
+  body: ReadableStream<Uint8Array>,
+  signal: AbortSignal,
+) => {
+  const reader = body.getReader();
+  const onAbort = () => {
+    reader.cancel(signal.reason).catch(() => undefined);
+  };
+  signal.addEventListener("abort", onAbort, { once: true });
+  try {
+    const parts: Uint8Array[] = [];
+    let size = 0;
+    while (true) {
+      const { done, value } = await reader.read();
+      if (signal.aborted) throw abortReason(signal);
+      if (done) break;
+      parts.push(value);
+      size += value.byteLength;
+    }
+    const out = new Uint8Array(size);
+    let offset = 0;
+    for (const part of parts) {
+      out.set(part, offset);
+      offset += part.byteLength;
+    }
+    return out;
+  } finally {
+    signal.removeEventListener("abort", onAbort);
+    reader.releaseLock();
+  }
+};
+
+const toRequest = (input: RequestInfo | URL, init?: RequestInit) => {
+  const request =
+    input instanceof Request
+      ? new Request(input, init)
+      : new Request(new URL(String(input), VSCODE_VIRTUAL_ORIGIN), init);
+  if (isForeignHttpUrl(new URL(request.url))) {
+    throw new TypeError("vscodeFetch only reaches the extension host's routes");
+  }
+  return request;
+};
+
+/**
+ * Creates a `fetch` that sends each request to `serveWebviewRoutes` in the
+ * extension host and streams the response back over `port`.
+ */
+export function createVSCodeFetch(
+  port: VSCodeBridgePort = webviewPort,
+): VSCodeFetch {
+  return async (input, init) => {
+    const request = toRequest(input, init);
+    const { signal } = request;
+    if (signal.aborted) throw abortReason(signal);
+
+    const body = request.body ? await readBody(request.body, signal) : null;
+    if (signal.aborted) throw abortReason(signal);
+
+    const id = `${idPrefix}-${++nextId}`;
+
+    return new Promise<Response>((resolve, reject) => {
+      let controller: ReadableStreamDefaultController<Uint8Array> | undefined;
+      let responded = false;
+      let finished = false;
+
+      const finish = () => {
+        finished = true;
+        unsubscribe();
+        signal.removeEventListener("abort", onAbort);
+      };
+
+      const fail = (error: unknown) => {
+        if (finished) return;
+        finish();
+        if (controller) controller.error(error);
+        else reject(error);
+      };
+
+      const sendAbort = () => {
+        try {
+          port.postMessage({
+            channel: VSCODE_BRIDGE_CHANNEL,
+            kind: "fetch:abort",
+            id,
+          });
+        } catch {
+          return;
+        }
+      };
+
+      const onAbort = () => {
+        if (finished) return;
+        fail(abortReason(signal));
+        sendAbort();
+      };
+
+      const onHead = (
+        message: Extract<HostToWebviewMessage, { kind: "fetch:head" }>,
+      ) => {
+        const stream =
+          request.method === "HEAD" || NULL_BODY_STATUSES.has(message.status)
+            ? null
+            : new ReadableStream<Uint8Array>({
+                start: (c) => {
+                  controller = c;
+                },
+                cancel: () => {
+                  if (finished) return;
+                  finish();
+                  sendAbort();
+                },
+              });
+        let response: Response;
+        try {
+          response = new Response(stream, {
+            status: message.status,
+            statusText: message.statusText,
+            headers: message.headers,
+          });
+        } catch (error) {
+          finish();
+          reject(new TypeError("Failed to fetch", { cause: error }));
+          sendAbort();
+          return;
+        }
+        responded = true;
+        resolve(response);
+      };
+
+      const unsubscribe = port.onMessage((message) => {
+        if (finished) return;
+        if (!isHostToWebviewMessage(message) || message.id !== id) return;
+        switch (message.kind) {
+          case "fetch:head":
+            onHead(message);
+            break;
+          case "fetch:chunk":
+            controller?.enqueue(message.chunk);
+            break;
+          case "fetch:end":
+            finish();
+            if (controller) controller.close();
+            else if (!responded) {
+              reject(new TypeError("Response ended before its head"));
+            }
+            break;
+          case "fetch:error":
+            fail(new TypeError(message.message));
+            break;
+        }
+      });
+
+      signal.addEventListener("abort", onAbort, { once: true });
+
+      try {
+        port.postMessage({
+          channel: VSCODE_BRIDGE_CHANNEL,
+          kind: "fetch:request",
+          id,
+          url: request.url,
+          method: request.method,
+          headers: [...request.headers],
+          body,
+        });
+      } catch (error) {
+        fail(error);
+      }
+    });
+  };
+}
+
+export const vscodeFetch: VSCodeFetch = createVSCodeFetch();

package/src/webview/id.ts

@@ -0,0 +1,4 @@
+export const randomIdPrefix = () =>
+  Array.from(globalThis.crypto.getRandomValues(new Uint8Array(8)), (byte) =>
+    byte.toString(16).padStart(2, "0"),
+  ).join("");

package/src/webview/links.ts

@@ -0,0 +1,56 @@
+import { DEFAULT_EXTERNAL_SCHEMES, parseExternalUrl } from "../external-url";
+import { webviewPort, type VSCodeBridgePort } from "./fetch";
+import { callHost } from "./rpc";
+
+export type LinkInterceptorOptions = {
+  /** URL schemes to open outside the webview, such as `"https:"`. */
+  schemes?: readonly string[];
+  onError?: (error: unknown) => void;
+  port?: VSCodeBridgePort;
+};
+
+/**
+ * Opens absolute links and `window.open` URLs through the extension host's
+ * `openExternal`, since a webview cannot navigate away or open windows.
+ * Returns a function that removes the listeners and restores `window.open`.
+ */
+export function installLinkInterceptor({
+  schemes = DEFAULT_EXTERNAL_SCHEMES,
+  onError = (error) => console.error(error),
+  port = webviewPort,
+}: LinkInterceptorOptions = {}): () => void {
+  const openExternal = (url: string) => {
+    callHost(port, "openExternal", [url]).catch(onError);
+  };
+
+  const onClick = (event: MouseEvent) => {
+    if (event.defaultPrevented) return;
+    if (event.button !== (event.type === "auxclick" ? 1 : 0)) return;
+    if (!(event.target instanceof Element)) return;
+    const anchor = event.target.closest("a[href]");
+    const url = parseExternalUrl(anchor?.getAttribute("href"), schemes);
+    if (!url) return;
+    event.preventDefault();
+    openExternal(url);
+  };
+
+  let installed = true;
+  const originalOpen = window.open;
+  const patchedOpen: typeof window.open = function (url, ...rest) {
+    const external = installed ? parseExternalUrl(url, schemes) : null;
+    if (!external) return originalOpen.call(window, url, ...rest);
+    openExternal(external);
+    return null;
+  };
+
+  document.addEventListener("click", onClick);
+  document.addEventListener("auxclick", onClick);
+  window.open = patchedOpen;
+
+  return () => {
+    installed = false;
+    document.removeEventListener("click", onClick);
+    document.removeEventListener("auxclick", onClick);
+    if (window.open === patchedOpen) window.open = originalOpen;
+  };
+}

package/src/webview/rpc.ts

@@ -0,0 +1,35 @@
+import { isHostToWebviewMessage, VSCODE_BRIDGE_CHANNEL } from "../protocol";
+import type { VSCodeBridgePort } from "./fetch";
+import { randomIdPrefix } from "./id";
+
+const idPrefix = `rpc-${randomIdPrefix()}`;
+let nextId = 0;
+
+export const callHost = (
+  port: VSCodeBridgePort,
+  method: string,
+  params: unknown[],
+): Promise<unknown> => {
+  const id = `${idPrefix}-${++nextId}`;
+  return new Promise((resolve, reject) => {
+    const unsubscribe = port.onMessage((message) => {
+      if (!isHostToWebviewMessage(message) || message.id !== id) return;
+      if (message.kind !== "rpc:response") return;
+      unsubscribe();
+      if (message.ok) resolve(message.result);
+      else reject(new Error(message.message));
+    });
+    try {
+      port.postMessage({
+        channel: VSCODE_BRIDGE_CHANNEL,
+        kind: "rpc:request",
+        id,
+        method,
+        params,
+      });
+    } catch (error) {
+      unsubscribe();
+      reject(error);
+    }
+  });
+};

package/src/webview/storage.ts

@@ -0,0 +1,24 @@
+import type { AsyncStorageLike } from "@assistant-ui/core/react";
+import { webviewPort, type VSCodeBridgePort } from "./fetch";
+import { callHost } from "./rpc";
+
+/**
+ * Creates an `AsyncStorageLike` backed by the `storage` Memento passed to
+ * `serveWebviewHost`, for `createLocalStorageAdapter({ storage })`.
+ */
+export function createVSCodeStorage(
+  port: VSCodeBridgePort = webviewPort,
+): AsyncStorageLike {
+  return {
+    getItem: async (key) => {
+      const value = await callHost(port, "storage.getItem", [key]);
+      return typeof value === "string" ? value : null;
+    },
+    setItem: async (key, value) => {
+      await callHost(port, "storage.setItem", [key, value]);
+    },
+    removeItem: async (key) => {
+      await callHost(port, "storage.removeItem", [key]);
+    },
+  };
+}

package/src/webview/vscode-api.ts

@@ -0,0 +1,31 @@
+import { VSCODE_BRIDGE_CHANNEL } from "../protocol";
+
+export type VSCodeApi<TState = unknown> = {
+  postMessage(message: unknown): void;
+  getState(): TState | undefined;
+  setState<T extends TState | undefined>(newState: T): T;
+};
+
+let api: VSCodeApi | undefined;
+
+/**
+ * Returns the webview's VS Code API. `acquireVsCodeApi()` may only be called
+ * once per webview, so every caller in the webview must go through this.
+ */
+export function getVSCodeApi<TState = unknown>(): VSCodeApi<TState> {
+  if (api) return api as VSCodeApi<TState>;
+  const acquire = (globalThis as { acquireVsCodeApi?: () => VSCodeApi })
+    .acquireVsCodeApi;
+  if (typeof acquire !== "function") {
+    throw new Error(
+      "acquireVsCodeApi is not defined: getVSCodeApi() must run inside a VS Code webview.",
+    );
+  }
+  api = acquire();
+  api.postMessage({
+    channel: VSCODE_BRIDGE_CHANNEL,
+    kind: "fetch:reset",
+    id: "",
+  });
+  return api as VSCodeApi<TState>;
+}