@invergent/agent-chat-react 1.10.0 → 2.0.0

package/dist/index.js

@@ -44,13 +44,13 @@ var buttonVariants = cva(
         link: "text-primary underline underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        default: "h-11 md:h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
         xs: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        sm: "h-11 md:h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
         lg: "h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
-        icon: "size-10",
+        icon: "size-11 md:size-10",
         "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-9",
+        "icon-sm": "size-11 md:size-9",
         "icon-lg": "size-11"
       }
     },
@@ -483,7 +483,7 @@ function BrowserPane({ sessionId, state, adapter }) {
       DialogContent,
       {
         "aria-describedby": void 0,
-        className: "flex h-screen w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-none ring-0 sm:max-w-none",
+        className: "flex h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-none ring-0 sm:max-w-none",
         children: [
           /* @__PURE__ */ jsxs(DialogHeader, { className: "h-10 shrink-0 flex-row items-center gap-2 border-b border-line bg-card px-4 py-0", children: [
             /* @__PURE__ */ jsx(ZapIcon, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }),
@@ -3478,7 +3478,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        "h-11 md:h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
         className
       ),
       ...props
@@ -4308,7 +4308,7 @@ function InputGroup({ className, ...props }) {
       "data-slot": "input-group",
       role: "group",
       className: cn(
-        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "group/input-group relative flex h-11 md:h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
         className
       ),
       ...props
@@ -7322,7 +7322,7 @@ function ChatThread({
       ] }) }),
       /* @__PURE__ */ jsx(ConversationScrollButton, {})
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-6 pb-5 pt-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-3 sm:px-6 pb-3 sm:pb-5 pt-3", children: [
       retryIndicator && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
       disabled && disabledReason ? /* @__PURE__ */ jsx(
         "div",
@@ -7978,7 +7978,7 @@ function RenderEntries({
       /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
       /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.name }),
       entry.size != null && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0 text-xs text-muted-foreground/60", children: formatFileSize(entry.size) }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-1 flex shrink-0 items-center gap-0 opacity-0 transition-opacity group-hover:opacity-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ml-1 flex shrink-0 items-center gap-0 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100", children: [
         /* @__PURE__ */ jsx(
           "a",
           {
@@ -9503,6 +9503,9 @@ function parseGoalDefinition(content) {
   const rubric = match ? args.slice(match.index + match[0].length).trim() : "";
   return rubric ? { description, rubric } : { description };
 }
+var RIGHT_STACK_STYLE = {
+  ["--right-stack-w"]: "440px"
+};
 function AgentChat({
   adapter,
   agentId,
@@ -9514,6 +9517,7 @@ function AgentChat({
   onComposerError
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
+  const [mobileView, setMobileView] = useState("chat");
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -9531,10 +9535,12 @@ function AgentChat({
   const handleFileSelect = useCallback(
     (path) => {
       setWorkspacePath(path);
+      setMobileView("workspace");
       onFileSelect?.(path);
     },
     [onFileSelect]
   );
+  const showMobileToggle = Boolean(sessionId);
   return /* @__PURE__ */ jsx(
     AgentChatAdapterProvider,
     {
@@ -9547,15 +9553,56 @@ function AgentChat({
         "section",
         {
           "data-testid": "agent-chat-layout",
-          className: hasBrowserPanel ? "relative min-h-0 flex-1 overflow-hidden bg-background text-sm text-foreground" : "flex min-h-0 flex-1 overflow-hidden bg-background text-sm text-foreground",
-          style: { direction: "ltr" },
+          "data-mobile-view": mobileView,
+          className: cn(
+            // Phone: flex column, tab toggle on top, then either chat or
+            // right stack visible based on `data-mobile-view`.
+            "flex min-h-0 flex-1 flex-col overflow-hidden bg-background text-sm text-foreground",
+            // md+: restore desktop two-pane layout.
+            hasBrowserPanel ? "md:relative md:flex-row" : "md:flex-row"
+          ),
+          style: { direction: "ltr", ...RIGHT_STACK_STYLE },
           children: [
+            showMobileToggle && /* @__PURE__ */ jsxs("div", { className: "md:hidden flex shrink-0 border-b border-line bg-card", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMobileView("chat"),
+                  "aria-pressed": mobileView === "chat",
+                  className: cn(
+                    "flex-1 px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors",
+                    mobileView === "chat" ? "border-primary text-foreground" : "border-transparent text-subtle hover:text-foreground"
+                  ),
+                  children: "Chat"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMobileView("workspace"),
+                  "aria-pressed": mobileView === "workspace",
+                  className: cn(
+                    "flex-1 px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors",
+                    mobileView === "workspace" ? "border-primary text-foreground" : "border-transparent text-subtle hover:text-foreground"
+                  ),
+                  children: "Workspace"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 "data-testid": "chat-panel",
-                className: hasBrowserPanel ? "absolute inset-y-0 left-0 flex min-h-0 min-w-0 flex-col overflow-hidden" : "flex min-w-0 flex-1 flex-col overflow-hidden",
-                style: hasBrowserPanel ? { right: 440 } : void 0,
+                "data-mobile-view": mobileView,
+                className: cn(
+                  // Phone: full width column, hidden when workspace tab active.
+                  "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+                  showMobileToggle && "data-[mobile-view=workspace]:hidden md:flex!",
+                  // md+: restore desktop positioning.
+                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
+                ),
                 children: /* @__PURE__ */ jsx(
                   ChatThread,
                   {
@@ -9580,8 +9627,16 @@ function AgentChat({
               "div",
               {
                 "data-testid": "right-stack",
-                className: hasBrowserPanel ? "absolute inset-y-0 flex min-h-0 flex-col overflow-hidden" : "flex min-h-0 shrink-0 flex-col",
-                style: hasBrowserPanel ? { right: 0, width: 440 } : void 0,
+                "data-mobile-view": mobileView,
+                className: cn(
+                  // Phone: full width column, hidden when chat tab active.
+                  "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+                  showMobileToggle && "data-[mobile-view=chat]:hidden md:flex!",
+                  // md+: restore desktop positioning. With browser panel the
+                  // right stack is absolutely positioned at the configured
+                  // width; without it the stack flows in the row.
+                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-(--right-stack-w,440px)"
+                ),
                 children: [
                   hasBrowserPanel && /* @__PURE__ */ jsx(
                     "div",
@@ -10564,16 +10619,16 @@ function MissionDashboard({
     }
   };
   const statusVariant = mission.status === "satisfied" ? "default" : mission.status === "failed" || mission.status === "cancelled" ? "destructive" : "secondary";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-6 max-w-6xl mx-auto", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6 max-w-6xl mx-auto", children: [
     /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1 min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(CardTitle, { className: "wrap-break-word -uppercase text-sm", children: mission.description }),
           /* @__PURE__ */ jsxs(CardDescription, { className: "wrap-break-word text-foreground/70", children: [
             "Rubric: ",
             mission.rubric
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-2 text-xs text-foreground/70", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pt-2 text-xs text-foreground/70", children: [
             /* @__PURE__ */ jsx(Badge, { variant: statusVariant, className: "font-mono text-foreground", children: mission.status }),
             /* @__PURE__ */ jsxs("span", { className: "font-mono text-primary", children: [
               "Iteration ",
@@ -10588,7 +10643,7 @@ function MissionDashboard({
             ] }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: ACTIVE_MISSION_STATUSES.has(mission.status) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: ACTIVE_MISSION_STATUSES.has(mission.status) ? /* @__PURE__ */ jsxs(Fragment, { children: [
           mission.status === "active" ? /* @__PURE__ */ jsxs(
             Button,
             {
@@ -10708,7 +10763,7 @@ function MissionDashboard({
         return /* @__PURE__ */ jsxs(
           "li",
           {
-            className: "flex items-start justify-between gap-3 rounded border border-border/40 px-3 py-2 text-sm",
+            className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between rounded border border-border/40 px-3 py-2 text-sm",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -10866,7 +10921,8 @@ function MissionRow({
     "div",
     {
       className: cn(
-        "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors cursor-pointer hover:border-l-primary hover:bg-input"
+        "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors cursor-pointer hover:border-l-primary hover:bg-input",
+        "min-h-11 md:min-h-0"
       ),
       onClick: openMission,
       onKeyDown: handleRowKeyDown,
@@ -10893,7 +10949,7 @@ function MissionRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onPause(mission.id);
@@ -10908,7 +10964,7 @@ function MissionRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onResume(mission.id);
@@ -10923,7 +10979,7 @@ function MissionRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onCancel(mission.id);
@@ -11200,6 +11256,7 @@ function ScheduledWorkRow({
     {
       className: cn(
         "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors hover:border-l-primary hover:bg-input",
+        "min-h-11 md:min-h-0",
         lastSessionId && "cursor-pointer"
       ),
       onClick: openLastRun,
@@ -11226,7 +11283,7 @@ function ScheduledWorkRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onRunNow(item.id);
@@ -11241,7 +11298,7 @@ function ScheduledWorkRow({
             "button",
             {
               type: "button",
-              className: "rounded p-1 text-faint opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 group-hover:opacity-100",
+              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
               onClick: (e) => {
                 stopActionClick(e);
                 onCancel(item.id);
@@ -11547,6 +11604,7 @@ function TreeNodeRow({
         },
         className: cn(
           "group flex items-center gap-2 w-full py-2 pr-2 text-left cursor-pointer transition-colors border-l-2",
+          "min-h-11 md:min-h-0",
           isActive ? "bg-line text-foreground border-l-primary" : "bg-transparent text-subtle hover:bg-input hover:text-foreground border-l-transparent"
         ),
         style: { paddingLeft: `${depth * 12 + 12}px` },
@@ -11555,7 +11613,7 @@ function TreeNodeRow({
             "button",
             {
               type: "button",
-              className: "p-0.5 rounded hover:bg-line shrink-0",
+              className: "p-2 md:p-0.5 rounded hover:bg-line shrink-0",
               onClick: (e) => {
                 e.stopPropagation();
                 setExpanded(!expanded);
@@ -11573,7 +11631,7 @@ function TreeNodeRow({
             "button",
             {
               type: "button",
-              className: "p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive transition-all",
+              className: "p-2 md:p-1 rounded opacity-100 md:opacity-0 md:group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive transition-all",
               onClick: (e) => {
                 e.stopPropagation();
                 onStop(entry.id);
@@ -11588,8 +11646,8 @@ function TreeNodeRow({
             {
               type: "button",
               className: cn(
-                "p-1 rounded hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none transition-all",
-                deletingSessionId === entry.id ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+                "p-2 md:p-1 rounded hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none transition-all",
+                deletingSessionId === entry.id ? "opacity-100" : "opacity-100 md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
               ),
               onClick: (e) => {
                 e.stopPropagation();