@agent-native/core 0.79.27 → 0.80.1

package/corpus/core/src/cli/skills.ts

@@ -37,15 +37,16 @@ const HELP = `npx @agent-native/core@latest skills
 
 Usage:
   npx @agent-native/core@latest skills list
-  npx @agent-native/core@latest skills status [assets|content|design-exploration|visual-plan|visual-recap|context-xray|scaffold] [--client codex|claude-code|pi|all] [--scope user|project] [--json]
-  npx @agent-native/core@latest skills update [assets|content|design-exploration|visual-plan|visual-recap|context-xray|scaffold] [--client codex|claude-code|pi|all] [--scope user|project] [--dry-run] [--json]
-  npx @agent-native/core@latest skills add assets|content|design-exploration|visual-plan|visual-recap|context-xray [--client codex|claude-code|cowork|cursor|opencode|github-copilot|all] [--scope user|project] [--mode hosted|local-files|self-hosted] [--mcp-url <url>] [--no-connect] [--with-github-action] [--yes] [--dry-run] [--json]
+  npx @agent-native/core@latest skills status [assets|content|design-exploration|visual-edit|visual-plan|visual-recap|context-xray|scaffold] [--client codex|claude-code|pi|all] [--scope user|project] [--json]
+  npx @agent-native/core@latest skills update [assets|content|design-exploration|visual-edit|visual-plan|visual-recap|context-xray|scaffold] [--client codex|claude-code|pi|all] [--scope user|project] [--dry-run] [--json]
+  npx @agent-native/core@latest skills add assets|content|design-exploration|visual-edit|visual-plan|visual-recap|context-xray [--client codex|claude-code|cowork|cursor|opencode|github-copilot|all] [--scope user|project] [--mode hosted|local-files|self-hosted] [--mcp-url <url>] [--no-connect] [--with-github-action] [--yes] [--dry-run] [--json]
   npx @agent-native/core@latest skills add <manifest-or-app-dir|skill-repo> [--skill <name>] [--client ...] [--yes]
 
 Examples:
   npx @agent-native/core@latest skills add assets
   npx @agent-native/core@latest skills add content --mode local-files
   npx @agent-native/core@latest skills add design-exploration
+  npx @agent-native/core@latest skills add visual-edit
   npx @agent-native/core@latest skills add visual-plan
   npx @agent-native/core@latest skills add visual-recap
   npx @agent-native/core@latest skills add visual-recap --with-github-action
@@ -376,6 +377,110 @@ iteration, or a human-in-the-loop choice among design directions.
   and token values. Never paste bearer tokens into chat or logs.
 `;
 
+const DESIGN_VISUAL_EDIT_SKILL_MD = `---
+name: visual-edit
+description: >-
+  Open a running local app in Design overview mode as URL-backed iframe screens
+  for visual editing, flow review, duplication, and route-state exploration.
+metadata:
+  visibility: exported
+---
+
+# Visual Edit
+
+Use \`/visual-edit\` when the user wants to inspect or edit a real local app
+visually instead of generating standalone Alpine HTML. The source of truth is
+the running localhost app plus its route URLs. Design shows those routes as
+iframe-backed screens on the infinite canvas.
+
+## Core Model
+
+- Each screen is a URL-backed iframe, not copied HTML.
+- Each screen keeps URL metadata: \`connectionId\`, \`routeId\`, \`path\`,
+  \`url\`, \`bridgeUrl\`, title, and viewport size.
+- Start in Design's screen overview mode. In overview, screens are static like
+  Figma frames; full-screen focus is for scrolling and app interaction.
+- Alt-drag duplicates a screen. For localhost screens, duplication copies the
+  iframe frame and URL metadata; change the copy's path/query for a new state.
+- Flow visualization is multiple URL states: \`/checkout?step=shipping\`,
+  \`/checkout?step=payment\`, \`/checkout?step=done\`, etc.
+- When the user gives a named flow or numbered screen list, preserve that order
+  and create one screen per URL/path. Shorthand like
+  \`localhost:1234/onboarding/1\` means
+  \`http://localhost:1234/onboarding/1\`.
+
+## Required Local Bridge
+
+From the target app repo, make sure its dev server is running, then run:
+
+\`\`\`bash
+npx @agent-native/core@latest design connect --url http://localhost:5173 --root .
+\`\`\`
+
+Use the app's real port. The command starts a local bridge on
+\`http://127.0.0.1:7331\` by default and exposes \`/manifest.json\`,
+\`/routes.json\`, and \`/health\`.
+
+For one-shot agent setup, ask for JSON and keep the long-running bridge open in
+a second terminal if the user needs live updates:
+
+\`\`\`bash
+npx @agent-native/core@latest design connect --url http://localhost:5173 --root . --json
+\`\`\`
+
+## Action Flow
+
+1. Register or refresh the bridge with \`connect-localhost\`, passing the
+   \`/manifest.json\` result as \`routeManifest\` and \`capabilities\`.
+2. Create or reuse a Design project with \`create-design\`.
+3. Place URL-backed screens with \`add-localhost-screens\`:
+
+\`\`\`bash
+pnpm action add-localhost-screens '{
+  "designId": "<design-id>",
+  "connectionId": "<connection-id>",
+  "paths": ["/", "/pricing", "/checkout?step=payment"]
+}'
+\`\`\`
+
+For a numbered flow the user describes in chat, keep the labels and order:
+
+\`\`\`bash
+pnpm action add-localhost-screens '{
+  "designId": "<design-id>",
+  "connectionId": "<connection-id>",
+  "routes": [
+    { "url": "localhost:1234/onboarding/1", "title": "Screen 1" },
+    { "url": "localhost:1234/onboarding/2", "title": "Screen 2" },
+    { "url": "localhost:1234/onboarding/3", "title": "Screen 3" }
+  ]
+}'
+\`\`\`
+
+If no \`routes\` or \`paths\` are supplied, \`add-localhost-screens\` uses every
+route from the latest localhost manifest.
+
+4. Navigate to overview mode:
+
+\`\`\`bash
+pnpm action navigate --view editor --designId "<design-id>" --editorView overview
+\`\`\`
+
+## Editing URLs
+
+Keep localhost screens as URL files plus \`screenMetadata[fileId]\`. Do not
+replace them with copied \`srcdoc\` HTML unless the user explicitly asks for a
+frozen snapshot. To change a state, rerun \`add-localhost-screens\` with the new
+path/query or duplicate the screen and update the copy's URL metadata.
+
+## Verification
+
+- \`list-localhost-connections\` returns the expected connection and routes.
+- The Design editor opens in overview mode.
+- Every requested screen renders the intended localhost URL.
+- Alt-dragging a screen copies the URL-backed frame, not an inline HTML clone.
+`;
+
 /**
  * Setup/auth block for the `/visual-plan` skill. Interpolated into
  * `VISUAL_PLANS_SKILL_MD` below so the install + one-step authenticate
@@ -2458,6 +2563,9 @@ export const BUILT_IN_APP_SKILLS = {
   },
   design: {
     skillName: "design-exploration",
+    extraSkills: {
+      "visual-edit": DESIGN_VISUAL_EDIT_SKILL_MD,
+    },
     manifest: normalizeAppSkillManifest({
       schemaVersion: 1,
       id: "design",
@@ -2480,6 +2588,11 @@ export const BUILT_IN_APP_SKILLS = {
           action: "present-design-variants",
           path: "/design",
         },
+        {
+          id: "visual-edit",
+          action: "add-localhost-screens",
+          path: "/design",
+        },
       ],
       skills: [
         {
@@ -2487,6 +2600,11 @@ export const BUILT_IN_APP_SKILLS = {
           visibility: "exported",
           exportAs: "design-exploration",
         },
+        {
+          path: "skills/visual-edit",
+          visibility: "exported",
+          exportAs: "visual-edit",
+        },
       ],
       hostAdapters: [
         "codex-plugin",
@@ -2653,6 +2771,9 @@ const BUILT_IN_APP_SKILL_ALIASES = {
   "ui-design": "design",
   "ux-design": "design",
   "design-exploration": "design",
+  "visual-edit": "design",
+  "local-visual-edit": "design",
+  "design-visual-edit": "design",
   "ux-exploration": "design",
   "agent-native-design": "design",
   "agent-native-design-exploration": "design",
@@ -2686,6 +2807,8 @@ const BUILT_IN_APP_SKILL_DISPLAY_ALIASES = {
   ],
   design: [
     "design-exploration",
+    "visual-edit",
+    "local-visual-edit",
     "ux-exploration",
     "agent-native-design-exploration",
   ],
@@ -3117,6 +3240,19 @@ function builtInOnlySkillNames(target: string): string[] | undefined {
   if (normalized === "visual-recap" || normalized === "visual-recaps") {
     return ["visual-recap"];
   }
+  if (
+    normalized === "design-exploration" ||
+    normalized === "agent-native-design-exploration"
+  ) {
+    return ["design-exploration"];
+  }
+  if (
+    normalized === "visual-edit" ||
+    normalized === "local-visual-edit" ||
+    normalized === "design-visual-edit"
+  ) {
+    return ["visual-edit"];
+  }
   return undefined;
 }
 
@@ -4278,6 +4414,11 @@ const BUILT_IN_SKILL_PROMPT_OPTIONS: SkillsTargetPromptContext["options"] = [
     label: "design-exploration",
     hint: BUILT_IN_APP_SKILLS.design.manifest.description,
   },
+  {
+    value: "visual-edit",
+    label: "visual-edit",
+    hint: "Open a running local app in Design overview mode as URL-backed iframe screens.",
+  },
   {
     value: "context-xray",
     label: "context-xray",

package/corpus/core/src/client/AgentPanel.tsx

@@ -1318,7 +1318,7 @@ function AgentPanelInner({
             data-agent-page-new-chat=""
             aria-label={t("agentPanel.newChat")}
             onClick={() => {
-              void addTab();
+              addTab();
             }}
             className="pointer-events-auto inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background/95 px-2.5 text-xs font-medium text-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >

package/corpus/core/src/client/AssistantChat.tsx

@@ -34,6 +34,7 @@ import React, {
   useImperativeHandle,
 } from "react";
 
+import { LLM_MISSING_CREDENTIALS_MESSAGE } from "../agent/engine/credential-errors.js";
 import type { ReasoningEffort } from "../shared/reasoning-effort.js";
 import {
   getActiveRun,
@@ -48,9 +49,11 @@ import {
 import {
   appendAgentChatContextToMessage,
   formatAgentChatContextItemsForPrompt,
+  getAgentChatContextState,
   normalizeAgentChatContextItem,
   publishAgentChatContextItems,
   refreshAgentChatContext,
+  subscribeAgentChatContext,
   type AgentChatContextItem,
 } from "./agent-chat.js";
 import { captureError } from "./analytics.js";
@@ -147,7 +150,10 @@ import {
   readSSEStreamRaw,
   settleInterruptedToolCalls,
 } from "./sse-event-processor.js";
-import { useAgentEngineConfigured } from "./use-agent-engine-configured.js";
+import {
+  fetchAgentEngineConfiguredState,
+  useAgentEngineConfigured,
+} from "./use-agent-engine-configured.js";
 import type {
   ChatThreadScope,
   ChatThreadSnapshot,
@@ -223,6 +229,7 @@ function createUserMessageRunConfig(
 const PENDING_SELECTION_KEY = "pending-selection-context";
 const ACTIVE_RUN_CLEAR_TIMEOUT_MS = 5_000;
 const ACTIVE_RUN_POLL_INTERVAL_MS = 150;
+const SUBMIT_ENGINE_STATUS_TIMEOUT_MS = 1000;
 
 type ActiveRunLookup = {
   active?: boolean;
@@ -1131,15 +1138,32 @@ const AssistantChatInner = forwardRef<
       }
     };
   }, [threadRuntime]);
-  const missingApiKey = useAgentEngineConfigured(
+  const agentEngineConfigured = useAgentEngineConfigured(
     providerStatusChecksEnabled,
-  ).missing;
+  );
+  const missingApiKey = agentEngineConfigured.missing;
   const isComposerDisabled = missingApiKey || composerDisabled;
   const missingApiKeySetupAboveComposer =
     missingApiKeySetupLayout === "sidebar";
   // Increments each time the user tries to chat while no LLM is connected.
   // `BuilderSetupCard` watches this to replay a one-shot bounce.
   const [missingKeyBouncePulse, setMissingKeyBouncePulse] = useState(0);
+  const ensureAgentEngineReadyForSubmit = useCallback(async () => {
+    const state =
+      agentEngineConfigured.state === "missing"
+        ? "missing"
+        : await fetchAgentEngineConfiguredState(providerStatusChecksEnabled, {
+            timeoutMs: SUBMIT_ENGINE_STATUS_TIMEOUT_MS,
+          });
+    if (state !== "missing") return true;
+
+    setComposerError(LLM_MISSING_CREDENTIALS_MESSAGE);
+    setMissingKeyBouncePulse((p) => p + 1);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event("agent-chat:missing-api-key"));
+    }
+    return false;
+  }, [agentEngineConfigured.state, providerStatusChecksEnabled]);
   const [authError, setAuthError] = useState<{
     sessionExpired?: boolean;
   } | null>(null);
@@ -1231,8 +1255,15 @@ const AssistantChatInner = forwardRef<
       composerContextItemsRef.current = state.items;
       setComposerContextItems(state.items);
     });
+    const unsubscribe = subscribeAgentChatContext(() => {
+      if (cancelled || !isActiveComposerRef.current) return;
+      const state = getAgentChatContextState();
+      composerContextItemsRef.current = state.items;
+      setComposerContextItems(state.items);
+    });
     return () => {
       cancelled = true;
+      unsubscribe();
     };
   }, [isActiveComposer]);
   // Tracks the JSON of the last queue we successfully persisted so the
@@ -2152,9 +2183,9 @@ const AssistantChatInner = forwardRef<
   }, [tabId]);
 
   // Real activity means the next chunk has started — leave the auto-resume
-  // ("Resuming") state so the indicator settles back to "thinking". The
+  // ("Resuming") state so the indicator settles back to "Thinking". The
   // activity label itself is intentionally not surfaced: the running
-  // indicator stays a steady "thinking" rather than flipping through
+  // indicator stays a steady "Thinking" rather than flipping through
   // transient step labels.
   useEffect(() => {
     const handler = (e: Event) => {
@@ -2454,6 +2485,9 @@ const AssistantChatInner = forwardRef<
       includeComposerContext = false,
       trackInRunsTray = false,
     ) => {
+      if (!(await ensureAgentEngineReadyForSubmit())) {
+        return;
+      }
       materializeFrozenReconnectContent();
       setShowContinue(false);
       setLoopLimitInfo(null);
@@ -2660,6 +2694,7 @@ const AssistantChatInner = forwardRef<
     [
       applyLocalQueuedMessages,
       buildComposerContextSubmission,
+      ensureAgentEngineReadyForSubmit,
       execMode,
       isRunning,
       materializeFrozenReconnectContent,
@@ -3254,10 +3289,10 @@ const AssistantChatInner = forwardRef<
                               ? "Reconnecting"
                               : isAutoResuming
                                 ? "Resuming"
-                                : // Keep a steady "thinking" while the model works —
+                                : // Keep a steady "Thinking" while the model works —
                                   // never flip through transient activity labels
                                   // (e.g. "Contacting model", "Preparing X action").
-                                  "thinking"
+                                  "Thinking"
                           }
                         />
                       )}
@@ -3439,6 +3474,7 @@ const AssistantChatInner = forwardRef<
                         : undefined
                     }
                     onSlashCommand={onSlashCommand}
+                    onBeforeSubmit={ensureAgentEngineReadyForSubmit}
                     execMode={execMode}
                     onExecModeChange={onExecModeChange}
                     planModeDisabled={planModeDisabled}

package/corpus/core/src/client/MultiTabAssistantChat.tsx

@@ -1625,7 +1625,7 @@ export function MultiTabAssistantChat({
               return next;
             });
             if (shouldRefreshThreads) {
-              void refreshThreads();
+              refreshThreads();
             }
           }
         }

package/corpus/core/src/client/agent-chat.ts

@@ -73,6 +73,12 @@ export interface AgentChatMessage {
   requestMode?: AgentChatRequestMode;
   /** Scoped system prompt additions for this sub-agent */
   instructions?: string;
+  /**
+   * Message delivery target. Auto-submitted MCP App messages normally relay to
+   * the host chat; use "local" when a control explicitly targets this app's
+   * own AgentSidebar.
+   */
+  chatTarget?: "auto" | "local";
   /**
    * Whether to open the agent sidebar if it's currently hidden.
    * Defaults to true — submitting a chat should make the response visible.
@@ -527,7 +533,19 @@ function postAgentChatContextMessage(
 ): void {
   if (typeof window === "undefined") return;
 
-  const payload = { type, data };
+  const shouldForwardOpenSidebar =
+    (type === AGENT_CHAT_SET_CONTEXT_MESSAGE_TYPE &&
+      options.openSidebar === false) ||
+    (type !== AGENT_CHAT_SET_CONTEXT_MESSAGE_TYPE &&
+      options.openSidebar === true);
+  const payloadData =
+    shouldForwardOpenSidebar && typeof data === "object" && data !== null
+      ? {
+          ...(data as Record<string, unknown>),
+          openSidebar: options.openSidebar,
+        }
+      : data;
+  const payload = { type, data: payloadData };
   const targetSelf = isInBuilderFrame() || isDirectMcpAppEmbedSession();
   const target = targetSelf
     ? window
@@ -728,6 +746,7 @@ function readStoredAgentChatRequestMode(): AgentChatRequestMode | undefined {
 export function sendToAgentChat(opts: AgentChatMessage): string {
   const tabId = opts.tabId ?? generateTabId();
   const isCodeRequest = opts.type === "code" || opts.requiresCode === true;
+  const localChatTarget = opts.chatTarget === "local";
   const requestMode =
     normalizeAgentChatRequestMode(opts.requestMode ?? opts.mode) ??
     readStoredAgentChatRequestMode();
@@ -752,7 +771,11 @@ export function sendToAgentChat(opts: AgentChatMessage): string {
     },
   };
 
-  if (opts.submit !== false && isMcpAppChatBridgeEnabled()) {
+  if (
+    opts.submit !== false &&
+    !localChatTarget &&
+    isMcpAppChatBridgeEnabled()
+  ) {
     const directHostMessage = sendMcpAppHostMessage({
       message: opts.message,
       context: opts.context,
@@ -783,7 +806,8 @@ export function sendToAgentChat(opts: AgentChatMessage): string {
   const shouldOpenSidebar = opts.openSidebar !== false && !opts.background;
 
   const targetSelf =
-    !isCodeRequest && (isInBuilderFrame() || isDirectMcpAppEmbedSession());
+    !isCodeRequest &&
+    (localChatTarget || isInBuilderFrame() || isDirectMcpAppEmbedSession());
   const target = targetSelf
     ? window
     : window.parent !== window

package/corpus/core/src/client/blocks/library/MermaidBlock.tsx

@@ -268,7 +268,7 @@ function MermaidDiagram({
         onClick={() => setExpanded(true)}
         aria-label={copy.expandDiagram}
         title={copy.expandDiagram}
-        className="an-diagram-expand-trigger absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/mermaid:opacity-100"
+        className="an-diagram-expand-trigger absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/mermaid:opacity-100"
       >
         <IconArrowsMaximize className="size-4" />
       </button>

package/corpus/core/src/client/blocks/library/diagram.tsx

@@ -650,7 +650,7 @@ function ExpandableDiagramBody({
                   onClick={() => toggleWireframeStyle()}
                   aria-label={styleLabel}
                   aria-pressed={sketchy}
-                  className="an-diagram-style-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
+                  className="an-diagram-style-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
                 >
                   {sketchy ? (
                     <IconScribble className="size-4" />
@@ -669,7 +669,7 @@ function ExpandableDiagramBody({
                 data-plan-interactive
                 onClick={() => setExpanded(true)}
                 aria-label={copy.expandDiagram}
-                className="an-diagram-expand-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
+                className="an-diagram-expand-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
               >
                 <IconArrowsMaximize className="size-4" />
               </button>

package/corpus/core/src/client/blocks/library/wireframe.tsx

@@ -313,7 +313,7 @@ function WireframeStyleToggleButton() {
         event.stopPropagation();
         toggleWireframeStyle();
       }}
-      className="absolute right-2 top-2 z-30 inline-flex h-7 items-center gap-1 rounded-md border border-border/60 bg-background/90 px-2 text-xs font-medium text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/wireframe-artboard:opacity-100"
+      className="absolute right-2 top-2 z-30 inline-flex h-7 items-center gap-1 rounded-md border border-border/60 bg-background px-2 text-xs font-medium text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/wireframe-artboard:opacity-100"
     >
       <IconPencil className="size-3.5" aria-hidden="true" />
       <span>{label}</span>

package/corpus/core/src/client/chat/message-components.tsx

@@ -950,7 +950,7 @@ export function RunningActivityStatus({ label }: { label: string }) {
 }
 
 export function ThinkingIndicator({
-  label = "thinking",
+  label = "Thinking",
 }: { label?: string } = {}) {
   return (
     <div

package/corpus/core/src/client/chat-model-groups.ts

@@ -140,8 +140,7 @@ export function buildChatModelGroups({
         ),
         configured:
           requiredEnvVars.length === 0 ||
-          requiredEnvVars.some((key) => configured.has(key)) ||
-          engine.name === currentEngineName,
+          requiredEnvVars.some((key) => configured.has(key)),
       };
     })
     .filter((group) => group.models.length > 0);

package/corpus/core/src/client/components/LiveCursorOverlay.tsx

@@ -7,13 +7,11 @@
  * correctly. Pass a `mapCoords` prop to handle non-identity transforms
  * (e.g. a zoomed canvas).
  *
- * The agent's cursor is styled distinctly with a sparkle variant + "AI"
- * label, consistent with AgentPresenceChip.
+ * The agent uses the same pointer shape with an "AI" label.
  *
  * Cursors fade out after 10 seconds of no movement.
  */
 
-import { IconSparkles } from "@tabler/icons-react";
 import { useState, useEffect, useRef, memo } from "react";
 
 import type { OtherPresence, NormalizedPoint } from "../../collab/presence.js";
@@ -48,50 +46,28 @@ export interface LiveCursorOverlayProps {
 
 const STALE_MS = 10_000; // Fade out cursors older than 10s
 
-const CURSOR_SVG = `
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="22" viewBox="0 0 16 22" fill="none">
-    <path d="M0 0L0 18L4.5 13.5L7.5 20L9.5 19.5L6.5 13L12 13L0 0Z" fill="__COLOR__" stroke="white" stroke-width="1"/>
-  </svg>
-`.trim();
-
-function CursorPointer({
-  color,
-  isAgent,
-}: {
-  color: string;
-  isAgent: boolean;
-}) {
-  if (isAgent) {
-    return (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: 22,
-          height: 22,
-          borderRadius: "50%",
-          backgroundColor: color,
-          color: "#fff",
-          boxShadow: `0 0 0 2px #fff`,
-        }}
-      >
-        <IconSparkles size={12} stroke={2} />
-      </div>
-    );
-  }
-
-  const svgSrc =
-    "data:image/svg+xml;charset=utf-8," +
-    encodeURIComponent(CURSOR_SVG.replace("__COLOR__", color));
-
+function CursorPointer({ color }: { color: string }) {
   return (
-    <img
-      src={svgSrc}
-      alt=""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="29"
+      viewBox="0 0 25 29"
+      fill="none"
       aria-hidden
-      style={{ width: 16, height: 22, display: "block", flexShrink: 0 }}
-    />
+      style={{
+        display: "block",
+        filter: "drop-shadow(0 2px 3px rgba(15, 23, 42, 0.3))",
+      }}
+    >
+      <path
+        d="M2.5 2.5L21.5 11L12.6 14.1L8.3 24.5L2.5 2.5Z"
+        fill={color}
+        stroke="white"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
   );
 }
 
@@ -123,39 +99,30 @@ const CursorLabel = memo(function CursorLabel({
         transform: "translate(-2px, -2px)",
         zIndex: 9999,
         transition: "left 120ms linear, top 120ms linear",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        gap: 2,
+        width: 0,
+        height: 0,
       }}
     >
-      <CursorPointer color={color} isAgent={other.isAgent} />
+      <CursorPointer color={color} />
       <div
         style={{
+          position: "absolute",
+          left: 31,
+          top: 31,
           backgroundColor: color,
           color: "#fff",
-          fontSize: 11,
-          fontWeight: 600,
-          padding: "1px 5px",
-          borderRadius: 4,
+          fontSize: 12,
+          fontWeight: 500,
+          lineHeight: "16px",
+          padding: "2px 7px",
+          borderRadius: 2,
           whiteSpace: "nowrap",
-          marginLeft: other.isAgent ? 0 : 4,
-          boxShadow: "0 1px 3px rgba(0,0,0,0.25)",
+          boxShadow: "0 5px 12px rgba(15, 23, 42, 0.16)",
           maxWidth: 120,
           overflow: "hidden",
           textOverflow: "ellipsis",
-          display: "flex",
-          alignItems: "center",
-          gap: 3,
         }}
       >
-        {other.isAgent && (
-          <IconSparkles
-            size={9}
-            stroke={2}
-            style={{ flexShrink: 0, opacity: 0.85 }}
-          />
-        )}
         {label}
       </div>
     </div>