@mndrk/agx 2.0.55 → 2.1.0

package/cloud-runtime/standalone/apps/local/app/globals.css

@@ -109,6 +109,20 @@
   --app-shell-border-strong: rgba(0, 0, 0, 0.1); /* black/10 */
   --app-shell-muted: #64748b; /* slate-500 */
   --app-shell-soft-text: #94a3b8; /* slate-400 */
+
+  /* Overlay/tinted surfaces */
+  --overlay-panel: rgba(255, 255, 255, 0.82);
+  --overlay-panel-strong: rgba(255, 255, 255, 0.96);
+  --overlay-panel-soft: rgba(248, 250, 252, 0.88);
+  --overlay-panel-muted: rgba(241, 245, 249, 0.88);
+
+  /* Neutral chips and timeline */
+  --tone-neutral: #64748b;
+  --tone-neutral-border: rgba(148, 163, 184, 0.28);
+  --tone-neutral-bg: rgba(148, 163, 184, 0.14);
+  --timeline-track: rgba(148, 163, 184, 0.3);
+  --timeline-node-border: rgba(148, 163, 184, 0.42);
+  --timeline-node-bg: #ffffff;
 }
 
 .dark {
@@ -178,6 +192,20 @@
   --app-shell-border-strong: #4f4f4f;
   --app-shell-muted: #858585;
   --app-shell-soft-text: #6e6e6e;
+
+  /* Overlay/tinted surfaces */
+  --overlay-panel: rgba(8, 12, 18, 0.72);
+  --overlay-panel-strong: rgba(6, 10, 16, 0.96);
+  --overlay-panel-soft: rgba(15, 23, 42, 0.55);
+  --overlay-panel-muted: rgba(15, 23, 42, 0.32);
+
+  /* Neutral chips and timeline */
+  --tone-neutral: #a1a1aa;
+  --tone-neutral-border: rgba(113, 113, 122, 0.8);
+  --tone-neutral-bg: rgba(82, 82, 91, 0.55);
+  --timeline-track: rgba(39, 39, 42, 0.9);
+  --timeline-node-border: rgba(82, 82, 91, 0.9);
+  --timeline-node-bg: #131315;
 }
 
 body {
@@ -649,15 +677,15 @@ select:focus-visible {
 /* ========================================
    Responsive Utilities
    ======================================== */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+}
+
 @media (max-width: 768px) {
   .hide-mobile {
     display: none;
   }
-
-  .touch-target {
-    min-height: 44px;
-    min-width: 44px;
-  }
 }
 
 @media (min-width: 769px) {
@@ -1184,6 +1212,10 @@ select:focus-visible {
   width: 360px;
 }
 
+.node-inspector--touch {
+  width: 100%;
+}
+
 .node-inspector__resize-handle {
   position: absolute;
   top: 0;
@@ -1681,6 +1713,12 @@ select:focus-visible {
   gap: 1rem;
 }
 
+.execution-graph-panel__controls--touch .react-flow__controls-button {
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 0.9rem;
+}
+
 .graph-sidebar-section__toggle {
   display: flex;
   align-items: center;
@@ -2106,6 +2144,13 @@ select:focus-visible {
   transform: translateX(0);
 }
 
+.node-detail-panel--touch {
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  border-left: 0;
+}
+
 .node-detail-panel__resize-handle {
   position: absolute;
   top: 0;
@@ -2636,6 +2681,23 @@ select:focus-visible {
   }
 }
 
+@media (hover: none), (pointer: coarse) {
+  [data-touch-target="true"] {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .execution-graph-panel__controls .react-flow__controls-button {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+
+  .node-detail-panel__resize-handle,
+  .node-inspector__resize-handle {
+    display: none;
+  }
+}
+
 /* ========================================
    Terminal/Code Display
    ======================================== */

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/folders/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { use } from "react";
+import { FoldersView } from "@/components/projects/FoldersView";
+import { useProjectsWithAgents } from "@/hooks/useProjects";
+
+export default function FoldersPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = use(params);
+  const { projects } = useProjectsWithAgents();
+  const project = projects.find((p) => p.slug === slug);
+
+  if (!project) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-zinc-500">
+        Loading...
+      </div>
+    );
+  }
+
+  return <FoldersView projectId={project.id} />;
+}

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/layout.tsx

@@ -3,10 +3,11 @@
 import { Suspense, use, useCallback, useEffect, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
-import { ArrowLeft, Sun, Moon } from "lucide-react";
+import { ArrowLeft, PanelLeftOpen, Sun, Moon } from "lucide-react";
 import { StatusIndicator } from "@/components/chat-ui/StatusIndicator";
 import { ProjectSearchBar } from "@/components/projects/ProjectSearchBar";
 import { WorkspaceSidebar } from "@/components/thread/WorkspaceSidebar";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { useProjectsWithAgents } from "@/hooks/useProjects";
 import { useThreadState } from "@/hooks/useThreadState";
 import type { Participant } from "@/lib/types";
@@ -27,6 +28,7 @@ function ProjectLayoutContent({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = use(params);
+  const { isTouchLayout } = useInputCapabilities();
   const router = useRouter();
   const pathname = usePathname();
   const {
@@ -87,7 +89,7 @@ function ProjectLayoutContent({
     const match = pathname.match(/\/projects\/[^/]+\/thread\/([^/]+)/);
     return match?.[1] ? decodeURIComponent(match[1]) : currentProject?.thread_ids[0] ?? null;
   }, [currentProject?.thread_ids, pathname]);
-  const activeProjectView = useMemo<"home" | "objectives" | "teams" | "thread" | "knowledge" | "automations" | "linear" | "terminal" | "settings" | "env-vars">(
+  const activeProjectView = useMemo<"home" | "objectives" | "teams" | "thread" | "knowledge" | "automations" | "linear" | "terminal" | "settings" | "env-vars" | "folders">(
     () => {
       if (pathname.includes("/linear")) return "linear";
       if (pathname.includes("/automations")) return "automations";
@@ -95,6 +97,7 @@ function ProjectLayoutContent({
       if (pathname.includes("/knowledge")) return "knowledge";
       if (pathname.includes("/objectives")) return "objectives";
       if (pathname.includes("/teams")) return "teams";
+      if (pathname.includes("/folders")) return "folders";
       if (pathname.includes("/env-vars")) return "env-vars";
       if (pathname.includes("/terminal")) return "terminal";
       if (pathname.includes("/settings")) return "settings";
@@ -189,6 +192,17 @@ function ProjectLayoutContent({
         <div className="flex items-center px-4 py-2 border-b border-[var(--app-shell-border)] bg-[var(--background)] shrink-0">
           {/* Left: back + breadcrumb */}
           <div className="flex items-center gap-1.5 min-w-0 flex-shrink-0">
+            {!sidebarVisible && (
+              <button
+                type="button"
+                onClick={toggleSidebar}
+                className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--muted-foreground)] transition-colors hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+                title="Show sidebar"
+                aria-label="Show sidebar"
+              >
+                <PanelLeftOpen className="h-4 w-4" />
+              </button>
+            )}
             {pathname !== `/projects/${slug}` && (
               <button
                 type="button"
@@ -213,7 +227,7 @@ function ProjectLayoutContent({
                   onClick={() => router.push(`/projects/${slug}/${activeProjectView === "thread" ? "" : activeProjectView}`)}
                   className="text-xs text-[var(--foreground)] hover:text-[var(--muted-foreground)] transition-colors"
                 >
-                  {{ objectives: "Objectives", teams: "Teams", "env-vars": "Environment Variables", linear: "Linear", automations: "Scheduled Tasks", thread: "Chat", knowledge: "Knowledge", terminal: "Terminal", settings: "Settings" }[activeProjectView] ?? activeProjectView}
+                  {{ objectives: "Objectives", teams: "Teams", folders: "Folders", "env-vars": "Environment Variables", linear: "Linear", automations: "Scheduled Tasks", thread: "Chat", knowledge: "Knowledge", terminal: "Terminal", settings: "Settings" }[activeProjectView] ?? activeProjectView}
                 </button>
                 <span id="topbar-breadcrumb" className="contents" />
               </>
@@ -233,9 +247,9 @@ function ProjectLayoutContent({
               onClick={() => setTheme((t) => (t === "dark" ? "light" : "dark"))}
               aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
               title={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
-              className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)]"
+              className={`inline-flex items-center justify-center rounded-lg text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] ${isTouchLayout ? "h-9 w-9" : "h-7 w-7"}`}
             >
-              {theme === "dark" ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
+              {theme === "dark" ? <Sun className={isTouchLayout ? "h-4 w-4" : "h-3.5 w-3.5"} /> : <Moon className={isTouchLayout ? "h-4 w-4" : "h-3.5 w-3.5"} />}
             </button>
           </div>
         </div>

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/objectives/[objectiveId]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { use } from "react";
-import { ProjectObjectiveDetail } from "@/components/projects/ProjectObjectivesWorkspace";
+import { ProjectObjectivesOverview } from "@/components/projects/ProjectObjectivesWorkspace";
 
 export default function ProjectObjectiveDetailPage({
   params,
@@ -10,5 +10,10 @@ export default function ProjectObjectiveDetailPage({
 }) {
   const { slug, objectiveId } = use(params);
 
-  return <ProjectObjectiveDetail projectSlug={slug} objectiveId={objectiveId} />;
+  return (
+    <ProjectObjectivesOverview
+      projectSlug={slug}
+      initialObjectiveId={objectiveId}
+    />
+  );
 }

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/teams/new/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { use, useMemo, useRef, useState } from "react";
+import { use, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
   getAgentPresetBindings,
@@ -15,8 +15,205 @@ import {
   AgentForm,
   type AgentFormData,
 } from "@/components/chat-ui/ParticipantBar";
-import type { SkillBinding } from "@/lib/types";
-import { Check, Loader2, Pencil, Plus, Users, X } from "lucide-react";
+import type { ChatProvider, SkillBinding } from "@/lib/types";
+import { Check, ChevronDown, ChevronRight, Loader2, Pencil, Plus, Users, X } from "lucide-react";
+
+/** Matches lib/cli/providers.js PROVIDERS map. */
+const PROVIDERS: { id: string; label: string }[] = [
+  { id: "claude", label: "Claude Code" },
+  { id: "gemini", label: "Gemini CLI" },
+  { id: "ollama", label: "Ollama" },
+  { id: "codex", label: "Codex CLI" },
+];
+
+/** Matches lib/cli/onboarding.js model lists per provider. */
+const MODEL_SUGGESTIONS: Record<string, string[]> = {
+  claude: ["claude-opus-4-6", "claude-sonnet-4-6", "claude-haiku-4-5"],
+  gemini: ["gemini-3-pro-preview", "gemini-3-flash-preview"],
+  ollama: ["glm-5:cloud", "qwen3.5:397b-cloud", "qwen3.5:cloud", "minimax-m2.5:cloud", "kimi-k2.5:cloud"],
+  codex: ["gpt-5.3-codex", "gpt-5.1-code-mini"],
+};
+
+/** Searchable combobox: text input with dropdown suggestions, allows custom values. */
+function ModelCombobox({
+  value,
+  onChange,
+  suggestions,
+  placeholder = "Model name...",
+  disabled,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  suggestions: string[];
+  placeholder?: string;
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const filtered = suggestions.filter((s) =>
+    s.toLowerCase().includes((filter || value).toLowerCase())
+  );
+
+  return (
+    <div ref={wrapperRef} className="relative flex-1">
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(e) => {
+          onChange(e.target.value);
+          setFilter(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        className="w-full h-8 px-2.5 text-xs rounded-lg border bg-[var(--background)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:border-[var(--foreground)]/40 transition-colors disabled:opacity-50"
+        style={{ borderColor: "var(--border)" }}
+      />
+      {open && filtered.length > 0 && (
+        <div className="absolute z-50 top-full left-0 right-0 mt-1 max-h-[160px] overflow-y-auto rounded-lg border bg-[var(--background)] shadow-lg" style={{ borderColor: "var(--border)" }}>
+          {filtered.map((s) => (
+            <button
+              key={s}
+              type="button"
+              onClick={() => {
+                onChange(s);
+                setFilter("");
+                setOpen(false);
+              }}
+              className={`w-full text-left px-2.5 py-1.5 text-xs transition-colors hover:bg-[var(--muted)] ${
+                s === value ? "text-[var(--foreground)] font-medium" : "text-[var(--muted-foreground)]"
+              }`}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Custom dropdown for provider selection. */
+function ProviderDropdown({
+  value,
+  onChange,
+  providers,
+  disabled,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  providers: { id: string; label: string }[];
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const selected = providers.find((p) => p.id === value);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className="relative shrink-0">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        className="h-8 px-2.5 pr-7 text-xs rounded-lg border bg-[var(--background)] text-left transition-colors hover:border-[var(--foreground)]/40 disabled:opacity-50 disabled:cursor-not-allowed min-w-[120px]"
+        style={{ borderColor: "var(--border)" }}
+      >
+        <span className={selected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}>
+          {selected?.label ?? "Provider..."}
+        </span>
+        <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[var(--muted-foreground)]" />
+      </button>
+      {open && (
+        <div className="absolute z-50 top-full left-0 mt-1 min-w-[160px] rounded-lg border bg-[var(--background)] shadow-lg overflow-hidden" style={{ borderColor: "var(--border)" }}>
+          {providers.map((p) => (
+            <button
+              key={p.id}
+              type="button"
+              onClick={() => {
+                onChange(p.id);
+                setOpen(false);
+              }}
+              className={`w-full text-left px-3 py-2 text-xs transition-colors hover:bg-[var(--muted)] flex items-center justify-between gap-3 ${
+                p.id === value ? "text-[var(--foreground)] font-medium" : "text-[var(--muted-foreground)]"
+              }`}
+            >
+              {p.label}
+              {p.id === value && <Check className="w-3 h-3 text-[var(--foreground)]" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Provider dropdown + model combobox, compact layout. */
+function ProviderModelSelector({
+  provider,
+  model,
+  onProviderChange,
+  onModelChange,
+  label,
+  disabled,
+}: {
+  provider: string;
+  model: string;
+  onProviderChange: (v: string) => void;
+  onModelChange: (v: string) => void;
+  label?: string;
+  disabled?: boolean;
+}) {
+  const suggestions = MODEL_SUGGESTIONS[provider] ?? [];
+
+  return (
+    <div className="space-y-1.5">
+      {label && (
+        <span className="text-[10px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">{label}</span>
+      )}
+      <div className="flex items-center gap-2">
+        <ProviderDropdown
+          value={provider}
+          onChange={(v) => {
+            onProviderChange(v);
+            onModelChange("");
+          }}
+          providers={PROVIDERS}
+          disabled={disabled}
+        />
+        <ModelCombobox
+          value={model}
+          onChange={onModelChange}
+          suggestions={suggestions}
+          placeholder={provider ? "Select or type model..." : "Select a provider first"}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+}
 
 const AGENT_COLORS = ["#D97706", "#2563EB", "#059669", "#DC2626", "#7C3AED", "#DB2777", "#0891B2"];
 
@@ -40,14 +237,14 @@ function toSkillBindings(preset: AgentPreset): SkillBinding[] {
   }));
 }
 
-function createAgentDraft(id: string, preset: AgentPreset, color: string): DraftAgent {
+function createAgentDraft(id: string, preset: AgentPreset, color: string, defaultProvider?: ChatProvider, defaultModel?: string): DraftAgent {
   return {
     id,
     roleId: preset.id,
     name: preset.name,
     title: preset.title,
-    provider: "claude",
-    model: "",
+    provider: defaultProvider || "claude",
+    model: defaultModel || "",
     identity: preset.identity,
     color,
     skills: [],
@@ -77,10 +274,13 @@ export default function NewTeamPage({ params }: { params: Promise<{ slug: string
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
   const [draftAgents, setDraftAgents] = useState<DraftAgent[]>([]);
   const [teamName, setTeamName] = useState("");
+  const [teamProvider, setTeamProvider] = useState<ChatProvider | "">("");
+  const [teamModel, setTeamModel] = useState("");
   const [creating, setCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [agentEditor, setAgentEditor] = useState<AgentEditorState | null>(null);
 
+
   const templates = useMemo(() => listTeamTemplates(), []);
   const allPresets = useMemo(() => listAgentPresets(), []);
   const nextDraftId = useRef(0);
@@ -146,7 +346,7 @@ export default function NewTeamPage({ params }: { params: Promise<{ slug: string
   function seedDraftAgents(presets: AgentPreset[]) {
     setDraftAgents(
       presets.map((preset, index) =>
-        createAgentDraft(createDraftId(), preset, getNextColor(index)),
+        createAgentDraft(createDraftId(), preset, getNextColor(index), teamProvider || undefined, teamModel),
       ),
     );
   }
@@ -207,7 +407,7 @@ export default function NewTeamPage({ params }: { params: Promise<{ slug: string
       key: createEditorKey(),
       mode,
       draftId: null,
-      initial: createAgentDraft(createDraftId(), preset, getNextColor(draftAgents.length)),
+      initial: createAgentDraft(createDraftId(), preset, getNextColor(draftAgents.length), teamProvider || undefined, teamModel),
     });
   }
 
@@ -252,12 +452,14 @@ export default function NewTeamPage({ params }: { params: Promise<{ slug: string
     try {
       const body: Record<string, unknown> = {
         name: teamName.trim(),
+        provider: teamProvider || undefined,
+        model: teamModel || undefined,
         agents: draftAgents.map((agent) => ({
           roleId: agent.roleId,
           name: agent.name,
           title: agent.title || undefined,
-          provider: agent.provider,
-          model: agent.model,
+          provider: agent.provider || teamProvider || "claude" as string,
+          model: agent.model || teamModel || "",
           identity: agent.identity || undefined,
           color: agent.color,
           skills: agent.skills ?? [],
@@ -344,6 +546,20 @@ export default function NewTeamPage({ params }: { params: Promise<{ slug: string
             </div>
           )}
 
+          <div>
+            <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1.5">Default provider & model</label>
+            <ProviderModelSelector
+              provider={teamProvider}
+              model={teamModel}
+              onProviderChange={(v) => setTeamProvider((v || "") as ChatProvider | "")}
+              onModelChange={setTeamModel}
+              disabled={creating}
+            />
+            <p className="mt-1 text-[10px] text-[var(--muted-foreground)]">
+              Applies to all agents unless individually overridden.
+            </p>
+          </div>
+
           <div>
             <div className="flex items-center justify-between gap-3 mb-2">
               <label className="block text-xs font-medium text-[var(--muted-foreground)]">
@@ -391,6 +607,16 @@ export default function NewTeamPage({ params }: { params: Promise<{ slug: string
                                 {agent.title}
                               </span>
                             )}
+                            {agent.model && agent.model !== teamModel && (
+                              <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-violet-500/15 text-violet-400">
+                                custom
+                              </span>
+                            )}
+                            {(agent.model || teamModel) && (
+                              <span className="text-[10px] text-[var(--muted-foreground)]">
+                                {agent.model || teamModel}
+                              </span>
+                            )}
                             {(agent.skillBindings?.length ?? 0) > 0 && (
                               <span className="text-[10px] text-[var(--muted-foreground)]">
                                 {agent.skillBindings?.length} skills

package/cloud-runtime/standalone/apps/local/app/setup/page.tsx

@@ -4,6 +4,7 @@
 import { useProviderStatus } from "@/hooks/useProviderStatus";
 import { useSetupFlow } from "@/hooks/useSetupFlow";
 import { ProviderStep } from "@/components/setup/ProviderStep";
+import { McpSetupStep } from "@/components/setup/McpSetupStep";
 import { ProjectStep } from "@/components/setup/ProjectStep";
 import { TeamsStep } from "@/components/setup/TeamsStep";
 import { AlertCircle, Loader2 } from "lucide-react";
@@ -42,6 +43,13 @@ export default function SetupPage() {
       )}
 
       {flow.step === 2 && (
+        <McpSetupStep
+          onNext={flow.goNext}
+          onBack={flow.goBack}
+        />
+      )}
+
+      {flow.step === 3 && (
         <ProjectStep
           data={flow.project}
           onChange={flow.setProject}
@@ -50,7 +58,7 @@ export default function SetupPage() {
         />
       )}
 
-      {flow.step === 3 && (
+      {flow.step === 4 && (
         <TeamsStep
           selectedTeams={flow.teams}
           onChange={flow.setTeams}

package/cloud-runtime/standalone/apps/local/bundled-server.ts

@@ -0,0 +1,45 @@
+import http from "http";
+import https from "https";
+import path from "path";
+import type { IncomingMessage, Server as HttpServer } from "http";
+import type { Duplex } from "stream";
+import { createTerminalServerBridge } from "./lib/terminal-server";
+
+const PATCHED_SERVER = Symbol.for("agx.terminalBridgePatched");
+
+type PatchedServer = HttpServer & {
+  emit: HttpServer["emit"];
+  [PATCHED_SERVER]?: boolean;
+};
+
+function installTerminalBridge(server: PatchedServer): PatchedServer {
+  if (server[PATCHED_SERVER]) {
+    return server;
+  }
+
+  server[PATCHED_SERVER] = true;
+  const terminalBridge = createTerminalServerBridge(server);
+  const originalEmit = server.emit.bind(server);
+
+  server.emit = ((event: string, ...args: unknown[]) => {
+    if (event === "upgrade") {
+      const [req, socket, head] = args as [IncomingMessage, Duplex, Buffer];
+      if (terminalBridge.handleUpgrade(req, socket, head)) {
+        return true;
+      }
+    }
+    return originalEmit(event, ...args);
+  }) as HttpServer["emit"];
+
+  return server;
+}
+
+const originalHttpCreateServer = http.createServer.bind(http);
+http.createServer = ((...args: Parameters<typeof http.createServer>) =>
+  installTerminalBridge(originalHttpCreateServer(...args) as PatchedServer)) as typeof http.createServer;
+
+const originalHttpsCreateServer = https.createServer.bind(https);
+https.createServer = ((...args: Parameters<typeof https.createServer>) =>
+  installTerminalBridge(originalHttpsCreateServer(...args) as PatchedServer)) as typeof https.createServer;
+
+require(path.join(__dirname, "server.js"));

package/cloud-runtime/standalone/apps/local/components/ActionToolbar.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 export interface ActionToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
   // A wrapper for group-hover revealed actions
@@ -6,12 +7,14 @@ export interface ActionToolbarProps extends React.HTMLAttributes<HTMLDivElement>
 
 export const ActionToolbar = forwardRef<HTMLDivElement, ActionToolbarProps>(
   ({ children, className = '', ...props }, ref) => {
-    const baseClasses = "absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] shadow-md rounded-lg p-1 z-10 backdrop-blur-sm";
+    const { isTouchLayout } = useInputCapabilities();
+    const visibilityClasses = isTouchLayout ? "opacity-100" : "opacity-0 group-hover:opacity-100";
+    const baseClasses = `absolute top-4 right-4 flex items-center gap-1 ${visibilityClasses} transition-opacity duration-200 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] shadow-md rounded-lg p-1 z-10 backdrop-blur-sm`;
 
     const classes = `${baseClasses} ${className}`.trim();
 
     return (
-      <div ref={ref} className={classes} {...props}>
+      <div ref={ref} className={classes} data-touch-visible={isTouchLayout ? "true" : undefined} {...props}>
         {children}
       </div>
     );