@robota-sdk/agent-ui-web 0.0.0-stage → 3.0.0-beta.101

package/src/components/AgentSwitcherSheet.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Check, X } from 'lucide-react';
+import React from 'react';
+
+import { Dialog } from './Dialog.js';
+
+import type { IWsSessionState } from '../hooks/useSessionClient.js';
+
+/**
+ * #3282 §4 part b-3 — the agent switcher: `show-agent-switcher` (`/agent` with no args) opens this
+ * sheet instead of the surface's old "not available" line. It lists every agent this session can
+ * run — name, one-line description, and where each is defined in plain words — with the current one
+ * checked. Choosing a row runs the SAME path as typing `/agent <name>` (a plain `command`, wired in
+ * `useAgentSwitcherState`); the reply is this sheet's own confirmation line, never a conversation
+ * card (issue #3282 §4's decided design).
+ */
+export function AgentSwitcherSheet({ state }: { state: IWsSessionState }): React.ReactElement | null {
+  if (!state.agentSwitcherOpen) return null;
+
+  const loading = state.agentSwitcherStatus === 'loading' && state.agentDefinitions.length === 0;
+
+  return (
+    <Dialog
+      open
+      onClose={() => state.closeAgentSwitcher()}
+      title="Switch agent"
+      panelClassName="flex max-h-[min(560px,85vh)] w-full max-w-md flex-col overflow-hidden rounded-2xl bg-card text-card-foreground shadow-[0_8px_30px_-12px_rgb(0_0_0/0.45)] focus:outline-none"
+    >
+      <div className="flex h-12 flex-shrink-0 items-center gap-1 border-b border-border px-3">
+        <h2 className="px-1.5 text-[15px] font-semibold text-foreground">Switch agent</h2>
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={() => state.closeAgentSwitcher()}
+          className="ml-auto rounded-md p-1.5 text-muted-foreground hover:bg-hover hover:text-foreground"
+        >
+          <X size={17} strokeWidth={1.75} />
+        </button>
+      </div>
+
+      {state.agentSwitchMessage ? (
+        <p
+          role="status"
+          className="mx-4 mt-3 rounded-lg bg-raised px-3 py-2 text-[13px] text-foreground"
+        >
+          {state.agentSwitchMessage}
+        </p>
+      ) : null}
+
+      <ul className="min-h-0 flex-1 overflow-y-auto p-2">
+        {loading ? (
+          <li className="px-3 py-4 text-[13.5px] text-muted-foreground">Loading agents…</li>
+        ) : state.agentDefinitions.length === 0 ? (
+          <li className="px-3 py-4 text-[13.5px] text-muted-foreground">
+            No agents are configured on this host.
+          </li>
+        ) : (
+          state.agentDefinitions.map((agent) => {
+            const isCurrent = agent.name === state.currentAgentType;
+            return (
+              <li key={agent.name}>
+                <button
+                  type="button"
+                  onClick={() => state.selectAgent(agent.name)}
+                  aria-current={isCurrent ? 'true' : undefined}
+                  className="flex w-full items-start gap-3 rounded-xl px-3 py-2.5 text-left hover:bg-hover"
+                >
+                  <span className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                    {isCurrent ? (
+                      <Check size={16} strokeWidth={2} className="text-accent" />
+                    ) : null}
+                  </span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-[14px] font-medium text-foreground">
+                      {agent.name}
+                    </span>
+                    <span className="block truncate text-[13px] text-muted-foreground">
+                      {agent.description}
+                    </span>
+                    <span className="block truncate text-[12px] text-subtle">
+                      {agent.definedIn}
+                    </span>
+                  </span>
+                </button>
+              </li>
+            );
+          })
+        )}
+      </ul>
+    </Dialog>
+  );
+}

package/src/components/AppView.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { createAppViewBridge } from '../app-view/bridge.js';
+import { toCallToolResult } from '../app-view/call-tool-result.js';
+import { AppViewHostContext, readAppViewHostContext } from '../app-view/host-context.js';
+import { appViewKey } from '../hooks/use-app-view-requests.js';
+
+import type { IAppViewHost } from '../app-view/host-context.js';
+import type { TAppView } from '../app-view/types.js';
+import type { IActiveTool } from '../hooks/useSessionClient.js';
+
+const INITIAL_HEIGHT_PX = 160;
+
+export const APP_VIEW_UNAVAILABLE_TEXT =
+  'This tool returned an app view, which this window cannot show.';
+
+type TLoad =
+  | { status: 'loading' }
+  | { status: 'ready'; view: TAppView; host: IAppViewHost; sandboxUrl: string; signal: AbortSignal }
+  | { status: 'failed'; reason: string };
+
+export function AppView({ tool }: { tool: IActiveTool }): React.ReactElement | null {
+  const host = useContext(AppViewHostContext);
+  if (tool.appView === undefined) return null;
+  const viewKey = appViewKey(tool);
+
+  if (host === null || host.sandboxUrl === undefined || viewKey === undefined) {
+    return <p className="text-[13px] text-subtle">{APP_VIEW_UNAVAILABLE_TEXT}</p>;
+  }
+  return (
+    <AppViewFrame
+      key={viewKey}
+      tool={tool}
+      host={host}
+      sandboxUrl={host.sandboxUrl}
+      viewKey={viewKey}
+      sourceId={tool.appView.sourceId}
+    />
+  );
+}
+
+function AppViewFrame({
+  tool,
+  host,
+  sandboxUrl,
+  viewKey,
+  sourceId,
+}: {
+  tool: IActiveTool;
+  host: IAppViewHost;
+  sandboxUrl: string;
+
+  viewKey: string;
+  sourceId: string;
+}): React.ReactElement {
+  const [load, setLoad] = useState<TLoad>({ status: 'loading' });
+  const [height, setHeight] = useState(INITIAL_HEIGHT_PX);
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const toolRef = useRef(tool);
+  toolRef.current = tool;
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setLoad({ status: 'loading' });
+    host.readAppView(viewKey, controller.signal).then(
+      (view) => {
+        if (!controller.signal.aborted)
+          setLoad({ status: 'ready', view, host, sandboxUrl, signal: controller.signal });
+      },
+      (error: unknown) => {
+        if (!controller.signal.aborted) {
+          setLoad({
+            status: 'failed',
+            reason: error instanceof Error ? error.message : String(error),
+          });
+        }
+      },
+    );
+    return () => {
+      controller.abort();
+    };
+  }, [viewKey, host.readAppView, host.callAppTool, sandboxUrl]);
+
+  const ready =
+    load.status === 'ready' &&
+    load.host.readAppView === host.readAppView &&
+    load.host.callAppTool === host.callAppTool &&
+    load.sandboxUrl === sandboxUrl
+      ? load
+      : null;
+  // A layout effect, so the teardown it posts on unmount still finds the frame in the document.
+  useLayoutEffect(() => {
+    const frame = frameRef.current;
+    if (ready === null || frame === null) return undefined;
+    const current = ready.host;
+    const view = ready.view;
+    const bridge = createAppViewBridge({
+      view,
+      toolResult: toCallToolResult(toolRef.current, view),
+      hostInfo: current.hostInfo,
+      hostContext: readAppViewHostContext(current.platform),
+      // The frame's origin is opaque, so no target origin can name it; the bridge accepts replies
+
+      post: (message) => frame.contentWindow?.postMessage(message, '*'),
+      source: () => frame.contentWindow,
+
+      callAppTool: (name, args) => current.callAppTool(viewKey, name, args, ready.signal),
+      onHeight: setHeight,
+    });
+    const onMessage = (event: MessageEvent): void => bridge.handleMessage(event);
+    window.addEventListener('message', onMessage);
+    return () => {
+      window.removeEventListener('message', onMessage);
+      bridge.dispose();
+    };
+  }, [ready, viewKey]);
+
+  if (load.status === 'failed') {
+    return (
+      <p className="text-[13px] text-subtle">
+        The app from {sourceId} could not be shown: {load.reason}
+      </p>
+    );
+  }
+  if (ready === null) {
+    return <p className="text-[13px] text-subtle">Loading the app from {sourceId}…</p>;
+  }
+  return (
+    <div className="my-1 flex flex-col gap-1">
+      <p className="text-[12px] text-subtle">App from {sourceId}</p>
+      <iframe
+        ref={frameRef}
+
+        // `allow-same-origin` the frame has an opaque origin, so its document cannot read this page.
+        sandbox="allow-scripts"
+        src={sandboxUrl}
+        title={`App from ${sourceId}`}
+        referrerPolicy="no-referrer"
+        data-testid="app-view-frame"
+        style={{ width: '100%', height }}
+        className="block rounded-lg border border-border bg-card"
+      />
+    </div>
+  );
+}

package/src/components/Brand.tsx

@@ -0,0 +1,33 @@
+import { useProductIdentity } from '../product-identity.js';
+/** Shared mark: a rounded face with two eyes, in the accent colour. */
+export function ProductMark({ size = 20 }: { size?: number }): React.ReactElement {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+      className="flex-shrink-0"
+    >
+      <rect x="1" y="2.5" width="18" height="15" rx="5.5" className="fill-accent" />
+      <circle cx="7.2" cy="10" r="1.7" className="fill-accent-foreground" />
+      <circle cx="12.8" cy="10" r="1.7" className="fill-accent-foreground" />
+    </svg>
+  );
+}
+
+/** The mark and the wordmark, as the app's name in its chrome. */
+export function ProductWordmark({ surface }: { surface?: string }): React.ReactElement {
+  const { identity } = useProductIdentity();
+  return (
+    <span className="flex items-center gap-2">
+      <ProductMark />
+      <span className="text-[15px] font-semibold tracking-[-0.01em] text-foreground">{identity.displayName}</span>
+      {surface ? (
+        <span className="rounded-md bg-raised px-1.5 py-px text-[11px] font-medium text-muted-foreground">
+          {surface}
+        </span>
+      ) : null}
+    </span>
+  );
+}