thepopebot 1.2.76-beta.2 → 1.2.76-beta.21

package/lib/chat/components/code-mode-toggle.jsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { GitBranchIcon, ChevronDownIcon, SpinnerIcon, XIcon } from './icons.js';
+import { GitBranchIcon, ChevronDownIcon, SpinnerIcon, XIcon, PlusIcon } from './icons.js';
 import { Combobox } from './ui/combobox.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './ui/dropdown-menu.js';
 import { cn } from '../utils.js';
@@ -30,12 +30,14 @@ export function RepoBranchPicker({
   onBranchChange,
   getRepositories,
   getBranches,
+  createRepository,
 }) {
   const [repos, setRepos] = useState([]);
   const [branches, setBranches] = useState([]);
   const [loadingRepos, setLoadingRepos] = useState(false);
   const [loadingBranches, setLoadingBranches] = useState(false);
   const [reposLoaded, setReposLoaded] = useState(false);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
 
   // Load repos eagerly on mount
   useEffect(() => {
@@ -67,6 +69,11 @@ export function RepoBranchPicker({
     }).catch(() => setLoadingBranches(false));
   }, [repo]);
 
+  const handleRepoCreated = useCallback((fullName) => {
+    setRepos((prev) => [...prev, { full_name: fullName, default_branch: 'main' }]);
+    onRepoChange(fullName);
+  }, [onRepoChange]);
+
   const repoOptions = repos.map((r) => ({ value: r.full_name, label: r.full_name }));
   const branchOptions = branches.map((b) => ({ value: b.name, label: b.name }));
 
@@ -80,6 +87,11 @@ export function RepoBranchPicker({
           placeholder="Select repository..."
           loading={loadingRepos}
           highlight={!repo && !loadingRepos}
+          footerAction={createRepository ? {
+            icon: <PlusIcon size={14} />,
+            label: 'Create new repository...',
+            onClick: () => setShowCreateDialog(true),
+          } : undefined}
         />
       </div>
       <div className={cn("w-full sm:w-auto sm:min-w-[200px] sm:max-w-[200px]", !repo && "opacity-50 pointer-events-none")}>
@@ -92,10 +104,99 @@ export function RepoBranchPicker({
           highlight={!!repo && !branch && !loadingBranches}
         />
       </div>
+      {showCreateDialog && (
+        <CreateRepoDialog
+          onClose={() => setShowCreateDialog(false)}
+          onCreate={handleRepoCreated}
+          createRepository={createRepository}
+        />
+      )}
     </div>
   );
 }
 
+function CreateRepoDialog({ onClose, onCreate, createRepository }) {
+  const [name, setName] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, []);
+
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, [onClose]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const trimmed = name.trim();
+    if (!trimmed || creating) return;
+    setCreating(true);
+    setError(null);
+    try {
+      const repo = await createRepository(trimmed);
+      onCreate(repo.full_name);
+      onClose();
+    } catch (err) {
+      setError(err.message || 'Failed to create repository');
+      setCreating(false);
+    }
+  };
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div
+        className="relative z-50 w-full max-w-md mx-4 rounded-lg border border-border bg-background p-6 shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-base font-semibold">Create Repository</h3>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
+            <XIcon size={16} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <label className="block text-sm text-muted-foreground mb-1.5">Repository name</label>
+          <input
+            ref={inputRef}
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="my-project"
+            className="w-full rounded-md border border-border bg-muted px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
+          />
+          {error && <p className="text-xs text-destructive mt-2">{error}</p>}
+          <div className="mt-5 flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 py-1.5 text-sm border border-border text-muted-foreground hover:text-foreground rounded-md transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!name.trim() || creating}
+              className="px-3 py-1.5 text-sm font-medium bg-foreground text-background hover:bg-foreground/90 disabled:opacity-50 rounded-md transition-colors"
+            >
+              {creating ? 'Creating...' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
 /**
  * Workspace toolbar bar with branch info, diff stats, and command buttons.
  * Only rendered when a workspace exists (after first message creates one).
@@ -109,6 +210,7 @@ export function WorkspaceBar({
   diffStats,
   onDiffStatsRefresh,
   onShowDiff,
+  chatMode = 'agent',
 }) {
   const [branches, setBranches] = useState([]);
   const [loadingBranches, setLoadingBranches] = useState(false);
@@ -124,7 +226,7 @@ export function WorkspaceBar({
         {branch && (
           <>
             <span className="shrink-0 text-muted-foreground/30 hidden md:inline">/</span>
-            <div className="shrink-0 max-w-[120px]">
+            <div className="min-w-0">
               <Combobox
                 options={branches.map((b) => ({ value: b.name, label: b.name }))}
                 value={branch}
@@ -141,20 +243,20 @@ export function WorkspaceBar({
                     }).finally(() => setLoadingBranches(false));
                   }
                 }}
-                triggerClassName="font-medium text-foreground hover:text-primary hover:bg-accent transition-colors cursor-pointer truncate text-xs rounded px-1 -mx-1"
-                triggerLabel={<span className="truncate" title={branch}>{branch}</span>}
+                triggerClassName="inline-block max-w-[70px] md:max-w-[160px] text-left font-medium text-foreground hover:text-primary hover:bg-accent transition-colors cursor-pointer truncate text-xs rounded px-1 -mx-1 align-middle"
+                triggerLabel={<span title={branch}>{branch}</span>}
               />
             </div>
           </>
         )}
-        {featureBranch && (
+        {featureBranch && featureBranch !== branch && (
           <>
             <span className="shrink-0 text-muted-foreground/50">&larr;</span>
             <span className="text-primary truncate min-w-0 cursor-default" title={featureBranch}>{featureBranch}</span>
           </>
         )}
       </div>
-      {workspace?.id && <WorkspaceCommandButton workspaceId={workspace.id} diffStats={diffStats} onDiffStatsRefresh={onDiffStatsRefresh} onShowDiff={onShowDiff} />}
+      {workspace?.id && <WorkspaceCommandButton workspaceId={workspace.id} diffStats={diffStats} onDiffStatsRefresh={onDiffStatsRefresh} onShowDiff={onShowDiff} chatMode={chatMode} />}
     </div>
   );
 }
@@ -243,16 +345,33 @@ export function CommandOutputDialog({ title, logs, exitCode, running, onClose })
 }
 
 const STORAGE_KEY = 'thepopebot-workspace-command';
+const FALLBACK_BY_MODE = { agent: 'push', code: 'create-pr' };
 
-function WorkspaceCommandButton({ workspaceId, diffStats, onDiffStatsRefresh, onShowDiff }) {
+function WorkspaceCommandButton({ workspaceId, diffStats, onDiffStatsRefresh, onShowDiff, chatMode = 'agent' }) {
+  const storageKey = `${STORAGE_KEY}:${chatMode}`;
   const [selectedCommand, setSelectedCommandState] = useState(() => {
-    try { return localStorage.getItem(STORAGE_KEY) || 'create-pr'; } catch { return 'create-pr'; }
-
+    try { return localStorage.getItem(storageKey) || FALLBACK_BY_MODE[chatMode] || 'create-pr'; }
+    catch { return FALLBACK_BY_MODE[chatMode] || 'create-pr'; }
   });
   const setSelectedCommand = (cmd) => {
     setSelectedCommandState(cmd);
-    try { localStorage.setItem(STORAGE_KEY, cmd); } catch {}
+    try { localStorage.setItem(storageKey, cmd); } catch {}
   };
+
+  // If user hasn't picked anything for this mode yet, seed from admin default.
+  useEffect(() => {
+    let stored = null;
+    try { stored = localStorage.getItem(storageKey); } catch {}
+    if (stored) return;
+    let cancelled = false;
+    import('../actions.js').then(({ getModeGitActionDefault }) => {
+      getModeGitActionDefault(chatMode).then((val) => {
+        if (cancelled || !val) return;
+        setSelectedCommandState(val);
+      }).catch(() => {});
+    }).catch(() => {});
+    return () => { cancelled = true; };
+  }, [chatMode, storageKey]);
   const [commandRunning, setCommandRunning] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [commandLogs, setCommandLogs] = useState([]);
@@ -269,16 +388,6 @@ function WorkspaceCommandButton({ workspaceId, diffStats, onDiffStatsRefresh, on
   const handleRun = useCallback(async () => {
     if (commandRunning) return;
 
-    // Refresh diff stats and check for changes before running
-    const fresh = await onDiffStatsRefresh?.();
-    const stats = fresh || diffStats;
-    if (!(stats?.insertions || 0) && !(stats?.deletions || 0)) {
-      setDialogOpen(true);
-      setCommandLogs([{ stream: 'stderr', raw: 'You have no changes.', parsed: [{ type: 'text', text: 'You have no changes.' }] }]);
-      setCommandExitCode(1);
-      return;
-    }
-
     setCommandRunning(true);
     setDialogOpen(true);
     setCommandLogs([]);

package/lib/chat/components/containers-page.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 import { PageLayout } from "./page-layout.js";
-import { SpinnerIcon, RefreshIcon, StopIcon, PlayIcon, TrashIcon, XIcon } from "./icons.js";
+import { SpinnerIcon, RefreshIcon, StopIcon, PlayIcon, TrashIcon, XIcon, FileTextIcon } from "./icons.js";
 import { ConfirmDialog } from "./ui/confirm-dialog.js";
 import { CodeLogView } from "./code-log-view.js";
 import {
@@ -195,81 +195,99 @@ function ContainerRow({ container, onRequestStop, onShowLogs, isStopping, isStar
     /* @__PURE__ */ jsx("td", { className: "py-2.5 pr-3 text-xs text-right hidden md:table-cell whitespace-nowrap", children: isRunning && container.stats ? /* @__PURE__ */ jsx("span", { children: formatBytes(container.stats.memUsage) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }),
     /* @__PURE__ */ jsx("td", { className: "py-2.5 pr-3 text-xs text-muted-foreground hidden lg:table-cell whitespace-nowrap", children: container.status }),
     /* @__PURE__ */ jsx("td", { className: "py-2.5 text-right whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1.5", children: [
-      isRunning && (isStopping ? /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onShowLogs(container.name),
+          title: "Logs",
+          "aria-label": "Logs",
+          className: "inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx(FileTextIcon, { size: 14 })
+        }
+      ),
+      isRunning && (isStopping ? /* @__PURE__ */ jsx(
         "button",
         {
           disabled: true,
-          className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors",
-          children: [
-            /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }),
-            "Stopping..."
-          ]
+          title: "Stopping...",
+          "aria-label": "Stopping",
+          className: "inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors",
+          children: /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 })
         }
-      ) : /* @__PURE__ */ jsxs(
+      ) : /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => onRequestStop(container.name),
-          className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
-          children: [
-            /* @__PURE__ */ jsx(StopIcon, { size: 12 }),
-            "Stop"
-          ]
+          title: "Stop",
+          "aria-label": "Stop",
+          className: "inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx(StopIcon, { size: 14 })
         }
       )),
-      isStopped && (isStarting ? /* @__PURE__ */ jsxs(
+      isStopped && (isStarting ? /* @__PURE__ */ jsx(
         "button",
         {
           disabled: true,
-          className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors",
-          children: [
-            /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }),
-            "Starting..."
-          ]
+          title: "Starting...",
+          "aria-label": "Starting",
+          className: "inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors",
+          children: /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 })
         }
-      ) : /* @__PURE__ */ jsxs(
+      ) : /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => onRequestStop(container.name, "start"),
-          className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
-          children: [
-            /* @__PURE__ */ jsx(PlayIcon, { size: 12 }),
-            "Start"
-          ]
+          title: "Start",
+          "aria-label": "Start",
+          className: "inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx(PlayIcon, { size: 14 })
         }
       )),
       /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onShowLogs(container.name),
-          className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
-          children: "Logs"
-        }
-      ),
-      /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: () => handleAction("remove"),
           disabled: removingContainer,
-          className: `inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border transition-colors disabled:opacity-50 disabled:pointer-events-none ${confirmingRemove ? "border-destructive text-destructive hover:bg-destructive/10" : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"}`,
-          children: [
-            removingContainer ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(TrashIcon, { size: 12 }),
-            confirmingRemove ? "Confirm" : "Remove"
-          ]
+          title: confirmingRemove ? "Confirm remove" : "Remove",
+          "aria-label": confirmingRemove ? "Confirm remove" : "Remove",
+          className: `inline-flex items-center justify-center rounded-md p-1.5 border transition-colors disabled:opacity-50 disabled:pointer-events-none ${confirmingRemove ? "border-destructive text-destructive hover:bg-destructive/10" : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"}`,
+          children: removingContainer ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }) : /* @__PURE__ */ jsx(TrashIcon, { size: 14 })
         }
       )
     ] }) })
   ] });
 }
 function DockerContainersSection({ containers, loading, onRequestStop, onShowLogs, pendingStop, pendingStart }) {
+  const [activeTab, setActiveTab] = useState("running");
   if (loading) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-base font-medium", children: "Docker Containers" }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) })
     ] });
   }
+  const runningContainers = containers.filter((c) => c.state === "running");
+  const exitedContainers = containers.filter((c) => c.state !== "running");
+  const visibleContainers = activeTab === "running" ? runningContainers : exitedContainers;
+  const tabs = [
+    { id: "running", label: `Running (${runningContainers.length})` },
+    { id: "exited", label: `Exited (${exitedContainers.length})` }
+  ];
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-base font-medium", children: "Docker Containers" }),
-    containers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border p-8 text-center text-sm text-muted-foreground", children: "No containers found on the compose network." }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto scrollbar-hide max-w-full", children: tabs.map((tab) => {
+      const isActive = activeTab === tab.id;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveTab(tab.id),
+          className: `rounded-full px-3 py-1.5 min-h-[36px] inline-flex items-center text-xs font-medium transition-colors shrink-0 whitespace-nowrap ${isActive ? "bg-foreground text-background" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`,
+          children: tab.label
+        },
+        tab.id
+      );
+    }) }),
+    visibleContainers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border p-8 text-center text-sm text-muted-foreground", children: activeTab === "running" ? "No running containers." : "No exited containers." }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx("th", { className: "pb-2 pr-3 font-medium", children: "State" }),
         /* @__PURE__ */ jsx("th", { className: "pb-2 pr-3 font-medium", children: "Container" }),
@@ -278,7 +296,7 @@ function DockerContainersSection({ containers, loading, onRequestStop, onShowLog
         /* @__PURE__ */ jsx("th", { className: "pb-2 pr-3 font-medium hidden lg:table-cell", children: "Status" }),
         /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium text-right", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: containers.map((c) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("tbody", { children: visibleContainers.map((c) => /* @__PURE__ */ jsx(
         ContainerRow,
         {
           container: c,

package/lib/chat/components/containers-page.jsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { PageLayout } from './page-layout.js';
-import { SpinnerIcon, RefreshIcon, StopIcon, PlayIcon, TrashIcon, XIcon } from './icons.js';
+import { SpinnerIcon, RefreshIcon, StopIcon, PlayIcon, TrashIcon, XIcon, FileTextIcon } from './icons.js';
 import { ConfirmDialog } from './ui/confirm-dialog.js';
 import { CodeLogView } from './code-log-view.js';
 import {
@@ -263,22 +263,32 @@ function ContainerRow({ container, onRequestStop, onShowLogs, isStopping, isStar
       </td>
       <td className="py-2.5 text-right whitespace-nowrap">
         <div className="inline-flex items-center gap-1.5">
+          <button
+            onClick={() => onShowLogs(container.name)}
+            title="Logs"
+            aria-label="Logs"
+            className="inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+          >
+            <FileTextIcon size={14} />
+          </button>
           {isRunning && (
             isStopping ? (
               <button
                 disabled
-                className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors"
+                title="Stopping..."
+                aria-label="Stopping"
+                className="inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors"
               >
-                <SpinnerIcon size={12} />
-                Stopping...
+                <SpinnerIcon size={14} />
               </button>
             ) : (
               <button
                 onClick={() => onRequestStop(container.name)}
-                className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                title="Stop"
+                aria-label="Stop"
+                className="inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
               >
-                <StopIcon size={12} />
-                Stop
+                <StopIcon size={14} />
               </button>
             )
           )}
@@ -286,38 +296,35 @@ function ContainerRow({ container, onRequestStop, onShowLogs, isStopping, isStar
             isStarting ? (
               <button
                 disabled
-                className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors"
+                title="Starting..."
+                aria-label="Starting"
+                className="inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors"
               >
-                <SpinnerIcon size={12} />
-                Starting...
+                <SpinnerIcon size={14} />
               </button>
             ) : (
               <button
                 onClick={() => onRequestStop(container.name, 'start')}
-                className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                title="Start"
+                aria-label="Start"
+                className="inline-flex items-center justify-center rounded-md p-1.5 border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
               >
-                <PlayIcon size={12} />
-                Start
+                <PlayIcon size={14} />
               </button>
             )
           )}
-          <button
-            onClick={() => onShowLogs(container.name)}
-            className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-          >
-            Logs
-          </button>
           <button
             onClick={() => handleAction('remove')}
             disabled={removingContainer}
-            className={`inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium border transition-colors disabled:opacity-50 disabled:pointer-events-none ${
+            title={confirmingRemove ? 'Confirm remove' : 'Remove'}
+            aria-label={confirmingRemove ? 'Confirm remove' : 'Remove'}
+            className={`inline-flex items-center justify-center rounded-md p-1.5 border transition-colors disabled:opacity-50 disabled:pointer-events-none ${
               confirmingRemove
                 ? 'border-destructive text-destructive hover:bg-destructive/10'
                 : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
             }`}
           >
-            {removingContainer ? <SpinnerIcon size={12} /> : <TrashIcon size={12} />}
-            {confirmingRemove ? 'Confirm' : 'Remove'}
+            {removingContainer ? <SpinnerIcon size={14} /> : <TrashIcon size={14} />}
           </button>
         </div>
       </td>
@@ -330,6 +337,8 @@ function ContainerRow({ container, onRequestStop, onShowLogs, isStopping, isStar
 // ─────────────────────────────────────────────────────────────────────────────
 
 function DockerContainersSection({ containers, loading, onRequestStop, onShowLogs, pendingStop, pendingStart }) {
+  const [activeTab, setActiveTab] = useState('running');
+
   if (loading) {
     return (
       <div className="space-y-4">
@@ -343,12 +352,42 @@ function DockerContainersSection({ containers, loading, onRequestStop, onShowLog
     );
   }
 
+  const runningContainers = containers.filter((c) => c.state === 'running');
+  const exitedContainers = containers.filter((c) => c.state !== 'running');
+  const visibleContainers = activeTab === 'running' ? runningContainers : exitedContainers;
+
+  const tabs = [
+    { id: 'running', label: `Running (${runningContainers.length})` },
+    { id: 'exited', label: `Exited (${exitedContainers.length})` },
+  ];
+
   return (
     <div className="space-y-4">
       <h2 className="text-base font-medium">Docker Containers</h2>
-      {containers.length === 0 ? (
+
+      <div className="flex gap-1.5 overflow-x-auto scrollbar-hide max-w-full">
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              className={`rounded-full px-3 py-1.5 min-h-[36px] inline-flex items-center text-xs font-medium transition-colors shrink-0 whitespace-nowrap ${
+                isActive
+                  ? 'bg-foreground text-background'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {visibleContainers.length === 0 ? (
         <div className="rounded-lg border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
-          No containers found on the compose network.
+          {activeTab === 'running' ? 'No running containers.' : 'No exited containers.'}
         </div>
       ) : (
         <div className="overflow-x-auto">
@@ -364,7 +403,7 @@ function DockerContainersSection({ containers, loading, onRequestStop, onShowLog
               </tr>
             </thead>
             <tbody>
-              {containers.map((c) => (
+              {visibleContainers.map((c) => (
                 <ContainerRow
                   key={c.id}
                   container={c}

package/lib/chat/components/crons-page.js

@@ -100,9 +100,19 @@ function CronCard({ cron }) {
           type === "agent" && cron.job && /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Job prompt" }),
             /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: cron.job }),
-            (cron.llm_provider || cron.llm_model) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "LLM:" }),
-              /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium", children: [cron.llm_provider, cron.llm_model].filter(Boolean).join(" / ") })
+            (cron.agent_backend || cron.llm_model || cron.scope) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [
+              cron.agent_backend && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Agent:" }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium", children: cron.agent_backend })
+              ] }),
+              cron.llm_model && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Model:" }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium", children: cron.llm_model })
+              ] }),
+              cron.scope && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Scope:" }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-mono", children: cron.scope })
+              ] })
             ] })
           ] }),
           type === "command" && cron.command && /* @__PURE__ */ jsxs("div", { children: [
@@ -120,6 +130,10 @@ function CronCard({ cron }) {
             cron.vars && Object.keys(cron.vars).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Variables" }),
               /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: JSON.stringify(cron.vars, null, 2) })
+            ] }),
+            cron.headers && Object.keys(cron.headers).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Headers" }),
+              /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: JSON.stringify(cron.headers, null, 2) })
             ] })
           ] })
         ] })