@mndrk/agx 2.2.0 → 2.3.0

package/cloud-runtime/standalone/apps/local/components/setup/SetupLayout.tsx

@@ -8,9 +8,11 @@ interface SetupLayoutProps {
   totalSteps: number;
   children: React.ReactNode;
   footer?: React.ReactNode;
+  wide?: boolean;
 }
 
-export function SetupLayout({ currentStep, totalSteps, children, footer }: SetupLayoutProps) {
+export function SetupLayout({ currentStep, totalSteps, children, footer, wide }: SetupLayoutProps) {
+  const maxW = wide ? "max-w-6xl" : "max-w-2xl";
   return (
     <div className="h-screen w-full flex flex-col bg-[var(--background)]">
       {/* Header with step indicator */}
@@ -19,8 +21,8 @@ export function SetupLayout({ currentStep, totalSteps, children, footer }: Setup
       </div>
 
       {/* Content area — scrollable */}
-      <div className="flex-1 overflow-y-auto px-4">
-        <div className="max-w-2xl mx-auto w-full py-6">
+      <div className="flex-1 overflow-y-auto px-4 min-h-0">
+        <div className={`${maxW} mx-auto w-full py-6 h-full`}>
           {children}
         </div>
       </div>
@@ -28,7 +30,7 @@ export function SetupLayout({ currentStep, totalSteps, children, footer }: Setup
       {/* Footer — sticky at bottom */}
       {footer && (
         <div className="border-t border-[var(--border)] bg-[var(--background)] px-4 py-4">
-          <div className="max-w-2xl mx-auto w-full">
+          <div className={`${maxW} mx-auto w-full`}>
             {footer}
           </div>
         </div>

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

@@ -92,7 +92,7 @@ function RailTooltip({ label, children }: { label: string; children: React.React
   const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
 
   const show = () => {
-    const el = ref.current;
+    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 });
@@ -1426,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 ?? [],
@@ -1585,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 || "",
@@ -1606,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 {

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

@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useLinearActiveAgents(projectId?: string): {
+  issueActiveAgents: Map<string, Array<{ agentId: string; agentName: string }>>;
+} {
+  const [issueActiveAgents, setIssueActiveAgents] = useState<Map<string, Array<{ agentId: string; agentName: string }>>>(new Map());
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchActiveAgents() {
+      try {
+        const params = new URLSearchParams();
+        if (projectId) params.set("projectId", projectId);
+        const res = await fetch(`/api/linear/issues/active-agents?${params}`);
+        if (!res.ok || cancelled) return;
+        const data = await res.json();
+        const map = new Map<string, Array<{ agentId: string; agentName: string }>>();
+        for (const entry of data.agents ?? []) {
+          const list = map.get(entry.issueId) ?? [];
+          list.push({ agentId: entry.agentId, agentName: entry.agentName });
+          map.set(entry.issueId, list);
+        }
+        if (!cancelled) setIssueActiveAgents(map);
+      } catch {
+        // ignore
+      }
+    }
+
+    void fetchActiveAgents();
+    const interval = setInterval(() => void fetchActiveAgents(), 5000);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, [projectId]);
+
+  return { issueActiveAgents };
+}