@page-speed/agent-everywhere 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -7222,6 +7222,7 @@ function useSemanticBuilder({
   onGeneratedBlocks,
   onUndoRequest,
   buildWelcomeMessage,
+  seedWelcomeMessage = true,
   webSocketImpl
 }) {
   const [messages, setMessages] = React4.useState([]);
@@ -7255,6 +7256,7 @@ function useSemanticBuilder({
     resolveSocketUrlRef.current = resolveSocketUrl;
   }, [resolveSocketUrl]);
   React4.useEffect(() => {
+    if (!seedWelcomeMessage) return;
     const hasContentBrief = !!contentBrief;
     const content = buildWelcomeMessage?.({ pageName, hasContentBrief }) ?? (hasContentBrief ? `Connected to ${pageName}. The page brief is loaded and ready. Describe the page you want and I'll stream back layout guidance and design reasoning.` : `Connected to ${pageName}. There is no saved content brief yet, so I'll work from the current page structure and brand context.`);
     setMessages([
@@ -7265,7 +7267,7 @@ function useSemanticBuilder({
         createdAt: Date.now()
       }
     ]);
-  }, [contentBrief, pageName, pageSlug]);
+  }, [contentBrief, pageName, pageSlug, seedWelcomeMessage]);
   const handleEnvelope = React4.useCallback((envelope) => {
     switch (envelope.type) {
       case "connection_ready":
@@ -7477,6 +7479,14 @@ function useSemanticBuilder({
   const retry = React4.useCallback(() => {
     clientRef.current?.retry();
   }, []);
+  const reset = React4.useCallback(() => {
+    pendingHiddenRequestsRef.current = 0;
+    hiddenAssistantMessageIdsRef.current.clear();
+    clientRef.current?.close();
+    setConnectionState("idle");
+    setConnectionError(null);
+    setMessages([]);
+  }, []);
   const isConnected = connectionState === "ready" || connectionState === "streaming";
   const isStreaming = connectionState === "streaming";
   const statusLabel = React4.useMemo(() => {
@@ -7503,7 +7513,8 @@ function useSemanticBuilder({
     isConnected,
     isStreaming,
     sendMessage,
-    retry
+    retry,
+    reset
   };
 }
 var ScrollArea = React4__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8007,6 +8018,54 @@ function FullBleedSurface({
     }
   );
 }
+function NativeSurface({
+  children,
+  input,
+  title,
+  subtitle,
+  icon,
+  headerActions,
+  suggestions,
+  footer,
+  isLoading = false,
+  autoScroll = true,
+  className,
+  contentClassName
+}) {
+  const scrollRef = React4.useRef(null);
+  React4.useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [children, isLoading, autoScroll]);
+  const showHeader = !!title || !!headerActions || !!icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        icon,
+        (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: subtitle })
+        ] })
+      ] }),
+      headerActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: headerActions })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: cn("min-h-0 flex-1 overflow-y-auto", contentClassName),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+          children,
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator, {})
+        ] })
+      }
+    ),
+    suggestions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-4 py-2", children: suggestions }),
+    input,
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-4 py-1.5", children: footer })
+  ] });
+}
 function AgentSurface({
   mode,
   messages,
@@ -8130,6 +8189,21 @@ function AgentSurface({
           children: conversation
         }
       );
+    case "native":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        NativeSurface,
+        {
+          title,
+          subtitle,
+          icon,
+          headerActions,
+          input: resolvedInput,
+          suggestions,
+          isLoading,
+          className,
+          children: conversation
+        }
+      );
     case "panel":
     default:
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8148,11 +8222,777 @@ function AgentSurface({
       );
   }
 }
+var NativeAgentContext = React4.createContext(
+  null
+);
+function useNativeAgent() {
+  const ctx = React4.useContext(NativeAgentContext);
+  if (!ctx) {
+    throw new Error(
+      "useNativeAgent must be used within a <NativeAgentProvider>."
+    );
+  }
+  return ctx;
+}
+function useNativeAgentOptional() {
+  return React4.useContext(NativeAgentContext);
+}
+var EMPTY_BLOCKS = [];
+var REASONING_STATUS = {
+  active: "active",
+  complete: "complete"
+};
+function toAgentMessage(message) {
+  const reasoning = message.thinking ? [
+    {
+      id: `${message.id}__thinking`,
+      label: "Thinking",
+      content: message.thinking,
+      status: message.streaming ? REASONING_STATUS.active : REASONING_STATUS.complete
+    }
+  ] : void 0;
+  return {
+    id: message.id,
+    role: message.role,
+    content: message.content,
+    timestamp: new Date(message.createdAt),
+    reasoning
+  };
+}
+function deriveStatus(connectionState) {
+  switch (connectionState) {
+    case "streaming":
+      return "busy";
+    case "ready":
+      return "online";
+    case "connecting":
+      return "away";
+    default:
+      return "offline";
+  }
+}
+function NativeAgentProvider({
+  children,
+  socketUrl,
+  resolveSocketUrl,
+  websiteId,
+  pageCategoryId,
+  pageName = "",
+  pageSlug,
+  blocks,
+  contentBrief,
+  onGeneratedBlocks,
+  webSocketImpl,
+  connectionStrategy = "lazy",
+  seedWelcomeMessage = false,
+  onError,
+  onActivate
+}) {
+  const [enabled, setEnabled] = React4.useState(connectionStrategy === "eager");
+  const [isActive, setIsActive] = React4.useState(false);
+  const [input, setInput] = React4.useState("");
+  const [pendingCount, setPendingCount] = React4.useState(0);
+  const [optimistic, setOptimistic] = React4.useState([]);
+  const blocksValue = blocks ?? EMPTY_BLOCKS;
+  const {
+    messages: builderMessages,
+    connectionState,
+    connectionError,
+    statusLabel,
+    isConnected,
+    isStreaming,
+    sendMessage,
+    retry,
+    reset: resetSession
+  } = useSemanticBuilder({
+    socketUrl,
+    resolveSocketUrl,
+    websiteId,
+    pageCategoryId,
+    pageName,
+    pageSlug,
+    blocks: blocksValue,
+    contentBrief,
+    enabled,
+    onGeneratedBlocks,
+    webSocketImpl,
+    seedWelcomeMessage
+  });
+  const pendingPromptsRef = React4.useRef([]);
+  const optimisticSeqRef = React4.useRef(0);
+  const onActivateRef = React4.useRef(onActivate);
+  const onErrorRef = React4.useRef(onError);
+  React4.useEffect(() => {
+    onActivateRef.current = onActivate;
+  }, [onActivate]);
+  React4.useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  React4.useEffect(() => {
+    if (connectionError) onErrorRef.current?.(connectionError);
+  }, [connectionError]);
+  const markActive = React4.useCallback(() => {
+    setIsActive((prev) => {
+      if (!prev) onActivateRef.current?.();
+      return true;
+    });
+  }, []);
+  React4.useEffect(() => {
+    if (connectionState !== "ready" || pendingPromptsRef.current.length === 0) {
+      return;
+    }
+    const next = pendingPromptsRef.current.shift();
+    if (next === void 0) return;
+    setPendingCount(pendingPromptsRef.current.length);
+    setOptimistic((prev) => prev.slice(1));
+    void sendMessage(next).then((ok) => {
+      if (!ok) {
+        pendingPromptsRef.current.unshift(next);
+        setPendingCount(pendingPromptsRef.current.length);
+      }
+    });
+  }, [connectionState, pendingCount, sendMessage]);
+  const submit = React4.useCallback(
+    (content) => {
+      const text = (content ?? input).trim();
+      if (!text) return;
+      markActive();
+      setEnabled(true);
+      setInput("");
+      pendingPromptsRef.current.push(text);
+      setPendingCount(pendingPromptsRef.current.length);
+      const id = `native-pending-${optimisticSeqRef.current}`;
+      optimisticSeqRef.current += 1;
+      setOptimistic((prev) => [
+        ...prev,
+        { id, role: "user", content: text, timestamp: /* @__PURE__ */ new Date() }
+      ]);
+    },
+    [input, markActive]
+  );
+  const activate = React4.useCallback(() => {
+    markActive();
+    setEnabled(true);
+  }, [markActive]);
+  const reset = React4.useCallback(() => {
+    pendingPromptsRef.current = [];
+    setPendingCount(0);
+    setOptimistic([]);
+    setIsActive(false);
+    setInput("");
+    setEnabled(false);
+    resetSession();
+  }, [resetSession]);
+  const messages = React4.useMemo(
+    () => [...builderMessages.map(toAgentMessage), ...optimistic],
+    [builderMessages, optimistic]
+  );
+  const isResponding = isStreaming || pendingCount > 0 && !connectionError && connectionState !== "error" && connectionState !== "requires_shared_domain";
+  const status = deriveStatus(connectionState);
+  const value = React4.useMemo(
+    () => ({
+      messages,
+      isActive,
+      isConnected,
+      isResponding,
+      isStreaming,
+      connectionState,
+      statusLabel,
+      status,
+      error: connectionError,
+      input,
+      setInput,
+      submit,
+      activate,
+      reset,
+      retry
+    }),
+    [
+      messages,
+      isActive,
+      isConnected,
+      isResponding,
+      isStreaming,
+      connectionState,
+      statusLabel,
+      status,
+      connectionError,
+      input,
+      submit,
+      activate,
+      reset,
+      retry
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(NativeAgentContext.Provider, { value, children });
+}
+var noop = () => {
+};
+function warnDev(message) {
+  const env = globalThis.process?.env;
+  if (env && env.NODE_ENV !== "production") {
+    console.warn(`[AgentComposer] ${message}`);
+  }
+}
+function AgentComposer({
+  value: valueProp,
+  onChange,
+  onSubmit,
+  loading: loadingProp,
+  disabled: disabledProp,
+  placeholder = "Ask anything\u2026",
+  variant = "default",
+  bare = false,
+  suggestions,
+  footer,
+  leftActions,
+  rightActions,
+  autoFocus = false,
+  className,
+  inputClassName
+}) {
+  const ctx = useNativeAgentOptional();
+  const [draft, setDraft] = React4.useState("");
+  const propsControlEditing = valueProp !== void 0 || onChange !== void 0;
+  const value = propsControlEditing ? valueProp ?? "" : ctx ? ctx.input : draft;
+  const handleChange = propsControlEditing ? onChange ?? noop : ctx ? ctx.setInput : setDraft;
+  const loading = loadingProp ?? ctx?.isResponding ?? false;
+  const disabled = disabledProp ?? false;
+  const handleSubmit = React4.useCallback(() => {
+    if (onSubmit) {
+      onSubmit(value);
+      return;
+    }
+    if (!propsControlEditing && ctx) {
+      ctx.submit();
+      return;
+    }
+    warnDev(
+      "submit was ignored: provide `onSubmit`, or render inside a <NativeAgentProvider>."
+    );
+  }, [onSubmit, propsControlEditing, ctx, value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        !bare && "rounded-2xl border bg-background shadow-sm",
+        className
+      ),
+      children: [
+        suggestions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-3", bare ? "pb-2" : "pt-3"), children: suggestions }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PromptInput,
+          {
+            value,
+            onChange: handleChange,
+            onSubmit: handleSubmit,
+            placeholder,
+            loading,
+            disabled,
+            variant,
+            autoFocus,
+            leftActions,
+            rightActions,
+            inputClassName
+          }
+        ),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2 text-muted-foreground text-xs", children: footer })
+      ]
+    }
+  );
+}
+var EMPTY_MESSAGES = [];
+function AgentConversation({
+  messages: messagesProp,
+  isLoading: isLoadingProp,
+  header,
+  emptyState,
+  showAvatars = true,
+  renderMessage,
+  onFeedback,
+  onConfirmAction,
+  autoScroll = true,
+  className,
+  contentClassName
+}) {
+  const ctx = useNativeAgentOptional();
+  const messages = React4.useMemo(
+    () => messagesProp ?? ctx?.messages ?? EMPTY_MESSAGES,
+    [messagesProp, ctx?.messages]
+  );
+  const isLoading = isLoadingProp ?? ctx?.isResponding ?? false;
+  const scrollRef = React4.useRef(null);
+  React4.useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isLoading, autoScroll]);
+  const showEmptyState = messages.length === 0 && !isLoading && !!emptyState;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
+    header,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: cn("min-h-0 flex-1 overflow-y-auto", contentClassName),
+        children: showEmptyState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-6", children: emptyState }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MessageList,
+            {
+              messages,
+              showAvatars,
+              renderMessage,
+              onFeedback,
+              onConfirmAction
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator, {})
+        ] })
+      }
+    )
+  ] });
+}
+var AgentWorkspaceContext = React4.createContext(null);
+function useAgentWorkspace() {
+  const ctx = React4.useContext(AgentWorkspaceContext);
+  if (!ctx) {
+    throw new Error(
+      "useAgentWorkspace must be used within an <AgentWorkspace>."
+    );
+  }
+  return ctx;
+}
+function useAgentWorkspaceOptional() {
+  return React4.useContext(AgentWorkspaceContext);
+}
+var noop2 = () => {
+};
+function warnDev2(message) {
+  const env = globalThis.process?.env;
+  if (env && env.NODE_ENV !== "production") {
+    console.warn(`[AgentWorkspaceComposer] ${message}`);
+  }
+}
+var LINE_HEIGHT_PX2 = 20;
+var VERTICAL_PADDING_PX2 = 16;
+function AgentWorkspaceComposer({
+  value: valueProp,
+  onChange,
+  onSubmit,
+  loading: loadingProp,
+  disabled = false,
+  placeholder = "Ask anything\u2026",
+  onAttach,
+  leftActions,
+  minRows = 1,
+  maxRows = 6,
+  autoFocus = false,
+  className,
+  inputClassName
+}) {
+  const agent = useNativeAgentOptional();
+  const workspace = useAgentWorkspaceOptional();
+  const [draft, setDraft] = React4.useState("");
+  const textareaRef = React4.useRef(null);
+  const propsControlEditing = valueProp !== void 0 || onChange !== void 0;
+  const value = propsControlEditing ? valueProp ?? "" : agent ? agent.input : draft;
+  const handleChange = propsControlEditing ? onChange ?? noop2 : agent ? agent.setInput : setDraft;
+  const loading = loadingProp ?? agent?.isResponding ?? false;
+  const resize = React4.useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const maxHeight = maxRows * LINE_HEIGHT_PX2 + VERTICAL_PADDING_PX2;
+    const minHeight = minRows * LINE_HEIGHT_PX2 + VERTICAL_PADDING_PX2;
+    const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [maxRows, minRows]);
+  React4.useLayoutEffect(() => {
+    resize();
+  }, [value, resize]);
+  const handleSubmit = React4.useCallback(
+    (e) => {
+      e?.preventDefault();
+      if (!value.trim() || disabled || loading) return;
+      workspace?.openConversation();
+      if (onSubmit) {
+        onSubmit(value);
+        return;
+      }
+      if (!propsControlEditing && agent) {
+        agent.submit();
+        return;
+      }
+      warnDev2(
+        "submit was ignored: provide `onSubmit`, or render inside a <NativeAgentProvider>."
+      );
+    },
+    [value, disabled, loading, workspace, onSubmit, propsControlEditing, agent]
+  );
+  const handleKeyDown = React4.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const attach = leftActions ?? (onAttach ? /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onAttach,
+      "aria-label": "Attach",
+      className: "flex size-9 shrink-0 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { className: "size-4" })
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn(
+        "flex items-end gap-2 rounded-2xl border border-border bg-background p-2 shadow-sm transition-colors focus-within:border-foreground/30",
+        className
+      ),
+      children: [
+        attach,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value,
+            onChange: (e) => handleChange(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            disabled,
+            autoFocus,
+            rows: minRows,
+            className: cn(
+              "flex-1 resize-none border-0 bg-transparent px-1 py-2 text-sm leading-5 shadow-none outline-none",
+              "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              inputClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            "aria-label": "Send",
+            disabled: !value.trim() || disabled || loading,
+            className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-opacity disabled:opacity-30",
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function AgentWorkspacePanelToggle({
+  side,
+  open: openProp,
+  onToggle,
+  className
+}) {
+  const workspace = useAgentWorkspaceOptional();
+  const propsControlled = openProp !== void 0 || onToggle !== void 0;
+  if (!propsControlled && workspace) {
+    const hasPanel = side === "left" ? workspace.hasLeftPanel : workspace.hasRightPanel;
+    if (!hasPanel) return null;
+  }
+  const open = propsControlled ? openProp ?? false : side === "left" ? workspace?.leftPanelOpen ?? false : workspace?.rightPanelOpen ?? false;
+  const handleToggle = propsControlled ? onToggle : side === "left" ? workspace?.toggleLeftPanel : workspace?.toggleRightPanel;
+  const Icon = side === "left" ? lucideReact.PanelLeft : lucideReact.PanelRight;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleToggle,
+      "aria-label": side === "left" ? "Toggle left panel" : "Toggle right panel",
+      "aria-pressed": open,
+      className: cn(
+        "flex size-8 items-center justify-center rounded-lg transition-colors",
+        open ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" })
+    }
+  );
+}
+var inertProps = (inert) => inert ? { inert: "" } : {};
+function useOpenState(controlled, defaultOpen, onChange) {
+  const [internal, setInternal] = React4.useState(defaultOpen);
+  const isControlled = controlled !== void 0;
+  const open = isControlled ? controlled : internal;
+  const onChangeRef = React4.useRef(onChange);
+  React4.useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  const setOpen = React4.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  return [open, setOpen];
+}
+function AgentWorkspace({
+  children,
+  leftPanel,
+  rightPanel,
+  leftPanelWidth = 320,
+  rightPanelWidth = 460,
+  defaultLeftPanelOpen = true,
+  defaultRightPanelOpen = true,
+  leftPanelOpen: leftPanelOpenProp,
+  rightPanelOpen: rightPanelOpenProp,
+  onLeftPanelOpenChange,
+  onRightPanelOpenChange,
+  showPanelToggles = true,
+  conversation,
+  conversationOpen: conversationOpenProp,
+  onConversationOpenChange,
+  conversationTitle = "AI Assistant",
+  showConversationHeader = true,
+  composer = true,
+  composerPlaceholder,
+  composerHint,
+  onComposerSubmit,
+  className,
+  contentClassName,
+  conversationClassName,
+  leftPanelClassName,
+  rightPanelClassName,
+  composerClassName
+}) {
+  const agent = useNativeAgentOptional();
+  const hasLeftPanel = leftPanel !== void 0 && leftPanel !== null;
+  const hasRightPanel = rightPanel !== void 0 && rightPanel !== null;
+  const [leftOpen, setLeftOpen] = useOpenState(
+    leftPanelOpenProp,
+    defaultLeftPanelOpen,
+    onLeftPanelOpenChange
+  );
+  const [rightOpen, setRightOpen] = useOpenState(
+    rightPanelOpenProp,
+    defaultRightPanelOpen,
+    onRightPanelOpenChange
+  );
+  const [conversationOpen, setConversationOpen] = useOpenState(
+    conversationOpenProp,
+    false,
+    onConversationOpenChange
+  );
+  const isActive = agent?.isActive ?? false;
+  const wasActiveRef = React4.useRef(false);
+  React4.useEffect(() => {
+    if (isActive !== wasActiveRef.current) {
+      wasActiveRef.current = isActive;
+      setConversationOpen(isActive);
+    }
+  }, [isActive, setConversationOpen]);
+  const value = React4.useMemo(
+    () => ({
+      hasLeftPanel,
+      hasRightPanel,
+      leftPanelOpen: leftOpen,
+      rightPanelOpen: rightOpen,
+      setLeftPanelOpen: setLeftOpen,
+      setRightPanelOpen: setRightOpen,
+      toggleLeftPanel: () => setLeftOpen(!leftOpen),
+      toggleRightPanel: () => setRightOpen(!rightOpen),
+      conversationOpen,
+      setConversationOpen,
+      openConversation: () => setConversationOpen(true),
+      closeConversation: () => setConversationOpen(false)
+    }),
+    [
+      hasLeftPanel,
+      hasRightPanel,
+      leftOpen,
+      rightOpen,
+      setLeftOpen,
+      setRightOpen,
+      conversationOpen,
+      setConversationOpen
+    ]
+  );
+  const showDock = composer !== false;
+  const dockNode = composer === true || composer === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    AgentWorkspaceComposer,
+    {
+      placeholder: composerPlaceholder,
+      onSubmit: onComposerSubmit
+    }
+  ) : composer;
+  const statusLine = agent ? agent.error ?? agent.statusLabel : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspaceContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-conversation-open": conversationOpen || void 0,
+      className: cn(
+        "flex h-full w-full overflow-hidden bg-background text-foreground",
+        className
+      ),
+      children: [
+        hasLeftPanel && /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            "data-state": leftOpen ? "open" : "collapsed",
+            "aria-hidden": !leftOpen || void 0,
+            className: cn(
+              "relative hidden h-full shrink-0 overflow-hidden border-r border-border transition-[width] duration-300 ease-in-out lg:block",
+              !leftOpen && "border-r-0",
+              leftPanelClassName
+            ),
+            style: { width: leftOpen ? leftPanelWidth : 0 },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", style: { width: leftPanelWidth }, children: leftPanel })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full min-w-0 grow flex-col", children: [
+          showPanelToggles && hasLeftPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
+            AgentWorkspacePanelToggle,
+            {
+              side: "left",
+              className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
+            }
+          ) }),
+          showPanelToggles && hasRightPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-3 z-30 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
+            AgentWorkspacePanelToggle,
+            {
+              side: "right",
+              className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 grow", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": conversationOpen || void 0,
+                ...inertProps(conversationOpen),
+                className: cn("h-full overflow-y-auto", contentClassName),
+                children
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-state": conversationOpen ? "open" : "closed",
+                "aria-hidden": !conversationOpen || void 0,
+                ...inertProps(!conversationOpen),
+                className: cn(
+                  "absolute inset-0 z-20 flex flex-col bg-background transition-[opacity,transform] duration-300 ease-out",
+                  conversationOpen ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-8 opacity-0",
+                  conversationClassName
+                ),
+                children: [
+                  showConversationHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border bg-background px-4 py-2.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-3.5" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium", children: conversationTitle }),
+                        statusLine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      (hasLeftPanel || hasRightPanel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-1 hidden items-center gap-1 border-r border-border pr-2 lg:flex", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspacePanelToggle, { side: "left" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspacePanelToggle, { side: "right" })
+                      ] }),
+                      agent && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => agent.reset(),
+                          "aria-label": "Start a new conversation",
+                          title: "New conversation",
+                          className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setConversationOpen(false),
+                          "aria-label": "Hide conversation",
+                          title: "Hide conversation",
+                          className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 grow", children: conversation ?? /* @__PURE__ */ jsxRuntime.jsx(
+                    AgentConversation,
+                    {
+                      contentClassName: "mx-auto w-full max-w-3xl",
+                      showAvatars: true
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] }),
+          showDock && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "relative z-30 shrink-0 border-t border-border bg-background/80 px-4 py-3 backdrop-blur",
+                composerClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-3xl", children: [
+                isActive && !conversationOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setConversationOpen(true),
+                    className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:border-foreground/20 hover:text-foreground",
+                    children: [
+                      agent?.isResponding ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "size-3" }),
+                      "View conversation"
+                    ]
+                  }
+                ) }),
+                dockNode,
+                composerHint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-center text-[11px] text-muted-foreground", children: composerHint })
+              ] })
+            }
+          )
+        ] }),
+        hasRightPanel && /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            "data-state": rightOpen ? "open" : "collapsed",
+            "aria-hidden": !rightOpen || void 0,
+            className: cn(
+              "relative hidden h-full shrink-0 overflow-hidden border-l border-border transition-[width] duration-300 ease-in-out lg:block",
+              !rightOpen && "border-l-0",
+              rightPanelClassName
+            ),
+            style: { width: rightOpen ? rightPanelWidth : 0 },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", style: { width: rightPanelWidth }, children: rightPanel })
+          }
+        )
+      ]
+    }
+  ) });
+}
 
 exports.AgentAvatar = AgentAvatar;
+exports.AgentComposer = AgentComposer;
+exports.AgentConversation = AgentConversation;
 exports.AgentHandoff = AgentHandoff;
 exports.AgentProvider = AgentProvider;
 exports.AgentSurface = AgentSurface;
+exports.AgentWorkspace = AgentWorkspace;
+exports.AgentWorkspaceComposer = AgentWorkspaceComposer;
+exports.AgentWorkspacePanelToggle = AgentWorkspacePanelToggle;
 exports.AllocationBreakdown = AllocationBreakdown;
 exports.AnalyticsDashboard = AnalyticsDashboard;
 exports.Avatar = Avatar;
@@ -8196,6 +9036,8 @@ exports.MessageWithSteps = MessageWithSteps;
 exports.MetricsGrid = MetricsGrid;
 exports.MobileShell = MobileShell;
 exports.MultimodalInput = MultimodalInput;
+exports.NativeAgentProvider = NativeAgentProvider;
+exports.NativeSurface = NativeSurface;
 exports.OnboardingWizard = OnboardingWizard;
 exports.OptionCards = OptionCards;
 exports.OverlayModal = OverlayModal;
@@ -8264,6 +9106,10 @@ exports.useAgentBackend = useAgentBackend;
 exports.useAgentInput = useAgentInput;
 exports.useAgentLayout = useAgentLayout;
 exports.useAgentMessages = useAgentMessages;
+exports.useAgentWorkspace = useAgentWorkspace;
+exports.useAgentWorkspaceOptional = useAgentWorkspaceOptional;
+exports.useNativeAgent = useNativeAgent;
+exports.useNativeAgentOptional = useNativeAgentOptional;
 exports.useSemanticBuilder = useSemanticBuilder;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map