@mndrk/agx 2.1.0 → 2.3.0

package/cloud-runtime/standalone/apps/local/components/terminal/ProjectTerminal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { useTerminalTabsStore } from "@/state/terminalTabs";
@@ -11,13 +11,9 @@ import {
   type TerminalInstance,
   type TerminalStatus,
 } from "@/lib/terminal-types";
-import { MoveDiagonal, Pencil, Plus, Terminal, X } from "lucide-react";
+import { Pencil, Plus, Terminal, X } from "lucide-react";
 
-const GRID_GAP_PX = 12;
-const GRID_DESKTOP_BREAKPOINT_PX = 960;
-const GRID_MAX_ROW_SPAN = 4;
-const GRID_MIN_ROW_HEIGHT_PX = 320;
-const GRID_MAX_ROW_HEIGHT_PX = 520;
+const GRID_MIN_TERMINAL_WIDTH_PX = 480;
 
 const DEFAULT_PROJECT_KEY = "__global__";
 
@@ -26,20 +22,6 @@ type EditingTerminal = {
   terminalId: string;
 };
 
-type ResizeState = {
-  sessionId: string;
-  terminalId: string;
-  startX: number;
-  startY: number;
-  startColSpan: number;
-  startRowSpan: number;
-  containerWidth: number;
-  columns: number;
-  rowHeight: number;
-};
-
-type TerminalLayoutMode = "single" | "split" | "grid";
-
 export default function ProjectTerminal() {
   const params = useParams<{ slug?: string }>();
   const projectId = params?.slug ?? DEFAULT_PROJECT_KEY;
@@ -52,35 +34,17 @@ export default function ProjectTerminal() {
   const addTerminal = useTerminalTabsStore((s) => s.addTerminal);
   const closeTerminal = useTerminalTabsStore((s) => s.closeTerminal);
   const renameTerminal = useTerminalTabsStore((s) => s.renameTerminal);
-  const updateTerminalLayout = useTerminalTabsStore((s) => s.updateTerminalLayout);
   const setTerminalSessionId = useTerminalTabsStore((s) => s.setTerminalSessionId);
   const updateTerminalStatus = useTerminalTabsStore((s) => s.updateTerminalStatus);
 
   const { getSelection, replaceSelection } = useUrlSelection();
   const selectedId = getSelection("session");
   const gridRef = useRef<HTMLDivElement>(null);
-  const [gridColumns, setGridColumns] = useState(2);
-  const [gridRowHeight, setGridRowHeight] = useState(420);
   const [editingTerminal, setEditingTerminal] = useState<EditingTerminal | null>(null);
   const [editingTitle, setEditingTitle] = useState("");
-  const [resizeState, setResizeState] = useState<ResizeState | null>(null);
   const [touchSessionListOpen, setTouchSessionListOpen] = useState(false);
   const [touchActiveTerminalId, setTouchActiveTerminalId] = useState<string | null>(null);
 
-  function clamp(value: number, min: number, max: number): number {
-    return Math.max(min, Math.min(max, value));
-  }
-
-  function getGridMetrics(width: number) {
-    const columns = width >= GRID_DESKTOP_BREAKPOINT_PX ? 2 : 1;
-    const columnWidth = (width - GRID_GAP_PX * (columns - 1)) / columns;
-    const rowHeight = Math.round(
-      clamp(columnWidth, GRID_MIN_ROW_HEIGHT_PX, GRID_MAX_ROW_HEIGHT_PX),
-    );
-
-    return { columns, rowHeight };
-  }
-
   // Auto-create first session if none exist
   useEffect(() => {
     if (sessions.length === 0) {
@@ -122,82 +86,6 @@ export default function ProjectTerminal() {
     });
   }, [isTouchLayout, selectedSession]);
 
-  useEffect(() => {
-    const grid = gridRef.current;
-    if (!grid) return;
-
-    const observer = new ResizeObserver((entries) => {
-      const width = entries[0]?.contentRect.width ?? grid.clientWidth;
-      const { columns, rowHeight } = getGridMetrics(width);
-      setGridColumns(columns);
-      setGridRowHeight(rowHeight);
-    });
-
-    observer.observe(grid);
-    return () => observer.disconnect();
-  }, [selectedSession?.id]);
-
-  useEffect(() => {
-    if (!resizeState) {
-      return;
-    }
-
-    const previousCursor = document.body.style.cursor;
-    const previousUserSelect = document.body.style.userSelect;
-    document.body.style.cursor = "nwse-resize";
-    document.body.style.userSelect = "none";
-
-    const onPointerMove = (event: PointerEvent) => {
-      const deltaX = event.clientX - resizeState.startX;
-      const deltaY = event.clientY - resizeState.startY;
-      const columns = Math.max(resizeState.columns, 1);
-      const columnWidth =
-        (resizeState.containerWidth - GRID_GAP_PX * (columns - 1)) / columns;
-      const startWidth =
-        columnWidth * resizeState.startColSpan +
-        GRID_GAP_PX * (resizeState.startColSpan - 1);
-      const startHeight =
-        resizeState.rowHeight * resizeState.startRowSpan +
-        GRID_GAP_PX * (resizeState.startRowSpan - 1);
-      const nextColSpan =
-        columns === 1
-          ? 1
-          : Math.max(
-              1,
-              Math.min(
-                columns,
-                Math.round((startWidth + deltaX + GRID_GAP_PX) / (columnWidth + GRID_GAP_PX)),
-              ),
-            );
-      const nextRowSpan = Math.max(
-        1,
-        Math.min(
-          GRID_MAX_ROW_SPAN,
-          Math.round((startHeight + deltaY + GRID_GAP_PX) / (resizeState.rowHeight + GRID_GAP_PX)),
-        ),
-      );
-
-      updateTerminalLayout(projectId, resizeState.sessionId, resizeState.terminalId, {
-        colSpan: nextColSpan,
-        rowSpan: nextRowSpan,
-      });
-    };
-
-    const onPointerUp = () => {
-      setResizeState(null);
-    };
-
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp, { once: true });
-
-    return () => {
-      document.body.style.cursor = previousCursor;
-      document.body.style.userSelect = previousUserSelect;
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-  }, [resizeState, updateTerminalLayout, projectId]);
-
   function handleCreate() {
     const id = createSession(projectId);
     replaceSelection({ session: id });
@@ -271,56 +159,21 @@ export default function ProjectTerminal() {
     return "bg-zinc-500";
   }
 
-  function handleResizeStart(
-    sessionId: string,
-    terminal: TerminalInstance,
-    event: ReactPointerEvent<HTMLButtonElement>,
-  ) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const containerWidth = gridRef.current?.getBoundingClientRect().width;
-    if (!containerWidth) return;
-    const { columns, rowHeight } = getGridMetrics(containerWidth);
-
-    setResizeState({
-      sessionId,
-      terminalId: terminal.id,
-      startX: event.clientX,
-      startY: event.clientY,
-      startColSpan: Math.min(terminal.colSpan, columns),
-      startRowSpan: terminal.rowSpan,
-      containerWidth,
-      columns,
-      rowHeight,
-    });
-  }
-
   function renderTerminalCard(
     sessionId: string,
     terminal: TerminalInstance,
-    total: number,
-    layoutMode: TerminalLayoutMode,
+    isSingle: boolean,
   ) {
     const isEditing =
       editingTerminal?.sessionId === sessionId &&
       editingTerminal.terminalId === terminal.id;
-    const effectiveColSpan = Math.min(terminal.colSpan, gridColumns);
 
     return (
       <div
         key={terminal.id}
         className={`relative flex min-h-0 flex-col overflow-hidden rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-pane)] ${
-          layoutMode === "grid" ? "min-h-[280px]" : "h-full"
+          isSingle ? "h-full" : "min-h-[320px]"
         }`}
-        style={
-          layoutMode === "grid"
-            ? {
-                gridColumn: `span ${effectiveColSpan} / span ${effectiveColSpan}`,
-                gridRow: `span ${terminal.rowSpan} / span ${terminal.rowSpan}`,
-              }
-            : undefined
-        }
       >
         <div className="flex items-center justify-between border-b border-[var(--app-shell-border)] px-3 py-2">
           <div className="flex min-w-0 items-center gap-2">
@@ -344,7 +197,10 @@ export default function ProjectTerminal() {
                   autoFocus
                 />
               ) : (
-                <div className="truncate text-sm font-medium text-[var(--foreground)]">
+                <div
+                  className="truncate text-sm font-medium text-[var(--foreground)] cursor-text"
+                  onDoubleClick={() => handleStartRenameTerminal(sessionId, terminal)}
+                >
                   {terminal.title}
                 </div>
               )}
@@ -364,7 +220,7 @@ export default function ProjectTerminal() {
               <Pencil size={13} />
             </button>
 
-            {total > 1 ? (
+            {!isSingle ? (
               <button
                 type="button"
                 onClick={() => handleCloseTerminal(sessionId, terminal.id)}
@@ -390,16 +246,6 @@ export default function ProjectTerminal() {
           />
         </div>
 
-        {layoutMode === "grid" ? (
-          <button
-            type="button"
-            onPointerDown={(event) => handleResizeStart(sessionId, terminal, event)}
-            className="absolute bottom-2 right-2 rounded p-1 text-[var(--muted-foreground)]/80 transition-colors hover:bg-[var(--muted)]/20 hover:text-[var(--foreground)]"
-            aria-label={`Resize ${terminal.title}`}
-          >
-            <MoveDiagonal size={14} />
-          </button>
-        ) : null}
       </div>
     );
   }
@@ -500,8 +346,7 @@ export default function ProjectTerminal() {
                   return renderTerminalCard(
                     selectedSession.id,
                     terminal,
-                    selectedSession.terminals.length,
-                    "single",
+                    true,
                   );
                 })()}
               </div>
@@ -553,44 +398,24 @@ export default function ProjectTerminal() {
                 </div>
 
                 {(() => {
-                  const terminalCount = selectedSession.terminals.length;
-                  const layoutMode: TerminalLayoutMode =
-                    terminalCount === 1
-                      ? "single"
-                      : terminalCount === 2
-                        ? "split"
-                        : "grid";
+                  const isSingle = selectedSession.terminals.length === 1;
 
                   return (
-                    <div
-                      className={`min-h-0 flex-1 p-3 ${
-                        layoutMode === "grid" ? "overflow-auto" : "overflow-hidden"
-                      }`}
-                    >
+                    <div className={`min-h-0 flex-1 p-3 ${isSingle ? "overflow-hidden" : "overflow-auto"}`}>
                       <div
                         ref={gridRef}
-                        className={`grid gap-3 ${
-                          layoutMode === "single" ? "h-full grid-cols-1" : ""
-                        } ${
-                          layoutMode === "split" ? "h-full grid-cols-2" : ""
-                        }`}
+                        className="grid gap-3"
                         style={
-                          layoutMode === "grid"
-                            ? {
-                                gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
-                                gridAutoRows: `${gridRowHeight}px`,
-                              }
-                            : {
-                                gridTemplateRows: "minmax(0, 1fr)",
-                              }
+                          isSingle
+                            ? { gridTemplateColumns: "1fr", gridTemplateRows: "minmax(0, 1fr)", height: "100%" }
+                            : { gridTemplateColumns: `repeat(auto-fit, minmax(${GRID_MIN_TERMINAL_WIDTH_PX}px, 1fr))` }
                         }
                       >
                         {selectedSession.terminals.map((terminal) =>
                           renderTerminalCard(
                             selectedSession.id,
                             terminal,
-                            selectedSession.terminals.length,
-                            layoutMode,
+                            isSingle,
                           ),
                         )}
                       </div>

package/cloud-runtime/standalone/apps/local/components/terminal/TerminalPane.tsx

@@ -1,11 +1,20 @@
 "use client";
 
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, forwardRef, useImperativeHandle } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import type { TerminalStatus } from "@/lib/terminal-types";
 import "@xterm/xterm/css/xterm.css";
 
+export interface TerminalPaneHandle {
+  /** Send raw input bytes to the PTY (e.g. "\x03" for Ctrl+C) */
+  sendInput: (data: string) => void;
+  /** Clear the xterm screen */
+  clear: () => void;
+  /** Ctrl+C ×2 → wait 400 ms → clear → send command\r  (same pattern as EmbeddedTerminal) */
+  sendCommand: (command: string) => void;
+}
+
 interface TerminalPaneProps {
   sessionId?: string;
   tabId: string;
@@ -14,12 +23,12 @@ interface TerminalPaneProps {
   onStatusChange?: (status: TerminalStatus) => void;
 }
 
-export default function TerminalPane({
+const TerminalPane = forwardRef<TerminalPaneHandle, TerminalPaneProps>(function TerminalPane({
   tabId,
   onTitleChange,
   onSessionReady,
   onStatusChange,
-}: TerminalPaneProps) {
+}: TerminalPaneProps, ref) {
   const containerRef = useRef<HTMLDivElement>(null);
   const terminalRef = useRef<Terminal | null>(null);
   const fitAddonRef = useRef<FitAddon | null>(null);
@@ -42,6 +51,31 @@ export default function TerminalPane({
     [],
   );
 
+  const hasRunCommandRef = useRef(false);
+
+  const sendInputImperative = useCallback((data: string) => {
+    sendMessage({ type: "data", data });
+  }, [sendMessage]);
+
+  useImperativeHandle(ref, () => ({
+    sendInput: sendInputImperative,
+    clear: () => terminalRef.current?.clear(),
+    sendCommand: (command: string) => {
+      if (!hasRunCommandRef.current) {
+        terminalRef.current?.clear();
+        sendInputImperative(command + "\r");
+        hasRunCommandRef.current = true;
+      } else {
+        sendInputImperative("\x03");
+        setTimeout(() => sendInputImperative("\x03"), 100);
+        setTimeout(() => {
+          terminalRef.current?.clear();
+          sendInputImperative(command + "\r");
+        }, 400);
+      }
+    },
+  }), [sendInputImperative]);
+
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
@@ -282,4 +316,6 @@ export default function TerminalPane({
       />
     </div>
   );
-}
+});
+
+export default TerminalPane;

package/cloud-runtime/standalone/apps/local/components/thread/WorkspaceSidebar.tsx

@@ -87,6 +87,35 @@ function WorkspaceSidebarBrandLogo({ compact = false }: { compact?: boolean }) {
   );
 }
 
+function RailTooltip({ label, children }: { label: string; children: React.ReactElement }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  const show = () => {
+    const el = (ref.current?.firstElementChild ?? ref.current) as HTMLElement | null;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setPos({ top: rect.top + rect.height / 2, left: rect.right + 8 });
+  };
+  const hide = () => setPos(null);
+
+  return (
+    <div ref={ref} onMouseEnter={show} onMouseLeave={hide} style={{ display: "contents" }}>
+      {children}
+      {pos &&
+        createPortal(
+          <div
+            className="workspace-sidebar__rail-tooltip"
+            style={{ top: pos.top, left: pos.left, transform: "translateY(-50%)" }}
+          >
+            {label}
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
 function ProjectDropdown({
   projects,
   activeProjectId,
@@ -127,7 +156,7 @@ function ProjectDropdown({
   }, [open]);
 
   return (
-    <div className="px-3 pt-3 pb-2" ref={dropdownRef}>
+    <div className="relative px-3 pt-3 pb-2" ref={dropdownRef}>
       <button
         type="button"
         onClick={() => setOpen(!open)}
@@ -139,7 +168,7 @@ function ProjectDropdown({
       </button>
 
       {open && (
-        <div className="mt-1 rounded-lg border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg overflow-hidden">
+        <div className="absolute left-3 right-3 z-50 mt-1 rounded-lg border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg overflow-hidden">
           <div className="p-2 border-b border-[var(--app-shell-border)]">
             <div className="flex items-center gap-2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] px-2 py-1.5">
               <Search size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
@@ -695,6 +724,9 @@ export function WorkspaceSidebar({
       return null;
     }
 
+    const collapsedProject = nonDefaultProjects.find((p) => p.id === activeProjectId) ?? nonDefaultProjects[0];
+    const collapsedSlug = collapsedProject?.slug;
+
     return (
       <aside
         id="workspace-sidebar"
@@ -712,21 +744,90 @@ export function WorkspaceSidebar({
             <WorkspaceSidebarBrandLogo compact />
           </button>
         </div>
+
+        {collapsedSlug && (
+          <nav className="workspace-sidebar__collapsed-rail">
+            <RailTooltip label="Home">
+              <Link href={`/projects/${collapsedSlug}`} className={`workspace-sidebar__rail-icon${activeProjectView === "home" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Home size={16} />
+              </Link>
+            </RailTooltip>
+
+            <div className="workspace-sidebar__rail-separator" />
+
+            <RailTooltip label="Objectives">
+              <Link href={`/projects/${collapsedSlug}/objectives`} className={`workspace-sidebar__rail-icon${activeProjectView === "objectives" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Target size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Linear">
+              <Link href={`/projects/${collapsedSlug}/linear`} className={`workspace-sidebar__rail-icon${activeProjectView === "linear" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <LinearIcon size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Scheduled Tasks">
+              <Link href={`/projects/${collapsedSlug}/automations`} className={`workspace-sidebar__rail-icon${activeProjectView === "automations" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Zap size={16} />
+              </Link>
+            </RailTooltip>
+
+            <div className="workspace-sidebar__rail-separator" />
+
+            <RailTooltip label="Terminal">
+              <Link href={`/projects/${collapsedSlug}/terminal`} className={`workspace-sidebar__rail-icon${activeProjectView === "terminal" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <TerminalSquare size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Chat">
+              <button
+                type="button"
+                className={`workspace-sidebar__rail-icon${activeProjectView === "thread" ? " workspace-sidebar__rail-icon--active" : ""}`}
+                onClick={() => {
+                  const projectThreads = sortedWorkspaces.filter((t) => collapsedProject.thread_ids?.includes(t.id));
+                  const threadId = collapsedProject.thread_ids?.find((id) => threads.some((t) => t.id === id)) ?? projectThreads[0]?.id;
+                  if (threadId) onSelectThread(threadId);
+                }}
+              >
+                <MessageSquare size={16} />
+              </button>
+            </RailTooltip>
+
+            <div className="workspace-sidebar__rail-separator" />
+
+            <RailTooltip label="Teams">
+              <Link href={`/projects/${collapsedSlug}/teams`} className={`workspace-sidebar__rail-icon${activeProjectView === "teams" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <Users size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Folders">
+              <Link href={`/projects/${collapsedSlug}/folders`} className={`workspace-sidebar__rail-icon${activeProjectView === "folders" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <FolderGit2 size={16} />
+              </Link>
+            </RailTooltip>
+            <RailTooltip label="Env Variables">
+              <Link href={`/projects/${collapsedSlug}/env-vars`} className={`workspace-sidebar__rail-icon${activeProjectView === "env-vars" ? " workspace-sidebar__rail-icon--active" : ""}`}>
+                <KeyRound size={16} />
+              </Link>
+            </RailTooltip>
+          </nav>
+        )}
+
         <div className="mt-auto p-2">
-          <a
-            href="https://discord.gg/G9afUYKKY3"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center justify-center w-8 h-8 rounded-lg text-white transition-colors"
-            style={{ backgroundColor: '#5865F2' }}
-            onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#4752C4')}
-            onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#5865F2')}
-            title="Join Discord"
-          >
-            <svg width="14" height="14" viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-              <path d="M60.1 4.9A58.5 58.5 0 0045.4.2a.2.2 0 00-.2.1 40.8 40.8 0 00-1.8 3.7 54 54 0 00-16.2 0A37.4 37.4 0 0025.4.3a.2.2 0 00-.2-.1A58.4 58.4 0 0010.5 4.9a.2.2 0 00-.1.1C1.5 18.7-.9 32.2.3 45.5v.1a58.8 58.8 0 0017.7 9a.2.2 0 00.3-.1 42 42 0 003.6-5.9.2.2 0 00-.1-.3 38.8 38.8 0 01-5.5-2.6.2.2 0 01 0-.4l1.1-.9a.2.2 0 01.2 0 42 42 0 0035.6 0 .2.2 0 01.2 0l1.1.9a.2.2 0 010 .4 36.4 36.4 0 01-5.5 2.6.2.2 0 00-.1.3 47.2 47.2 0 003.6 5.9.2.2 0 00.3.1 58.6 58.6 0 0017.7-9v-.1c1.4-15.2-2.4-28.4-10-40.1a.2.2 0 00-.1-.1zM23.7 37.3c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7zm23.3 0c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7z"/>
-            </svg>
-          </a>
+          <RailTooltip label="Join Discord">
+            <a
+              href="https://discord.gg/G9afUYKKY3"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="workspace-sidebar__rail-icon"
+              style={{ backgroundColor: '#5865F2', color: 'white' }}
+              onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#4752C4')}
+              onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#5865F2')}
+            >
+              <svg width="14" height="14" viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M60.1 4.9A58.5 58.5 0 0045.4.2a.2.2 0 00-.2.1 40.8 40.8 0 00-1.8 3.7 54 54 0 00-16.2 0A37.4 37.4 0 0025.4.3a.2.2 0 00-.2-.1A58.4 58.4 0 0010.5 4.9a.2.2 0 00-.1.1C1.5 18.7-.9 32.2.3 45.5v.1a58.8 58.8 0 0017.7 9a.2.2 0 00.3-.1 42 42 0 003.6-5.9.2.2 0 00-.1-.3 38.8 38.8 0 01-5.5-2.6.2.2 0 01 0-.4l1.1-.9a.2.2 0 01.2 0 42 42 0 0035.6 0 .2.2 0 01.2 0l1.1.9a.2.2 0 010 .4 36.4 36.4 0 01-5.5 2.6.2.2 0 00-.1.3 47.2 47.2 0 003.6 5.9.2.2 0 00.3.1 58.6 58.6 0 0017.7-9v-.1c1.4-15.2-2.4-28.4-10-40.1a.2.2 0 00-.1-.1zM23.7 37.3c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7zm23.3 0c-3.5 0-6.3-3.2-6.3-7s2.8-7 6.3-7 6.4 3.2 6.3 7-2.8 7-6.3 7z"/>
+              </svg>
+            </a>
+          </RailTooltip>
         </div>
       </aside>
     );
@@ -807,7 +908,7 @@ export function WorkspaceSidebar({
           return (
             <nav className="workspace-sidebar__section">
               {/* Home (standalone) */}
-              <div className="px-2 mb-3">
+              <div className="px-2 mt-2 mb-3">
                 <div className="workspace-sidebar__workspace-item">
                     <Link
                       href={`/projects/${selectedProject.slug}`}
@@ -1325,7 +1426,7 @@ export function WorkspaceSidebar({
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify({
                 id, name: data.name, provider: data.provider, model: data.model, color: data.color ?? color,
-                ...(data.title ? { title: data.title } : {}),
+                ...(data.role ? { role: data.role } : {}),
                 ...(data.identity ? { identity: data.identity } : {}),
                 skills: data.skills ?? [],
                 skillBindings: data.skillBindings ?? [],
@@ -1484,7 +1585,7 @@ export function WorkspaceSidebar({
             title="Edit agent"
             initial={{
               name: agentDetailAgent.name,
-              title: agentDetailAgent.title || "",
+              role: agentDetailAgent.role || "",
               provider: agentDetailAgent.provider,
               model: agentDetailAgent.model || "",
               identity: agentDetailAgent.identity || "",
@@ -1505,7 +1606,7 @@ export function WorkspaceSidebar({
                 await onUpdateParticipant({
                   ...agentDetailAgent,
                   name: data.name,
-                  title: data.title || undefined,
+                  role: data.role || undefined,
                   provider: data.provider,
                   model: data.model,
                   color: data.color ?? agentDetailAgent.color,

package/cloud-runtime/standalone/apps/local/components/ui/ResizeHandle.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+export function ResizeHandle({
+  onResize,
+}: {
+  onResize: (delta: number) => void;
+}) {
+  const dragging = useRef(false);
+  const lastX = useRef(0);
+
+  useEffect(() => {
+    if (!dragging.current) return;
+
+    const onMouseMove = (e: MouseEvent) => {
+      const delta = e.clientX - lastX.current;
+      lastX.current = e.clientX;
+      onResize(delta);
+    };
+
+    const onMouseUp = () => {
+      dragging.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  });
+
+  return (
+    <div
+      className="group relative z-10 w-0 shrink-0 cursor-col-resize"
+      onMouseDown={(e) => {
+        e.preventDefault();
+        dragging.current = true;
+        lastX.current = e.clientX;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+      }}
+    >
+      <div className="absolute inset-y-0 -left-0.5 w-1 transition-colors group-hover:bg-[var(--primary)]/40" />
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/hooks/useAutomations.ts

@@ -66,14 +66,19 @@ export function useAutomations() {
     return res.ok;
   }, [fetchAutomations]);
 
-  const runNow = useCallback(async (taskId: string) => {
+  const runNow = useCallback(async (taskId: string): Promise<{ ok: boolean; skipReason?: string }> => {
     const res = await fetch('/api/schedules/poll', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ taskId }),
     });
-    if (res.ok) await fetchAutomations();
-    return res.ok;
+    if (res.ok) {
+      await fetchAutomations();
+      return { ok: true };
+    }
+    const data = await res.json().catch(() => ({}));
+    await fetchAutomations();
+    return { ok: false, skipReason: data.skipReason };
   }, [fetchAutomations]);
 
   return {