Merge upstream/master into add-gpt-5-4-xhigh-effort

ui/src/App.tsx

@@ -24,6 +24,7 @@ import { Inbox } from "./pages/Inbox";
 import { CompanySettings } from "./pages/CompanySettings";
 import { DesignGuide } from "./pages/DesignGuide";
 import { OrgChart } from "./pages/OrgChart";
+import { NewAgent } from "./pages/NewAgent";
 import { AuthPage } from "./pages/Auth";
 import { BoardClaimPage } from "./pages/BoardClaim";
 import { InviteLandingPage } from "./pages/InviteLanding";
@@ -101,6 +102,7 @@ function boardRoutes() {
       <Route path="agents/active" element={<Agents />} />
       <Route path="agents/paused" element={<Agents />} />
       <Route path="agents/error" element={<Agents />} />
+      <Route path="agents/new" element={<NewAgent />} />
       <Route path="agents/:agentId" element={<AgentDetail />} />
       <Route path="agents/:agentId/:tab" element={<AgentDetail />} />
       <Route path="agents/:agentId/runs/:runId" element={<AgentDetail />} />
@@ -214,6 +216,7 @@ export function App() {
           <Route path="issues" element={<UnprefixedBoardRedirect />} />
           <Route path="issues/:issueId" element={<UnprefixedBoardRedirect />} />
           <Route path="agents" element={<UnprefixedBoardRedirect />} />
+          <Route path="agents/new" element={<UnprefixedBoardRedirect />} />
           <Route path="agents/:agentId" element={<UnprefixedBoardRedirect />} />
           <Route path="agents/:agentId/:tab" element={<UnprefixedBoardRedirect />} />
           <Route path="agents/:agentId/runs/:runId" element={<UnprefixedBoardRedirect />} />

ui/src/adapters/openclaw-gateway/config-fields.tsx

@@ -0,0 +1,217 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import type { AdapterConfigFieldsProps } from "../types";
+import {
+  Field,
+  DraftInput,
+  help,
+} from "../../components/agent-config-primitives";
+
+const inputClass =
+  "w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
+
+function SecretField({
+  label,
+  value,
+  onCommit,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onCommit: (v: string) => void;
+  placeholder?: string;
+}) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <Field label={label}>
+      <div className="relative">
+        <button
+          type="button"
+          onClick={() => setVisible((v) => !v)}
+          className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground/50 hover:text-muted-foreground transition-colors"
+        >
+          {visible ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
+        </button>
+        <DraftInput
+          value={value}
+          onCommit={onCommit}
+          immediate
+          type={visible ? "text" : "password"}
+          className={inputClass + " pl-8"}
+          placeholder={placeholder}
+        />
+      </div>
+    </Field>
+  );
+}
+
+function parseScopes(value: unknown): string {
+  if (Array.isArray(value)) {
+    return value.filter((entry): entry is string => typeof entry === "string").join(", ");
+  }
+  return typeof value === "string" ? value : "";
+}
+
+export function OpenClawGatewayConfigFields({
+  isCreate,
+  values,
+  set,
+  config,
+  eff,
+  mark,
+}: AdapterConfigFieldsProps) {
+  const configuredHeaders =
+    config.headers && typeof config.headers === "object" && !Array.isArray(config.headers)
+      ? (config.headers as Record<string, unknown>)
+      : {};
+  const effectiveHeaders =
+    (eff("adapterConfig", "headers", configuredHeaders) as Record<string, unknown>) ?? {};
+
+  const effectiveGatewayToken = typeof effectiveHeaders["x-openclaw-token"] === "string"
+    ? String(effectiveHeaders["x-openclaw-token"])
+    : typeof effectiveHeaders["x-openclaw-auth"] === "string"
+      ? String(effectiveHeaders["x-openclaw-auth"])
+      : "";
+
+  const commitGatewayToken = (rawValue: string) => {
+    const nextValue = rawValue.trim();
+    const nextHeaders: Record<string, unknown> = { ...effectiveHeaders };
+    if (nextValue) {
+      nextHeaders["x-openclaw-token"] = nextValue;
+      delete nextHeaders["x-openclaw-auth"];
+    } else {
+      delete nextHeaders["x-openclaw-token"];
+      delete nextHeaders["x-openclaw-auth"];
+    }
+    mark("adapterConfig", "headers", Object.keys(nextHeaders).length > 0 ? nextHeaders : undefined);
+  };
+
+  const sessionStrategy = eff(
+    "adapterConfig",
+    "sessionKeyStrategy",
+    String(config.sessionKeyStrategy ?? "fixed"),
+  );
+
+  return (
+    <>
+      <Field label="Gateway URL" hint={help.webhookUrl}>
+        <DraftInput
+          value={
+            isCreate
+              ? values!.url
+              : eff("adapterConfig", "url", String(config.url ?? ""))
+          }
+          onCommit={(v) =>
+            isCreate
+              ? set!({ url: v })
+              : mark("adapterConfig", "url", v || undefined)
+          }
+          immediate
+          className={inputClass}
+          placeholder="ws://127.0.0.1:18789"
+        />
+      </Field>
+
+      {!isCreate && (
+        <>
+          <Field label="Paperclip API URL override">
+            <DraftInput
+              value={
+                eff(
+                  "adapterConfig",
+                  "paperclipApiUrl",
+                  String(config.paperclipApiUrl ?? ""),
+                )
+              }
+              onCommit={(v) => mark("adapterConfig", "paperclipApiUrl", v || undefined)}
+              immediate
+              className={inputClass}
+              placeholder="https://paperclip.example"
+            />
+          </Field>
+
+          <Field label="Session strategy">
+            <select
+              value={sessionStrategy}
+              onChange={(e) => mark("adapterConfig", "sessionKeyStrategy", e.target.value)}
+              className={inputClass}
+            >
+              <option value="fixed">Fixed</option>
+              <option value="issue">Per issue</option>
+              <option value="run">Per run</option>
+            </select>
+          </Field>
+
+          {sessionStrategy === "fixed" && (
+            <Field label="Session key">
+              <DraftInput
+                value={eff("adapterConfig", "sessionKey", String(config.sessionKey ?? "paperclip"))}
+                onCommit={(v) => mark("adapterConfig", "sessionKey", v || undefined)}
+                immediate
+                className={inputClass}
+                placeholder="paperclip"
+              />
+            </Field>
+          )}
+
+          <SecretField
+            label="Gateway auth token (x-openclaw-token)"
+            value={effectiveGatewayToken}
+            onCommit={commitGatewayToken}
+            placeholder="OpenClaw gateway token"
+          />
+
+          <Field label="Role">
+            <DraftInput
+              value={eff("adapterConfig", "role", String(config.role ?? "operator"))}
+              onCommit={(v) => mark("adapterConfig", "role", v || undefined)}
+              immediate
+              className={inputClass}
+              placeholder="operator"
+            />
+          </Field>
+
+          <Field label="Scopes (comma-separated)">
+            <DraftInput
+              value={eff("adapterConfig", "scopes", parseScopes(config.scopes ?? ["operator.admin"]))}
+              onCommit={(v) => {
+                const parsed = v
+                  .split(",")
+                  .map((entry) => entry.trim())
+                  .filter(Boolean);
+                mark("adapterConfig", "scopes", parsed.length > 0 ? parsed : undefined);
+              }}
+              immediate
+              className={inputClass}
+              placeholder="operator.admin"
+            />
+          </Field>
+
+          <Field label="Wait timeout (ms)">
+            <DraftInput
+              value={eff("adapterConfig", "waitTimeoutMs", String(config.waitTimeoutMs ?? "120000"))}
+              onCommit={(v) => {
+                const parsed = Number.parseInt(v.trim(), 10);
+                mark(
+                  "adapterConfig",
+                  "waitTimeoutMs",
+                  Number.isFinite(parsed) && parsed > 0 ? parsed : undefined,
+                );
+              }}
+              immediate
+              className={inputClass}
+              placeholder="120000"
+            />
+          </Field>
+
+          <Field label="Device auth">
+            <div className="text-xs text-muted-foreground leading-relaxed">
+              Always enabled for gateway agents. Paperclip persists a device key during onboarding so pairing approvals
+              remain stable across runs.
+            </div>
+          </Field>
+        </>
+      )}
+    </>
+  );
+}

ui/src/adapters/openclaw-gateway/index.ts

@@ -0,0 +1,12 @@
+import type { UIAdapterModule } from "../types";
+import { parseOpenClawGatewayStdoutLine } from "@paperclipai/adapter-openclaw-gateway/ui";
+import { buildOpenClawGatewayConfig } from "@paperclipai/adapter-openclaw-gateway/ui";
+import { OpenClawGatewayConfigFields } from "./config-fields";
+
+export const openClawGatewayUIAdapter: UIAdapterModule = {
+  type: "openclaw_gateway",
+  label: "OpenClaw Gateway",
+  parseStdoutLine: parseOpenClawGatewayStdoutLine,
+  ConfigFields: OpenClawGatewayConfigFields,
+  buildAdapterConfig: buildOpenClawGatewayConfig,
+};

ui/src/adapters/openclaw/config-fields.tsx

@@ -1,53 +0,0 @@
-import type { AdapterConfigFieldsProps } from "../types";
-import {
-  Field,
-  DraftInput,
-  help,
-} from "../../components/agent-config-primitives";
-
-const inputClass =
-  "w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
-
-export function OpenClawConfigFields({
-  isCreate,
-  values,
-  set,
-  config,
-  eff,
-  mark,
-}: AdapterConfigFieldsProps) {
-  return (
-    <>
-      <Field label="Webhook URL" hint={help.webhookUrl}>
-        <DraftInput
-          value={
-            isCreate
-              ? values!.url
-              : eff("adapterConfig", "url", String(config.url ?? ""))
-          }
-          onCommit={(v) =>
-            isCreate
-              ? set!({ url: v })
-              : mark("adapterConfig", "url", v || undefined)
-          }
-          immediate
-          className={inputClass}
-          placeholder="https://..."
-        />
-      </Field>
-      {!isCreate && (
-        <Field label="Webhook auth header (optional)">
-          <DraftInput
-            value={
-              eff("adapterConfig", "webhookAuthHeader", String(config.webhookAuthHeader ?? ""))
-            }
-            onCommit={(v) => mark("adapterConfig", "webhookAuthHeader", v || undefined)}
-            immediate
-            className={inputClass}
-            placeholder="Bearer <token>"
-          />
-        </Field>
-      )}
-    </>
-  );
-}

ui/src/adapters/openclaw/index.ts

@@ -1,12 +0,0 @@
-import type { UIAdapterModule } from "../types";
-import { parseOpenClawStdoutLine } from "@paperclipai/adapter-openclaw/ui";
-import { buildOpenClawConfig } from "@paperclipai/adapter-openclaw/ui";
-import { OpenClawConfigFields } from "./config-fields";
-
-export const openClawUIAdapter: UIAdapterModule = {
-  type: "openclaw",
-  label: "OpenClaw",
-  parseStdoutLine: parseOpenClawStdoutLine,
-  ConfigFields: OpenClawConfigFields,
-  buildAdapterConfig: buildOpenClawConfig,
-};

ui/src/adapters/opencode-local/config-fields.tsx

@@ -8,7 +8,7 @@ import { ChoosePathButton } from "../../components/PathInstructionsModal";
 const inputClass =
   "w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
 const instructionsFileHint =
-  "Absolute path to a markdown file (e.g. AGENTS.md) that defines this agent's behavior. Injected into the prompt at runtime.";
+  "Absolute path to a markdown file (e.g. AGENTS.md) that defines this agent's behavior. Injected into the system prompt at runtime.";
 
 export function OpenCodeLocalConfigFields({
   isCreate,

ui/src/adapters/pi-local/config-fields.tsx

@@ -0,0 +1,47 @@
+import type { AdapterConfigFieldsProps } from "../types";
+import {
+  Field,
+  DraftInput,
+} from "../../components/agent-config-primitives";
+import { ChoosePathButton } from "../../components/PathInstructionsModal";
+
+const inputClass =
+  "w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
+const instructionsFileHint =
+  "Absolute path to a markdown file (e.g. AGENTS.md) that defines this agent's behavior. Injected into the system prompt at runtime.";
+
+export function PiLocalConfigFields({
+  isCreate,
+  values,
+  set,
+  config,
+  eff,
+  mark,
+}: AdapterConfigFieldsProps) {
+  return (
+    <Field label="Agent instructions file" hint={instructionsFileHint}>
+      <div className="flex items-center gap-2">
+        <DraftInput
+          value={
+            isCreate
+              ? values!.instructionsFilePath ?? ""
+              : eff(
+                  "adapterConfig",
+                  "instructionsFilePath",
+                  String(config.instructionsFilePath ?? ""),
+                )
+          }
+          onCommit={(v) =>
+            isCreate
+              ? set!({ instructionsFilePath: v })
+              : mark("adapterConfig", "instructionsFilePath", v || undefined)
+          }
+          immediate
+          className={inputClass}
+          placeholder="/absolute/path/to/AGENTS.md"
+        />
+        <ChoosePathButton />
+      </div>
+    </Field>
+  );
+}

ui/src/adapters/pi-local/index.ts

@@ -0,0 +1,12 @@
+import type { UIAdapterModule } from "../types";
+import { parsePiStdoutLine } from "@paperclipai/adapter-pi-local/ui";
+import { PiLocalConfigFields } from "./config-fields";
+import { buildPiLocalConfig } from "@paperclipai/adapter-pi-local/ui";
+
+export const piLocalUIAdapter: UIAdapterModule = {
+  type: "pi_local",
+  label: "Pi (local)",
+  parseStdoutLine: parsePiStdoutLine,
+  ConfigFields: PiLocalConfigFields,
+  buildAdapterConfig: buildPiLocalConfig,
+};

ui/src/adapters/registry.ts

@@ -3,12 +3,22 @@ import { claudeLocalUIAdapter } from "./claude-local";
 import { codexLocalUIAdapter } from "./codex-local";
 import { cursorLocalUIAdapter } from "./cursor";
 import { openCodeLocalUIAdapter } from "./opencode-local";
-import { openClawUIAdapter } from "./openclaw";
+import { piLocalUIAdapter } from "./pi-local";
+import { openClawGatewayUIAdapter } from "./openclaw-gateway";
 import { processUIAdapter } from "./process";
 import { httpUIAdapter } from "./http";
 
 const adaptersByType = new Map<string, UIAdapterModule>(
-  [claudeLocalUIAdapter, codexLocalUIAdapter, openCodeLocalUIAdapter, cursorLocalUIAdapter, openClawUIAdapter, processUIAdapter, httpUIAdapter].map((a) => [a.type, a]),
+  [
+    claudeLocalUIAdapter,
+    codexLocalUIAdapter,
+    openCodeLocalUIAdapter,
+    piLocalUIAdapter,
+    cursorLocalUIAdapter,
+    openClawGatewayUIAdapter,
+    processUIAdapter,
+    httpUIAdapter,
+  ].map((a) => [a.type, a]),
 );
 
 export function getUIAdapter(type: string): UIAdapterModule {

ui/src/adapters/transcript.ts

@@ -3,9 +3,9 @@ import type { TranscriptEntry, StdoutLineParser } from "./types";
 type RunLogChunk = { ts: string; stream: "stdout" | "stderr" | "system"; chunk: string };
 
 function appendTranscriptEntry(entries: TranscriptEntry[], entry: TranscriptEntry) {
-  if (entry.kind === "thinking" && entry.delta) {
+  if ((entry.kind === "thinking" || entry.kind === "assistant") && entry.delta) {
     const last = entries[entries.length - 1];
-    if (last && last.kind === "thinking" && last.delta) {
+    if (last && last.kind === entry.kind && last.delta) {
       last.text += entry.text;
       last.ts = entry.ts;
       return;

ui/src/api/access.ts

@@ -13,6 +13,7 @@ type InviteSummary = {
   onboardingTextUrl?: string;
   skillIndexPath?: string;
   skillIndexUrl?: string;
+  inviteMessage?: string | null;
 };
 
 type AcceptInviteInput =
@@ -39,7 +40,21 @@ type AgentJoinRequestAccepted = JoinRequest & {
 
 type InviteOnboardingManifest = {
   invite: InviteSummary;
-  onboarding: Record<string, unknown>;
+  onboarding: {
+    inviteMessage?: string | null;
+    connectivity?: {
+      guidance?: string;
+      connectionCandidates?: string[];
+      testResolutionEndpoint?: {
+        method?: string;
+        path?: string;
+        url?: string;
+      };
+    };
+    textInstructions?: {
+      url?: string;
+    };
+  };
 };
 
 type BoardClaimStatus = {
@@ -49,22 +64,38 @@ type BoardClaimStatus = {
   claimedByUserId: string | null;
 };
 
+type CompanyInviteCreated = {
+  id: string;
+  token: string;
+  inviteUrl: string;
+  expiresAt: string;
+  allowedJoinTypes: "human" | "agent" | "both";
+  onboardingTextPath?: string;
+  onboardingTextUrl?: string;
+  inviteMessage?: string | null;
+};
+
 export const accessApi = {
   createCompanyInvite: (
     companyId: string,
     input: {
       allowedJoinTypes?: "human" | "agent" | "both";
-      expiresInHours?: number;
       defaultsPayload?: Record<string, unknown> | null;
+      agentMessage?: string | null;
     } = {},
   ) =>
-    api.post<{
-      id: string;
-      token: string;
-      inviteUrl: string;
-      expiresAt: string;
-      allowedJoinTypes: "human" | "agent" | "both";
-    }>(`/companies/${companyId}/invites`, input),
+    api.post<CompanyInviteCreated>(`/companies/${companyId}/invites`, input),
+
+  createOpenClawInvitePrompt: (
+    companyId: string,
+    input: {
+      agentMessage?: string | null;
+    } = {},
+  ) =>
+    api.post<CompanyInviteCreated>(
+      `/companies/${companyId}/openclaw/invite-prompt`,
+      input,
+    ),
 
   getInvite: (token: string) => api.get<InviteSummary>(`/invites/${token}`),
   getInviteOnboarding: (token: string) =>

ui/src/api/agents.ts

@@ -117,7 +117,10 @@ export const agentsApi = {
     api.get<AgentTaskSession[]>(agentPath(id, companyId, "/task-sessions")),
   resetSession: (id: string, taskKey?: string | null, companyId?: string) =>
     api.post<void>(agentPath(id, companyId, "/runtime-state/reset-session"), { taskKey: taskKey ?? null }),
-  adapterModels: (type: string) => api.get<AdapterModel[]>(`/adapters/${type}/models`),
+  adapterModels: (companyId: string, type: string) =>
+    api.get<AdapterModel[]>(
+      `/companies/${encodeURIComponent(companyId)}/adapters/${encodeURIComponent(type)}/models`,
+    ),
   testEnvironment: (
     companyId: string,
     type: string,

ui/src/api/issues.ts

@@ -9,6 +9,8 @@ export const issuesApi = {
       projectId?: string;
       assigneeAgentId?: string;
       assigneeUserId?: string;
+      touchedByUserId?: string;
+      unreadForUserId?: string;
       labelId?: string;
       q?: string;
     },
@@ -18,6 +20,8 @@ export const issuesApi = {
     if (filters?.projectId) params.set("projectId", filters.projectId);
     if (filters?.assigneeAgentId) params.set("assigneeAgentId", filters.assigneeAgentId);
     if (filters?.assigneeUserId) params.set("assigneeUserId", filters.assigneeUserId);
+    if (filters?.touchedByUserId) params.set("touchedByUserId", filters.touchedByUserId);
+    if (filters?.unreadForUserId) params.set("unreadForUserId", filters.unreadForUserId);
     if (filters?.labelId) params.set("labelId", filters.labelId);
     if (filters?.q) params.set("q", filters.q);
     const qs = params.toString();
@@ -28,6 +32,7 @@ export const issuesApi = {
     api.post<IssueLabel>(`/companies/${companyId}/labels`, data),
   deleteLabel: (id: string) => api.delete<IssueLabel>(`/labels/${id}`),
   get: (id: string) => api.get<Issue>(`/issues/${id}`),
+  markRead: (id: string) => api.post<{ id: string; lastReadAt: Date }>(`/issues/${id}/read`, {}),
   create: (companyId: string, data: Record<string, unknown>) =>
     api.post<Issue>(`/companies/${companyId}/issues`, data),
   update: (id: string, data: Record<string, unknown>) => api.patch<Issue>(`/issues/${id}`, data),

ui/src/components/ActiveAgentsPanel.tsx

@@ -21,9 +21,13 @@ interface FeedItem {
   agentName: string;
   text: string;
   tone: FeedTone;
+  dedupeKey: string;
+  streamingKind?: "assistant" | "thinking";
 }
 
 const MAX_FEED_ITEMS = 40;
+const MAX_FEED_TEXT_LENGTH = 220;
+const MAX_STREAMING_TEXT_LENGTH = 4000;
 const MIN_DASHBOARD_RUNS = 4;
 
 function readString(value: unknown): string | null {
@@ -70,17 +74,25 @@ function createFeedItem(
   text: string,
   tone: FeedTone,
   nextId: number,
+  options?: {
+    streamingKind?: "assistant" | "thinking";
+    preserveWhitespace?: boolean;
+  },
 ): FeedItem | null {
-  const trimmed = text.trim();
-  if (!trimmed) return null;
+  if (!text.trim()) return null;
+  const base = options?.preserveWhitespace ? text : text.trim();
+  const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
+  const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
   return {
     id: `${run.id}:${nextId}`,
     ts,
     runId: run.id,
     agentId: run.agentId,
     agentName: run.agentName,
-    text: trimmed.slice(0, 220),
+    text: normalized,
     tone,
+    dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
+    streamingKind: options?.streamingKind,
   };
 }
 
@@ -97,16 +109,28 @@ function parseStdoutChunk(
   pendingByRun.set(pendingKey, split.pop() ?? "");
   const adapter = getUIAdapter(run.adapterType);
 
-  const summarized: Array<{ text: string; tone: FeedTone; thinkingDelta?: boolean }> = [];
+  const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
   const appendSummary = (entry: TranscriptEntry) => {
+    if (entry.kind === "assistant" && entry.delta) {
+      const text = entry.text;
+      if (!text.trim()) return;
+      const last = summarized[summarized.length - 1];
+      if (last && last.streamingKind === "assistant") {
+        last.text += text;
+      } else {
+        summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
+      }
+      return;
+    }
+
     if (entry.kind === "thinking" && entry.delta) {
       const text = entry.text;
       if (!text.trim()) return;
       const last = summarized[summarized.length - 1];
-      if (last && last.thinkingDelta) {
+      if (last && last.streamingKind === "thinking") {
         last.text += text;
       } else {
-        summarized.push({ text: `[thinking] ${text}`, tone: "info", thinkingDelta: true });
+        summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
       }
       return;
     }
@@ -132,7 +156,10 @@ function parseStdoutChunk(
   }
 
   for (const summary of summarized) {
-    const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++);
+    const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
+      streamingKind: summary.streamingKind,
+      preserveWhitespace: !!summary.streamingKind,
+    });
     if (item) items.push(item);
   }
 
@@ -222,8 +249,38 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
       if (items.length === 0) return;
       setFeedByRun((prev) => {
         const next = new Map(prev);
-        const existing = next.get(runId) ?? [];
-        next.set(runId, [...existing, ...items].slice(-MAX_FEED_ITEMS));
+        const existing = [...(next.get(runId) ?? [])];
+        for (const item of items) {
+          if (seenKeysRef.current.has(item.dedupeKey)) continue;
+          seenKeysRef.current.add(item.dedupeKey);
+
+          const last = existing[existing.length - 1];
+          if (
+            item.streamingKind &&
+            last &&
+            last.runId === item.runId &&
+            last.streamingKind === item.streamingKind
+          ) {
+            const mergedText = `${last.text}${item.text}`;
+            const nextText =
+              mergedText.length > MAX_STREAMING_TEXT_LENGTH
+                ? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
+                : mergedText;
+            existing[existing.length - 1] = {
+              ...last,
+              ts: item.ts,
+              text: nextText,
+              dedupeKey: last.dedupeKey,
+            };
+            continue;
+          }
+
+          existing.push(item);
+        }
+        if (seenKeysRef.current.size > 6000) {
+          seenKeysRef.current.clear();
+        }
+        next.set(runId, existing.slice(-MAX_FEED_ITEMS));
         return next;
       });
     };
@@ -265,7 +322,7 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
           const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
           if (seenKeysRef.current.has(dedupeKey)) return;
           seenKeysRef.current.add(dedupeKey);
-          if (seenKeysRef.current.size > 2000) seenKeysRef.current.clear();
+          if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
           const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
           const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
           if (item) appendItems(run.id, [item]);
@@ -277,7 +334,7 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
           const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
           if (seenKeysRef.current.has(dedupeKey)) return;
           seenKeysRef.current.add(dedupeKey);
-          if (seenKeysRef.current.size > 2000) seenKeysRef.current.clear();
+          if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
           const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
           const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
           if (item) appendItems(run.id, [item]);
@@ -404,7 +461,7 @@ function AgentRunCard({
           <Link
             to={`/issues/${issue?.identifier ?? run.issueId}`}
             className={cn(
-              "hover:underline min-w-0 truncate",
+              "hover:underline min-w-0 line-clamp-2 min-h-[2rem]",
               isActive ? "text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300" : "text-muted-foreground hover:text-foreground",
             )}
             title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}

ui/src/components/AgentConfigForm.tsx

@@ -16,7 +16,6 @@ import {
   DEFAULT_CODEX_LOCAL_MODEL,
 } from "@paperclipai/adapter-codex-local";
 import { DEFAULT_CURSOR_LOCAL_MODEL } from "@paperclipai/adapter-cursor-local";
-import { DEFAULT_OPENCODE_LOCAL_MODEL } from "@paperclipai/adapter-opencode-local";
 import {
   Popover,
   PopoverContent,
@@ -25,6 +24,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { FolderOpen, Heart, ChevronDown, X } from "lucide-react";
 import { cn } from "../lib/utils";
+import { extractModelName, extractProviderId } from "../lib/model-utils";
 import { queryKeys } from "../lib/queryKeys";
 import { useCompany } from "../context/CompanyContext";
 import {
@@ -42,6 +42,7 @@ import { getUIAdapter } from "../adapters";
 import { ClaudeLocalAdvancedFields } from "../adapters/claude-local/config-fields";
 import { MarkdownEditor } from "./MarkdownEditor";
 import { ChoosePathButton } from "./PathInstructionsModal";
+import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
 
 /* ---- Create mode values ---- */
 
@@ -133,7 +134,7 @@ const codexThinkingEffortOptions = [
   { id: "xhigh", label: "X-High" },
 ] as const;
 
-const opencodeVariantOptions = [
+const openCodeThinkingEffortOptions = [
   { id: "", label: "Auto" },
   { id: "minimal", label: "Minimal" },
   { id: "low", label: "Low" },
@@ -281,9 +282,15 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
   const uiAdapter = useMemo(() => getUIAdapter(adapterType), [adapterType]);
 
   // Fetch adapter models for the effective adapter type
-  const { data: fetchedModels } = useQuery({
-    queryKey: ["adapter-models", adapterType],
-    queryFn: () => agentsApi.adapterModels(adapterType),
+  const {
+    data: fetchedModels,
+    error: fetchedModelsError,
+  } = useQuery({
+    queryKey: selectedCompanyId
+      ? queryKeys.agents.adapterModels(selectedCompanyId, adapterType)
+      : ["agents", "none", "adapter-models", adapterType],
+    queryFn: () => agentsApi.adapterModels(selectedCompanyId!, adapterType),
+    enabled: Boolean(selectedCompanyId),
   });
   const models = fetchedModels ?? externalModels ?? [];
 
@@ -341,17 +348,17 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
       ? "modelReasoningEffort"
       : adapterType === "cursor"
         ? "mode"
-      : adapterType === "opencode_local"
-        ? "variant"
-        : "effort";
+        : adapterType === "opencode_local"
+          ? "variant"
+          : "effort";
   const thinkingEffortOptions =
     adapterType === "codex_local"
       ? codexThinkingEffortOptions
       : adapterType === "cursor"
         ? cursorModeOptions
-      : adapterType === "opencode_local"
-        ? opencodeVariantOptions
-        : claudeThinkingEffortOptions;
+        : adapterType === "opencode_local"
+          ? openCodeThinkingEffortOptions
+          : claudeThinkingEffortOptions;
   const currentThinkingEffort = isCreate
     ? val!.thinkingEffort
     : adapterType === "codex_local"
@@ -362,8 +369,8 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
         )
       : adapterType === "cursor"
         ? eff("adapterConfig", "mode", String(config.mode ?? ""))
-      : adapterType === "opencode_local"
-        ? eff("adapterConfig", "variant", String(config.variant ?? ""))
+        : adapterType === "opencode_local"
+          ? eff("adapterConfig", "variant", String(config.variant ?? ""))
       : eff("adapterConfig", "effort", String(config.effort ?? ""));
   const codexSearchEnabled = adapterType === "codex_local"
     ? (isCreate ? Boolean(val!.search) : eff("adapterConfig", "search", Boolean(config.search)))
@@ -436,7 +443,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                     "promptTemplate",
                     String(config.promptTemplate ?? ""),
                   )}
-                  onChange={(v) => mark("adapterConfig", "promptTemplate", v || undefined)}
+                  onChange={(v) => mark("adapterConfig", "promptTemplate", v ?? "")}
                   placeholder="You are agent {{ agent.name }}. Your role is {{ agent.role }}..."
                   contentClassName="min-h-[88px] text-sm font-mono"
                   imageUploadHandler={async (file) => {
@@ -485,7 +492,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                   } else if (t === "cursor") {
                     nextValues.model = DEFAULT_CURSOR_LOCAL_MODEL;
                   } else if (t === "opencode_local") {
-                    nextValues.model = DEFAULT_OPENCODE_LOCAL_MODEL;
+                    nextValues.model = "";
                   }
                   set!(nextValues);
                 } else {
@@ -500,9 +507,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                           ? DEFAULT_CODEX_LOCAL_MODEL
                           : t === "cursor"
                             ? DEFAULT_CURSOR_LOCAL_MODEL
-                          : t === "opencode_local"
-                            ? DEFAULT_OPENCODE_LOCAL_MODEL
-                            : "",
+                          : "",
                       effort: "",
                       modelReasoningEffort: "",
                       variant: "",
@@ -607,9 +612,9 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                       ? "codex"
                       : adapterType === "cursor"
                         ? "agent"
-                      : adapterType === "opencode_local"
-                        ? "opencode"
-                        : "claude"
+                        : adapterType === "opencode_local"
+                          ? "opencode"
+                          : "claude"
                   }
                 />
               </Field>
@@ -624,7 +629,17 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                 }
                 open={modelOpen}
                 onOpenChange={setModelOpen}
+                allowDefault={adapterType !== "opencode_local"}
+                required={adapterType === "opencode_local"}
+                groupByProvider={adapterType === "opencode_local"}
               />
+              {fetchedModelsError && (
+                <p className="text-xs text-destructive">
+                  {fetchedModelsError instanceof Error
+                    ? fetchedModelsError.message
+                    : "Failed to load adapter models."}
+                </p>
+              )}
 
               <ThinkingEffortDropdown
                 value={currentThinkingEffort}
@@ -900,7 +915,10 @@ function AdapterTypeDropdown({
     <Popover>
       <PopoverTrigger asChild>
         <button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-sm hover:bg-accent/50 transition-colors w-full justify-between">
-          <span>{adapterLabels[value] ?? value}</span>
+          <span className="inline-flex items-center gap-1.5">
+            {value === "opencode_local" ? <OpenCodeLogoIcon className="h-3.5 w-3.5" /> : null}
+            <span>{adapterLabels[value] ?? value}</span>
+          </span>
           <ChevronDown className="h-3 w-3 text-muted-foreground" />
         </button>
       </PopoverTrigger>
@@ -920,7 +938,10 @@ function AdapterTypeDropdown({
               if (!item.comingSoon) onChange(item.value);
             }}
           >
-            <span>{item.label}</span>
+            <span className="inline-flex items-center gap-1.5">
+              {item.value === "opencode_local" ? <OpenCodeLogoIcon className="h-3.5 w-3.5" /> : null}
+              <span>{item.label}</span>
+            </span>
             {item.comingSoon && (
               <span className="text-[10px] text-muted-foreground">Coming soon</span>
             )}
@@ -1186,20 +1207,56 @@ function ModelDropdown({
   onChange,
   open,
   onOpenChange,
+  allowDefault,
+  required,
+  groupByProvider,
 }: {
   models: AdapterModel[];
   value: string;
   onChange: (id: string) => void;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  allowDefault: boolean;
+  required: boolean;
+  groupByProvider: boolean;
 }) {
   const [modelSearch, setModelSearch] = useState("");
   const selected = models.find((m) => m.id === value);
-  const filteredModels = models.filter((m) => {
-    if (!modelSearch.trim()) return true;
-    const q = modelSearch.toLowerCase();
-    return m.id.toLowerCase().includes(q) || m.label.toLowerCase().includes(q);
-  });
+  const filteredModels = useMemo(() => {
+    return models.filter((m) => {
+      if (!modelSearch.trim()) return true;
+      const q = modelSearch.toLowerCase();
+      const provider = extractProviderId(m.id) ?? "";
+      return (
+        m.id.toLowerCase().includes(q) ||
+        m.label.toLowerCase().includes(q) ||
+        provider.toLowerCase().includes(q)
+      );
+    });
+  }, [models, modelSearch]);
+  const groupedModels = useMemo(() => {
+    if (!groupByProvider) {
+      return [
+        {
+          provider: "models",
+          entries: [...filteredModels].sort((a, b) => a.id.localeCompare(b.id)),
+        },
+      ];
+    }
+    const map = new Map<string, AdapterModel[]>();
+    for (const model of filteredModels) {
+      const provider = extractProviderId(model.id) ?? "other";
+      const group = map.get(provider) ?? [];
+      group.push(model);
+      map.set(provider, group);
+    }
+    return Array.from(map.entries())
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([provider, entries]) => ({
+        provider,
+        entries: [...entries].sort((a, b) => a.id.localeCompare(b.id)),
+      }));
+  }, [filteredModels, groupByProvider]);
 
   return (
     <Field label="Model" hint={help.model}>
@@ -1213,7 +1270,9 @@ function ModelDropdown({
         <PopoverTrigger asChild>
           <button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-sm hover:bg-accent/50 transition-colors w-full justify-between">
             <span className={cn(!value && "text-muted-foreground")}>
-              {selected ? selected.label : value || "Default"}
+              {selected
+                ? selected.label
+                : value || (allowDefault ? "Default" : required ? "Select model (required)" : "Select model")}
             </span>
             <ChevronDown className="h-3 w-3 text-muted-foreground" />
           </button>
@@ -1227,33 +1286,45 @@ function ModelDropdown({
             autoFocus
           />
           <div className="max-h-[240px] overflow-y-auto">
-            <button
-              className={cn(
-                "flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
-                !value && "bg-accent",
-              )}
-              onClick={() => {
-                onChange("");
-                onOpenChange(false);
-              }}
-            >
-              Default
-            </button>
-            {filteredModels.map((m) => (
+            {allowDefault && (
               <button
-                key={m.id}
                 className={cn(
-                  "flex items-center justify-between w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
-                  m.id === value && "bg-accent",
+                  "flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
+                  !value && "bg-accent",
                 )}
                 onClick={() => {
-                  onChange(m.id);
+                  onChange("");
                   onOpenChange(false);
                 }}
               >
-                <span>{m.label}</span>
-                <span className="text-xs text-muted-foreground font-mono">{m.id}</span>
+                Default
               </button>
+            )}
+            {groupedModels.map((group) => (
+              <div key={group.provider} className="mb-1 last:mb-0">
+                {groupByProvider && (
+                  <div className="px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground">
+                    {group.provider} ({group.entries.length})
+                  </div>
+                )}
+                {group.entries.map((m) => (
+                  <button
+                    key={m.id}
+                    className={cn(
+                      "flex items-center w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
+                      m.id === value && "bg-accent",
+                    )}
+                    onClick={() => {
+                      onChange(m.id);
+                      onOpenChange(false);
+                    }}
+                  >
+                    <span className="block w-full text-left truncate" title={m.id}>
+                      {groupByProvider ? extractModelName(m.id) : m.label}
+                    </span>
+                  </button>
+                ))}
+              </div>
             ))}
             {filteredModels.length === 0 && (
               <p className="px-2 py-1.5 text-xs text-muted-foreground">No models found.</p>

ui/src/components/AgentProperties.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@/lib/router";
-import type { Agent, AgentRuntimeState } from "@paperclipai/shared";
+import { AGENT_ROLE_LABELS, type Agent, type AgentRuntimeState } from "@paperclipai/shared";
 import { agentsApi } from "../api/agents";
 import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
@@ -18,12 +18,14 @@ const adapterLabels: Record<string, string> = {
   claude_local: "Claude (local)",
   codex_local: "Codex (local)",
   opencode_local: "OpenCode (local)",
-  openclaw: "OpenClaw",
+  openclaw_gateway: "OpenClaw Gateway",
   cursor: "Cursor (local)",
   process: "Process",
   http: "HTTP",
 };
 
+const roleLabels = AGENT_ROLE_LABELS as Record<string, string>;
+
 function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center gap-3 py-1.5">
@@ -51,7 +53,7 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
           <StatusBadge status={agent.status} />
         </PropertyRow>
         <PropertyRow label="Role">
-          <span className="text-sm">{agent.role}</span>
+          <span className="text-sm">{roleLabels[agent.role] ?? agent.role}</span>
         </PropertyRow>
         {agent.title && (
           <PropertyRow label="Title">

ui/src/components/CommandPalette.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "@/lib/router";
 import { useQuery } from "@tanstack/react-query";
 import { useCompany } from "../context/CompanyContext";
 import { useDialog } from "../context/DialogContext";
+import { useSidebar } from "../context/SidebarContext";
 import { issuesApi } from "../api/issues";
 import { agentsApi } from "../api/agents";
 import { projectsApi } from "../api/projects";
@@ -37,6 +38,7 @@ export function CommandPalette() {
   const navigate = useNavigate();
   const { selectedCompanyId } = useCompany();
   const { openNewIssue, openNewAgent } = useDialog();
+  const { isMobile, setSidebarOpen } = useSidebar();
   const searchQuery = query.trim();
 
   useEffect(() => {
@@ -44,11 +46,12 @@ export function CommandPalette() {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         setOpen(true);
+        if (isMobile) setSidebarOpen(false);
       }
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [isMobile, setSidebarOpen]);
 
   useEffect(() => {
     if (!open) setQuery("");
@@ -94,7 +97,10 @@ export function CommandPalette() {
   );
 
   return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
+    <CommandDialog open={open} onOpenChange={(v) => {
+        setOpen(v);
+        if (v && isMobile) setSidebarOpen(false);
+      }}>
       <CommandInput
         placeholder="Search issues, agents, projects..."
         value={query}
@@ -187,7 +193,7 @@ export function CommandPalette() {
                   <span className="flex-1 truncate">{issue.title}</span>
                   {issue.assigneeAgentId && (() => {
                     const name = agentName(issue.assigneeAgentId);
-                    return name ? <Identity name={name} size="sm" className="ml-2" /> : null;
+                    return name ? <Identity name={name} size="sm" className="ml-2 hidden sm:inline-flex" /> : null;
                   })()}
                 </CommandItem>
               ))}

ui/src/components/CommentThread.tsx

@@ -2,12 +2,13 @@ import { memo, useEffect, useMemo, useRef, useState, type ChangeEvent } from "re
 import { Link, useLocation } from "react-router-dom";
 import type { IssueComment, Agent } from "@paperclipai/shared";
 import { Button } from "@/components/ui/button";
-import { Paperclip } from "lucide-react";
+import { Check, Copy, Paperclip } from "lucide-react";
 import { Identity } from "./Identity";
 import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
 import { MarkdownBody } from "./MarkdownBody";
 import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
 import { StatusBadge } from "./StatusBadge";
+import { AgentIcon } from "./AgentIconPicker";
 import { formatDateTime } from "../lib/utils";
 
 interface CommentWithRunMeta extends IssueComment {
@@ -91,6 +92,25 @@ function parseReassignment(target: string): CommentReassignment | null {
   return null;
 }
 
+function CopyMarkdownButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      className="text-muted-foreground hover:text-foreground transition-colors"
+      title="Copy as markdown"
+      onClick={() => {
+        navigator.clipboard.writeText(text).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        });
+      }}
+    >
+      {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+    </button>
+  );
+}
+
 type TimelineItem =
   | { kind: "comment"; id: string; createdAtMs: number; comment: CommentWithRunMeta }
   | { kind: "run"; id: string; createdAtMs: number; run: LinkedRunItem };
@@ -159,12 +179,15 @@ const TimelineList = memo(function TimelineList({
               ) : (
                 <Identity name="You" size="sm" />
               )}
-              <a
-                href={`#comment-${comment.id}`}
-                className="text-xs text-muted-foreground hover:text-foreground hover:underline transition-colors"
-              >
-                {formatDateTime(comment.createdAt)}
-              </a>
+              <span className="flex items-center gap-1.5">
+                <a
+                  href={`#comment-${comment.id}`}
+                  className="text-xs text-muted-foreground hover:text-foreground hover:underline transition-colors"
+                >
+                  {formatDateTime(comment.createdAt)}
+                </a>
+                <CopyMarkdownButton text={comment.body} />
+              </span>
             </div>
             <MarkdownBody className="text-sm">{comment.body}</MarkdownBody>
             {comment.runId && (
@@ -385,6 +408,32 @@ export function CommentThread({
               emptyMessage="No assignees found."
               onChange={setReassignTarget}
               className="text-xs h-8"
+              renderTriggerValue={(option) => {
+                if (!option) return <span className="text-muted-foreground">Assignee</span>;
+                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+                const agent = agentId ? agentMap?.get(agentId) : null;
+                return (
+                  <>
+                    {agent ? (
+                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    ) : null}
+                    <span className="truncate">{option.label}</span>
+                  </>
+                );
+              }}
+              renderOption={(option) => {
+                if (!option.id) return <span className="truncate">{option.label}</span>;
+                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+                const agent = agentId ? agentMap?.get(agentId) : null;
+                return (
+                  <>
+                    {agent ? (
+                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    ) : null}
+                    <span className="truncate">{option.label}</span>
+                  </>
+                );
+              }}
             />
           )}
           <Button size="sm" disabled={!canSubmit} onClick={handleSubmit}>

ui/src/components/InlineEntitySelector.tsx

@@ -21,6 +21,8 @@ interface InlineEntitySelectorProps {
   className?: string;
   renderTriggerValue?: (option: InlineEntityOption | null) => ReactNode;
   renderOption?: (option: InlineEntityOption, isSelected: boolean) => ReactNode;
+  /** Skip the Portal so the popover stays in the DOM tree (fixes scroll inside Dialogs). */
+  disablePortal?: boolean;
 }
 
 export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySelectorProps>(
@@ -37,6 +39,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
       className,
       renderTriggerValue,
       renderOption,
+      disablePortal,
     },
     ref,
   ) {
@@ -45,6 +48,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
     const [highlightedIndex, setHighlightedIndex] = useState(0);
     const inputRef = useRef<HTMLInputElement>(null);
     const shouldPreventCloseAutoFocusRef = useRef(false);
+    const isPointerDownRef = useRef(false);
 
     const allOptions = useMemo<InlineEntityOption[]>(
       () => [{ id: "", label: noneLabel, searchText: noneLabel }, ...options],
@@ -97,7 +101,11 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
               "inline-flex min-w-0 items-center gap-1 rounded-md border border-border bg-muted/40 px-2 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               className,
             )}
-            onFocus={() => setOpen(true)}
+            onPointerDown={() => { isPointerDownRef.current = true; }}
+            onFocus={() => {
+              if (!isPointerDownRef.current) setOpen(true);
+              isPointerDownRef.current = false;
+            }}
           >
             {renderTriggerValue
               ? renderTriggerValue(currentOption)
@@ -106,11 +114,19 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
         </PopoverTrigger>
         <PopoverContent
           align="start"
+          side="bottom"
           collisionPadding={16}
           className="w-[min(20rem,calc(100vw-2rem))] p-1"
+          disablePortal={disablePortal}
           onOpenAutoFocus={(event) => {
             event.preventDefault();
-            inputRef.current?.focus();
+            // On touch devices, don't auto-focus the search input to avoid
+            // opening the virtual keyboard which reshapes the viewport and
+            // pushes the popover off-screen.
+            const isTouch = window.matchMedia("(pointer: coarse)").matches;
+            if (!isTouch) {
+              inputRef.current?.focus();
+            }
           }}
           onCloseAutoFocus={(event) => {
             if (!shouldPreventCloseAutoFocusRef.current) return;
@@ -158,10 +174,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
               }
             }}
           />
-          <div
-            className="max-h-56 overflow-y-auto overscroll-contain py-1 touch-pan-y"
-            style={{ WebkitOverflowScrolling: "touch" }}
-          >
+          <div className="max-h-56 overflow-y-auto overscroll-contain py-1 touch-pan-y">
             {filteredOptions.length === 0 ? (
               <p className="px-2 py-2 text-xs text-muted-foreground">{emptyMessage}</p>
             ) : (
@@ -173,7 +186,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
                     key={option.id || "__none__"}
                     type="button"
                     className={cn(
-                      "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm touch-pan-y",
+                      "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm touch-manipulation",
                       isHighlighted && "bg-accent",
                     )}
                     onMouseEnter={() => setHighlightedIndex(index)}

ui/src/components/IssueProperties.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Link } from "@/lib/router";
 import type { Issue } from "@paperclipai/shared";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -9,6 +9,7 @@ import { projectsApi } from "../api/projects";
 import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
 import { useProjectOrder } from "../hooks/useProjectOrder";
+import { getRecentAssigneeIds, sortAgentsByRecency, trackRecentAssignee } from "../lib/recent-assignees";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { Identity } from "./Identity";
@@ -181,6 +182,12 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
     return project ? projectUrl(project) : `/projects/${id}`;
   };
 
+  const recentAssigneeIds = useMemo(() => getRecentAssigneeIds(), [assigneeOpen]);
+  const sortedAgents = useMemo(
+    () => sortAgentsByRecency((agents ?? []).filter((a) => a.status !== "terminated"), recentAssigneeIds),
+    [agents, recentAssigneeIds],
+  );
+
   const assignee = issue.assigneeAgentId
     ? agents?.find((a) => a.id === issue.assigneeAgentId)
     : null;
@@ -342,8 +349,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
             {creatorUserLabel ? `Assign to ${creatorUserLabel === "Me" ? "me" : creatorUserLabel}` : "Assign to requester"}
           </button>
         )}
-        {(agents ?? [])
-          .filter((a) => a.status !== "terminated")
+        {sortedAgents
           .filter((a) => {
             if (!assigneeSearch.trim()) return true;
             const q = assigneeSearch.toLowerCase();
@@ -356,7 +362,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
               "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
               a.id === issue.assigneeAgentId && "bg-accent"
             )}
-            onClick={() => { onUpdate({ assigneeAgentId: a.id, assigneeUserId: null }); setAssigneeOpen(false); }}
+            onClick={() => { trackRecentAssignee(a.id); onUpdate({ assigneeAgentId: a.id, assigneeUserId: null }); setAssigneeOpen(false); }}
           >
             <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
             {a.name}

ui/src/components/IssuesList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useDeferredValue, useMemo, useState, useCallback, useRef } from "react";
+import { useEffect, useMemo, useState, useCallback, useRef } from "react";
 import { Link } from "@/lib/router";
 import { useQuery } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
@@ -17,7 +17,7 @@ import { Input } from "@/components/ui/input";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
-import { CircleDot, Plus, Filter, ArrowUpDown, Layers, Check, X, ChevronRight, List, Columns3, User, Search } from "lucide-react";
+import { CircleDot, Plus, Filter, ArrowUpDown, Layers, Check, X, ChevronRight, List, Columns3, User, Search, ArrowDown } from "lucide-react";
 import { KanbanBoard } from "./KanbanBoard";
 import type { Issue } from "@paperclipai/shared";
 
@@ -142,6 +142,8 @@ interface IssuesListProps {
   projectId?: string;
   viewStateKey: string;
   initialAssignees?: string[];
+  initialSearch?: string;
+  onSearchChange?: (search: string) => void;
   onUpdateIssue: (id: string, data: Record<string, unknown>) => void;
 }
 
@@ -154,6 +156,8 @@ export function IssuesList({
   projectId,
   viewStateKey,
   initialAssignees,
+  initialSearch,
+  onSearchChange,
   onUpdateIssue,
 }: IssuesListProps) {
   const { selectedCompanyId } = useCompany();
@@ -170,9 +174,20 @@ export function IssuesList({
   });
   const [assigneePickerIssueId, setAssigneePickerIssueId] = useState<string | null>(null);
   const [assigneeSearch, setAssigneeSearch] = useState("");
-  const [issueSearch, setIssueSearch] = useState("");
-  const deferredIssueSearch = useDeferredValue(issueSearch);
-  const normalizedIssueSearch = deferredIssueSearch.trim();
+  const [issueSearch, setIssueSearch] = useState(initialSearch ?? "");
+  const [debouncedIssueSearch, setDebouncedIssueSearch] = useState(issueSearch);
+  const normalizedIssueSearch = debouncedIssueSearch.trim();
+
+  useEffect(() => {
+    setIssueSearch(initialSearch ?? "");
+  }, [initialSearch]);
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setDebouncedIssueSearch(issueSearch);
+    }, 300);
+    return () => window.clearTimeout(timeoutId);
+  }, [issueSearch]);
 
   // Reload view state from localStorage when company changes (scopedKey changes).
   const prevScopedKey = useRef(scopedKey);
@@ -218,6 +233,24 @@ export function IssuesList({
 
   const activeFilterCount = countActiveFilters(viewState);
 
+  const [showScrollBottom, setShowScrollBottom] = useState(false);
+  useEffect(() => {
+    const el = document.getElementById("main-content");
+    if (!el) return;
+    const check = () => {
+      const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+      setShowScrollBottom(distanceFromBottom > 300);
+    };
+    check();
+    el.addEventListener("scroll", check, { passive: true });
+    return () => el.removeEventListener("scroll", check);
+  }, [filtered.length]);
+
+  const scrollToBottom = useCallback(() => {
+    const el = document.getElementById("main-content");
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  }, []);
+
   const groupedContent = useMemo(() => {
     if (viewState.groupBy === "none") {
       return [{ key: "__all", label: null as string | null, items: filtered }];
@@ -273,7 +306,10 @@ export function IssuesList({
             <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={issueSearch}
-              onChange={(e) => setIssueSearch(e.target.value)}
+              onChange={(e) => {
+                setIssueSearch(e.target.value);
+                onSearchChange?.(e.target.value);
+              }}
               placeholder="Search issues..."
               className="pl-7 text-xs sm:text-sm"
               aria-label="Search issues"
@@ -706,6 +742,15 @@ export function IssuesList({
           </Collapsible>
         ))
       )}
+      {showScrollBottom && (
+        <button
+          onClick={scrollToBottom}
+          className="fixed bottom-6 right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background shadow-md hover:bg-accent transition-colors"
+          aria-label="Scroll to bottom"
+        >
+          <ArrowDown className="h-4 w-4" />
+        </button>
+      )}
     </div>
   );
 }

ui/src/components/LiveRunWidget.tsx

@@ -26,9 +26,13 @@ interface FeedItem {
   agentName: string;
   text: string;
   tone: FeedTone;
+  dedupeKey: string;
+  streamingKind?: "assistant" | "thinking";
 }
 
 const MAX_FEED_ITEMS = 80;
+const MAX_FEED_TEXT_LENGTH = 220;
+const MAX_STREAMING_TEXT_LENGTH = 4000;
 const LOG_POLL_INTERVAL_MS = 2000;
 const LOG_READ_LIMIT_BYTES = 256_000;
 
@@ -81,17 +85,25 @@ function createFeedItem(
   text: string,
   tone: FeedTone,
   nextId: number,
+  options?: {
+    streamingKind?: "assistant" | "thinking";
+    preserveWhitespace?: boolean;
+  },
 ): FeedItem | null {
-  const trimmed = text.trim();
-  if (!trimmed) return null;
+  if (!text.trim()) return null;
+  const base = options?.preserveWhitespace ? text : text.trim();
+  const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
+  const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
   return {
     id: `${run.id}:${nextId}`,
     ts,
     runId: run.id,
     agentId: run.agentId,
     agentName: run.agentName,
-    text: trimmed.slice(0, 220),
+    text: normalized,
     tone,
+    dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
+    streamingKind: options?.streamingKind,
   };
 }
 
@@ -108,16 +120,28 @@ function parseStdoutChunk(
   pendingByRun.set(pendingKey, split.pop() ?? "");
   const adapter = getUIAdapter(run.adapterType);
 
-  const summarized: Array<{ text: string; tone: FeedTone; thinkingDelta?: boolean }> = [];
+  const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
   const appendSummary = (entry: TranscriptEntry) => {
+    if (entry.kind === "assistant" && entry.delta) {
+      const text = entry.text;
+      if (!text.trim()) return;
+      const last = summarized[summarized.length - 1];
+      if (last && last.streamingKind === "assistant") {
+        last.text += text;
+      } else {
+        summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
+      }
+      return;
+    }
+
     if (entry.kind === "thinking" && entry.delta) {
       const text = entry.text;
       if (!text.trim()) return;
       const last = summarized[summarized.length - 1];
-      if (last && last.thinkingDelta) {
+      if (last && last.streamingKind === "thinking") {
         last.text += text;
       } else {
-        summarized.push({ text: `[thinking] ${text}`, tone: "info", thinkingDelta: true });
+        summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
       }
       return;
     }
@@ -133,6 +157,9 @@ function parseStdoutChunk(
     if (!trimmed) continue;
     const parsed = adapter.parseStdoutLine(trimmed, ts);
     if (parsed.length === 0) {
+      if (run.adapterType === "openclaw_gateway") {
+        continue;
+      }
       const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
       if (fallback) items.push(fallback);
       continue;
@@ -143,7 +170,10 @@ function parseStdoutChunk(
   }
 
   for (const summary of summarized) {
-    const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++);
+    const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
+      streamingKind: summary.streamingKind,
+      preserveWhitespace: !!summary.streamingKind,
+    });
     if (item) items.push(item);
   }
 
@@ -276,18 +306,39 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
   const appendItems = (items: FeedItem[]) => {
     if (items.length === 0) return;
     setFeed((prev) => {
-      const deduped: FeedItem[] = [];
+      const next = [...prev];
       for (const item of items) {
-        const key = `feed:${item.runId}:${item.ts}:${item.tone}:${item.text}`;
-        if (seenKeysRef.current.has(key)) continue;
-        seenKeysRef.current.add(key);
-        deduped.push(item);
+        if (seenKeysRef.current.has(item.dedupeKey)) continue;
+        seenKeysRef.current.add(item.dedupeKey);
+
+        const last = next[next.length - 1];
+        if (
+          item.streamingKind &&
+          last &&
+          last.runId === item.runId &&
+          last.streamingKind === item.streamingKind
+        ) {
+          const mergedText = `${last.text}${item.text}`;
+          const nextText =
+            mergedText.length > MAX_STREAMING_TEXT_LENGTH
+              ? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
+              : mergedText;
+          next[next.length - 1] = {
+            ...last,
+            ts: item.ts,
+            text: nextText,
+            dedupeKey: last.dedupeKey,
+          };
+          continue;
+        }
+
+        next.push(item);
       }
-      if (deduped.length === 0) return prev;
       if (seenKeysRef.current.size > 6000) {
         seenKeysRef.current.clear();
       }
-      return [...prev, ...deduped].slice(-MAX_FEED_ITEMS);
+      if (next.length === prev.length) return prev;
+      return next.slice(-MAX_FEED_ITEMS);
     });
   };
 

ui/src/components/MarkdownBody.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import { isValidElement, useEffect, useId, useState, type CSSProperties, type ReactNode } from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { parseProjectMentionHref } from "@paperclipai/shared";
@@ -10,6 +10,30 @@ interface MarkdownBodyProps {
   className?: string;
 }
 
+let mermaidLoaderPromise: Promise<typeof import("mermaid").default> | null = null;
+
+function loadMermaid() {
+  if (!mermaidLoaderPromise) {
+    mermaidLoaderPromise = import("mermaid").then((module) => module.default);
+  }
+  return mermaidLoaderPromise;
+}
+
+function flattenText(value: ReactNode): string {
+  if (value == null) return "";
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (Array.isArray(value)) return value.map((item) => flattenText(item)).join("");
+  return "";
+}
+
+function extractMermaidSource(children: ReactNode): string | null {
+  if (!isValidElement(children)) return null;
+  const childProps = children.props as { className?: unknown; children?: ReactNode };
+  if (typeof childProps.className !== "string") return null;
+  if (!/\blanguage-mermaid\b/i.test(childProps.className)) return null;
+  return flattenText(childProps.children).replace(/\n$/, "");
+}
+
 function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
   const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
   if (!match) return null;
@@ -33,6 +57,61 @@ function mentionChipStyle(color: string | null): CSSProperties | undefined {
   };
 }
 
+function MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: boolean }) {
+  const renderId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [svg, setSvg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    setSvg(null);
+    setError(null);
+
+    loadMermaid()
+      .then(async (mermaid) => {
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: darkMode ? "dark" : "default",
+          fontFamily: "inherit",
+          suppressErrorRendering: true,
+        });
+        const rendered = await mermaid.render(`paperclip-mermaid-${renderId}`, source);
+        if (!active) return;
+        setSvg(rendered.svg);
+      })
+      .catch((err) => {
+        if (!active) return;
+        const message =
+          err instanceof Error && err.message
+            ? err.message
+            : "Failed to render Mermaid diagram.";
+        setError(message);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [darkMode, renderId, source]);
+
+  return (
+    <div className="paperclip-mermaid">
+      {svg ? (
+        <div dangerouslySetInnerHTML={{ __html: svg }} />
+      ) : (
+        <>
+          <p className={cn("paperclip-mermaid-status", error && "paperclip-mermaid-status-error")}>
+            {error ? `Unable to render Mermaid diagram: ${error}` : "Rendering Mermaid diagram..."}
+          </p>
+          <pre className="paperclip-mermaid-source">
+            <code className="language-mermaid">{source}</code>
+          </pre>
+        </>
+      )}
+    </div>
+  );
+}
+
 export function MarkdownBody({ children, className }: MarkdownBodyProps) {
   const { theme } = useTheme();
   return (
@@ -46,6 +125,13 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
       <Markdown
         remarkPlugins={[remarkGfm]}
         components={{
+          pre: ({ node: _node, children: preChildren, ...preProps }) => {
+            const mermaidSource = extractMermaidSource(preChildren);
+            if (mermaidSource) {
+              return <MermaidDiagramBlock source={mermaidSource} darkMode={theme === "dark"} />;
+            }
+            return <pre {...preProps}>{preChildren}</pre>;
+          },
           a: ({ href, children: linkChildren }) => {
             const parsed = href ? parseProjectMentionHref(href) : null;
             if (parsed) {

ui/src/components/NewAgentDialog.tsx

@@ -1,53 +1,86 @@
-import { useState, useEffect } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState, type ComponentType } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@/lib/router";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
 import { agentsApi } from "../api/agents";
 import { queryKeys } from "../lib/queryKeys";
-import { AGENT_ROLES } from "@paperclipai/shared";
 import {
   Dialog,
   DialogContent,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Minimize2,
-  Maximize2,
-  Shield,
-  User,
+  ArrowLeft,
+  Bot,
+  Code,
+  MousePointer2,
+  Sparkles,
+  Terminal,
 } from "lucide-react";
-import { cn, agentUrl } from "../lib/utils";
-import { roleLabels } from "./agent-config-primitives";
-import { AgentConfigForm, type CreateConfigValues } from "./AgentConfigForm";
-import { defaultCreateValues } from "./agent-config-defaults";
-import { getUIAdapter } from "../adapters";
-import { AgentIcon } from "./AgentIconPicker";
+import { cn } from "@/lib/utils";
+import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
+
+type AdvancedAdapterType =
+  | "claude_local"
+  | "codex_local"
+  | "opencode_local"
+  | "pi_local"
+  | "cursor"
+  | "openclaw_gateway";
+
+const ADVANCED_ADAPTER_OPTIONS: Array<{
+  value: AdvancedAdapterType;
+  label: string;
+  desc: string;
+  icon: ComponentType<{ className?: string }>;
+  recommended?: boolean;
+}> = [
+  {
+    value: "claude_local",
+    label: "Claude Code",
+    icon: Sparkles,
+    desc: "Local Claude agent",
+    recommended: true,
+  },
+  {
+    value: "codex_local",
+    label: "Codex",
+    icon: Code,
+    desc: "Local Codex agent",
+    recommended: true,
+  },
+  {
+    value: "opencode_local",
+    label: "OpenCode",
+    icon: OpenCodeLogoIcon,
+    desc: "Local multi-provider agent",
+  },
+  {
+    value: "pi_local",
+    label: "Pi",
+    icon: Terminal,
+    desc: "Local Pi agent",
+  },
+  {
+    value: "cursor",
+    label: "Cursor",
+    icon: MousePointer2,
+    desc: "Local Cursor agent",
+  },
+  {
+    value: "openclaw_gateway",
+    label: "OpenClaw Gateway",
+    icon: Bot,
+    desc: "Invoke OpenClaw via gateway protocol",
+  },
+];
 
 export function NewAgentDialog() {
-  const { newAgentOpen, closeNewAgent } = useDialog();
-  const { selectedCompanyId, selectedCompany } = useCompany();
-  const queryClient = useQueryClient();
+  const { newAgentOpen, closeNewAgent, openNewIssue } = useDialog();
+  const { selectedCompanyId } = useCompany();
   const navigate = useNavigate();
-  const [expanded, setExpanded] = useState(true);
-
-  // Identity
-  const [name, setName] = useState("");
-  const [title, setTitle] = useState("");
-  const [role, setRole] = useState("general");
-  const [reportsTo, setReportsTo] = useState("");
-
-  // Config values (managed by AgentConfigForm)
-  const [configValues, setConfigValues] = useState<CreateConfigValues>(defaultCreateValues);
-
-  // Popover states
-  const [roleOpen, setRoleOpen] = useState(false);
-  const [reportsToOpen, setReportsToOpen] = useState(false);
+  const [showAdvancedCards, setShowAdvancedCards] = useState(false);
 
   const { data: agents } = useQuery({
     queryKey: queryKeys.agents.list(selectedCompanyId!),
@@ -55,240 +88,127 @@ export function NewAgentDialog() {
     enabled: !!selectedCompanyId && newAgentOpen,
   });
 
-  const { data: adapterModels } = useQuery({
-    queryKey: ["adapter-models", configValues.adapterType],
-    queryFn: () => agentsApi.adapterModels(configValues.adapterType),
-    enabled: newAgentOpen,
-  });
+  const ceoAgent = (agents ?? []).find((a) => a.role === "ceo");
 
-  const isFirstAgent = !agents || agents.length === 0;
-  const effectiveRole = isFirstAgent ? "ceo" : role;
-
-  // Auto-fill for CEO
-  useEffect(() => {
-    if (newAgentOpen && isFirstAgent) {
-      if (!name) setName("CEO");
-      if (!title) setTitle("CEO");
-    }
-  }, [newAgentOpen, isFirstAgent]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const createAgent = useMutation({
-    mutationFn: (data: Record<string, unknown>) =>
-      agentsApi.hire(selectedCompanyId!, data),
-    onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
-      reset();
-      closeNewAgent();
-      navigate(agentUrl(result.agent));
-    },
-  });
-
-  function reset() {
-    setName("");
-    setTitle("");
-    setRole("general");
-    setReportsTo("");
-    setConfigValues(defaultCreateValues);
-    setExpanded(true);
-  }
-
-  function buildAdapterConfig() {
-    const adapter = getUIAdapter(configValues.adapterType);
-    return adapter.buildAdapterConfig(configValues);
-  }
-
-  function handleSubmit() {
-    if (!selectedCompanyId || !name.trim()) return;
-    createAgent.mutate({
-      name: name.trim(),
-      role: effectiveRole,
-      ...(title.trim() ? { title: title.trim() } : {}),
-      ...(reportsTo ? { reportsTo } : {}),
-      adapterType: configValues.adapterType,
-      adapterConfig: buildAdapterConfig(),
-      runtimeConfig: {
-        heartbeat: {
-          enabled: configValues.heartbeatEnabled,
-          intervalSec: configValues.intervalSec,
-          wakeOnDemand: true,
-          cooldownSec: 10,
-          maxConcurrentRuns: 1,
-        },
-      },
-      budgetMonthlyCents: 0,
+  function handleAskCeo() {
+    closeNewAgent();
+    openNewIssue({
+      assigneeAgentId: ceoAgent?.id,
+      title: "Create a new agent",
+      description: "(type in what kind of agent you want here)",
     });
   }
 
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      handleSubmit();
-    }
+  function handleAdvancedConfig() {
+    setShowAdvancedCards(true);
   }
 
-  const currentReportsTo = (agents ?? []).find((a) => a.id === reportsTo);
+  function handleAdvancedAdapterPick(adapterType: AdvancedAdapterType) {
+    closeNewAgent();
+    setShowAdvancedCards(false);
+    navigate(`/agents/new?adapterType=${encodeURIComponent(adapterType)}`);
+  }
 
   return (
     <Dialog
       open={newAgentOpen}
       onOpenChange={(open) => {
-        if (!open) { reset(); closeNewAgent(); }
+        if (!open) {
+          setShowAdvancedCards(false);
+          closeNewAgent();
+        }
       }}
     >
       <DialogContent
         showCloseButton={false}
-        className={cn("p-0 gap-0 overflow-hidden", expanded ? "sm:max-w-2xl" : "sm:max-w-lg")}
-        onKeyDown={handleKeyDown}
+        className="sm:max-w-md p-0 gap-0 overflow-hidden"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            {selectedCompany && (
-              <span className="bg-muted px-1.5 py-0.5 rounded text-xs font-medium">
-                {selectedCompany.name.slice(0, 3).toUpperCase()}
-              </span>
-            )}
-            <span className="text-muted-foreground/60">&rsaquo;</span>
-            <span>New agent</span>
-          </div>
-          <div className="flex items-center gap-1">
-            <Button variant="ghost" size="icon-xs" className="text-muted-foreground" onClick={() => setExpanded(!expanded)}>
-              {expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
-            </Button>
-            <Button variant="ghost" size="icon-xs" className="text-muted-foreground" onClick={() => { reset(); closeNewAgent(); }}>
-              <span className="text-lg leading-none">&times;</span>
-            </Button>
-          </div>
-        </div>
-
-        <div className="overflow-y-auto max-h-[70vh]">
-          {/* Name */}
-          <div className="px-4 pt-4 pb-2 shrink-0">
-            <input
-              className="w-full text-lg font-semibold bg-transparent outline-none placeholder:text-muted-foreground/50"
-              placeholder="Agent name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              autoFocus
-            />
-          </div>
-
-          {/* Title */}
-          <div className="px-4 pb-2">
-            <input
-              className="w-full bg-transparent outline-none text-sm text-muted-foreground placeholder:text-muted-foreground/40"
-              placeholder="Title (e.g. VP of Engineering)"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-            />
-          </div>
-
-          {/* Property chips: Role + Reports To */}
-          <div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
-            {/* Role */}
-            <Popover open={roleOpen} onOpenChange={setRoleOpen}>
-              <PopoverTrigger asChild>
-                <button
-                  className={cn(
-                    "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
-                    isFirstAgent && "opacity-60 cursor-not-allowed"
-                  )}
-                  disabled={isFirstAgent}
-                >
-                  <Shield className="h-3 w-3 text-muted-foreground" />
-                  {roleLabels[effectiveRole] ?? effectiveRole}
-                </button>
-              </PopoverTrigger>
-              <PopoverContent className="w-36 p-1" align="start">
-                {AGENT_ROLES.map((r) => (
-                  <button
-                    key={r}
-                    className={cn(
-                      "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
-                      r === role && "bg-accent"
-                    )}
-                    onClick={() => { setRole(r); setRoleOpen(false); }}
-                  >
-                    {roleLabels[r] ?? r}
-                  </button>
-                ))}
-              </PopoverContent>
-            </Popover>
-
-            {/* Reports To */}
-            <Popover open={reportsToOpen} onOpenChange={setReportsToOpen}>
-              <PopoverTrigger asChild>
-                <button
-                  className={cn(
-                    "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
-                    isFirstAgent && "opacity-60 cursor-not-allowed"
-                  )}
-                  disabled={isFirstAgent}
-                >
-                  {currentReportsTo ? (
-                    <>
-                      <AgentIcon icon={currentReportsTo.icon} className="h-3 w-3 text-muted-foreground" />
-                      {`Reports to ${currentReportsTo.name}`}
-                    </>
-                  ) : (
-                    <>
-                      <User className="h-3 w-3 text-muted-foreground" />
-                      {isFirstAgent ? "Reports to: N/A (CEO)" : "Reports to..."}
-                    </>
-                  )}
-                </button>
-              </PopoverTrigger>
-              <PopoverContent className="w-48 p-1" align="start">
-                <button
-                  className={cn(
-                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
-                    !reportsTo && "bg-accent"
-                  )}
-                  onClick={() => { setReportsTo(""); setReportsToOpen(false); }}
-                >
-                  No manager
-                </button>
-                {(agents ?? []).map((a) => (
-                  <button
-                    key={a.id}
-                    className={cn(
-                      "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
-                      a.id === reportsTo && "bg-accent"
-                    )}
-                    onClick={() => { setReportsTo(a.id); setReportsToOpen(false); }}
-                  >
-                    <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
-                    {a.name}
-                    <span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
-                  </button>
-                ))}
-              </PopoverContent>
-            </Popover>
-          </div>
-
-          {/* Shared config form (adapter + heartbeat) */}
-          <AgentConfigForm
-            mode="create"
-            values={configValues}
-            onChange={(patch) => setConfigValues((prev) => ({ ...prev, ...patch }))}
-            adapterModels={adapterModels}
-          />
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border">
-          <span className="text-xs text-muted-foreground">
-            {isFirstAgent ? "This will be the CEO" : ""}
-          </span>
+          <span className="text-sm text-muted-foreground">Add a new agent</span>
           <Button
-            size="sm"
-            disabled={!name.trim() || createAgent.isPending}
-            onClick={handleSubmit}
+            variant="ghost"
+            size="icon-xs"
+            className="text-muted-foreground"
+            onClick={() => {
+              setShowAdvancedCards(false);
+              closeNewAgent();
+            }}
           >
-            {createAgent.isPending ? "Creating…" : "Create agent"}
+            <span className="text-lg leading-none">&times;</span>
           </Button>
         </div>
+
+        <div className="p-6 space-y-6">
+          {!showAdvancedCards ? (
+            <>
+              {/* Recommendation */}
+              <div className="text-center space-y-3">
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-accent">
+                  <Sparkles className="h-6 w-6 text-foreground" />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  We recommend letting your CEO handle agent setup — they know the
+                  org structure and can configure reporting, permissions, and
+                  adapters.
+                </p>
+              </div>
+
+              <Button className="w-full" size="lg" onClick={handleAskCeo}>
+                <Bot className="h-4 w-4 mr-2" />
+                Ask the CEO to create a new agent
+              </Button>
+
+              {/* Advanced link */}
+              <div className="text-center">
+                <button
+                  className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
+                  onClick={handleAdvancedConfig}
+                >
+                  I want advanced configuration myself
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <button
+                  className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  onClick={() => setShowAdvancedCards(false)}
+                >
+                  <ArrowLeft className="h-3.5 w-3.5" />
+                  Back
+                </button>
+                <p className="text-sm text-muted-foreground">
+                  Choose your adapter type for advanced setup.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                {ADVANCED_ADAPTER_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    className={cn(
+                      "flex flex-col items-center gap-1.5 rounded-md border border-border p-3 text-xs transition-colors hover:bg-accent/50 relative"
+                    )}
+                    onClick={() => handleAdvancedAdapterPick(opt.value)}
+                  >
+                    {opt.recommended && (
+                      <span className="absolute -top-1.5 right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
+                        Recommended
+                      </span>
+                    )}
+                    <opt.icon className="h-4 w-4" />
+                    <span className="font-medium">{opt.label}</span>
+                    <span className="text-muted-foreground text-[10px]">
+                      {opt.desc}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
       </DialogContent>
     </Dialog>
   );

ui/src/components/NewIssueDialog.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect, useRef, useCallback, useMemo, type ChangeEvent } f
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
-import { useToast } from "../context/ToastContext";
 import { issuesApi } from "../api/issues";
 import { projectsApi } from "../api/projects";
 import { agentsApi } from "../api/agents";
@@ -10,6 +9,7 @@ import { authApi } from "../api/auth";
 import { assetsApi } from "../api/assets";
 import { queryKeys } from "../lib/queryKeys";
 import { useProjectOrder } from "../hooks/useProjectOrder";
+import { getRecentAssigneeIds, sortAgentsByRecency, trackRecentAssignee } from "../lib/recent-assignees";
 import {
   Dialog,
   DialogContent,
@@ -36,6 +36,7 @@ import {
   Paperclip,
 } from "lucide-react";
 import { cn } from "../lib/utils";
+import { extractProviderIdWithFallback } from "../lib/model-utils";
 import { issueStatusText, issueStatusTextDefault, priorityColor, priorityColorDefault } from "../lib/status-colors";
 import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
 import { AgentIcon } from "./AgentIconPicker";
@@ -116,6 +117,8 @@ function buildAssigneeAdapterOverrides(input: {
       adapterConfig.variant = input.thinkingEffortOverride;
     } else if (adapterType === "claude_local") {
       adapterConfig.effort = input.thinkingEffortOverride;
+    } else if (adapterType === "opencode_local") {
+      adapterConfig.variant = input.thinkingEffortOverride;
     }
   }
   if (adapterType === "claude_local" && input.chrome) {
@@ -168,7 +171,6 @@ const priorities = [
 export function NewIssueDialog() {
   const { newIssueOpen, newIssueDefaults, closeNewIssue } = useDialog();
   const { companies, selectedCompanyId, selectedCompany } = useCompany();
-  const { pushToast } = useToast();
   const queryClient = useQueryClient();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
@@ -249,27 +251,23 @@ export function NewIssueDialog() {
   }, [agents, orderedProjects]);
 
   const { data: assigneeAdapterModels } = useQuery({
-    queryKey: ["adapter-models", assigneeAdapterType],
-    queryFn: () => agentsApi.adapterModels(assigneeAdapterType!),
-    enabled: !!effectiveCompanyId && newIssueOpen && supportsAssigneeOverrides,
+    queryKey:
+      effectiveCompanyId && assigneeAdapterType
+        ? queryKeys.agents.adapterModels(effectiveCompanyId, assigneeAdapterType)
+        : ["agents", "none", "adapter-models", assigneeAdapterType ?? "none"],
+    queryFn: () => agentsApi.adapterModels(effectiveCompanyId!, assigneeAdapterType!),
+    enabled: Boolean(effectiveCompanyId) && newIssueOpen && supportsAssigneeOverrides,
   });
 
   const createIssue = useMutation({
     mutationFn: ({ companyId, ...data }: { companyId: string } & Record<string, unknown>) =>
       issuesApi.create(companyId, data),
-    onSuccess: (issue) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(effectiveCompanyId!) });
       if (draftTimer.current) clearTimeout(draftTimer.current);
       clearDraft();
       reset();
       closeNewIssue();
-      pushToast({
-        dedupeKey: `activity:issue.created:${issue.id}`,
-        title: `${issue.identifier ?? "Issue"} created`,
-        body: issue.title,
-        tone: "success",
-        action: { label: `View ${issue.identifier ?? "issue"}`, href: `/issues/${issue.identifier ?? issue.id}` },
-      });
     },
   });
 
@@ -327,7 +325,18 @@ export function NewIssueDialog() {
     setDialogCompanyId(selectedCompanyId);
 
     const draft = loadDraft();
-    if (draft && draft.title.trim()) {
+    if (newIssueDefaults.title) {
+      setTitle(newIssueDefaults.title);
+      setDescription(newIssueDefaults.description ?? "");
+      setStatus(newIssueDefaults.status ?? "todo");
+      setPriority(newIssueDefaults.priority ?? "");
+      setProjectId(newIssueDefaults.projectId ?? "");
+      setAssigneeId(newIssueDefaults.assigneeAgentId ?? "");
+      setAssigneeModelOverride("");
+      setAssigneeThinkingEffort("");
+      setAssigneeChrome(false);
+      setAssigneeUseProjectWorkspace(true);
+    } else if (draft && draft.title.trim()) {
       setTitle(draft.title);
       setDescription(draft.description);
       setStatus(draft.status || "todo");
@@ -365,7 +374,7 @@ export function NewIssueDialog() {
         ? ISSUE_THINKING_EFFORT_OPTIONS.codex_local
         : assigneeAdapterType === "opencode_local"
           ? ISSUE_THINKING_EFFORT_OPTIONS.opencode_local
-        : ISSUE_THINKING_EFFORT_OPTIONS.claude_local;
+          : ISSUE_THINKING_EFFORT_OPTIONS.claude_local;
     if (!validThinkingValues.some((option) => option.value === assigneeThinkingEffort)) {
       setAssigneeThinkingEffort("");
     }
@@ -474,16 +483,18 @@ export function NewIssueDialog() {
       : assigneeAdapterType === "opencode_local"
         ? ISSUE_THINKING_EFFORT_OPTIONS.opencode_local
       : ISSUE_THINKING_EFFORT_OPTIONS.claude_local;
+  const recentAssigneeIds = useMemo(() => getRecentAssigneeIds(), [newIssueOpen]);
   const assigneeOptions = useMemo<InlineEntityOption[]>(
     () =>
-      (agents ?? [])
-        .filter((agent) => agent.status !== "terminated")
-        .map((agent) => ({
-          id: agent.id,
-          label: agent.name,
-          searchText: `${agent.name} ${agent.role} ${agent.title ?? ""}`,
-        })),
-    [agents],
+      sortAgentsByRecency(
+        (agents ?? []).filter((agent) => agent.status !== "terminated"),
+        recentAssigneeIds,
+      ).map((agent) => ({
+        id: agent.id,
+        label: agent.name,
+        searchText: `${agent.name} ${agent.role} ${agent.title ?? ""}`,
+      })),
+    [agents, recentAssigneeIds],
   );
   const projectOptions = useMemo<InlineEntityOption[]>(
     () =>
@@ -495,12 +506,21 @@ export function NewIssueDialog() {
     [orderedProjects],
   );
   const modelOverrideOptions = useMemo<InlineEntityOption[]>(
-    () =>
-      (assigneeAdapterModels ?? []).map((model) => ({
-        id: model.id,
-        label: model.label,
-        searchText: model.id,
-      })),
+    () => {
+      return [...(assigneeAdapterModels ?? [])]
+        .sort((a, b) => {
+          const providerA = extractProviderIdWithFallback(a.id);
+          const providerB = extractProviderIdWithFallback(b.id);
+          const byProvider = providerA.localeCompare(providerB);
+          if (byProvider !== 0) return byProvider;
+          return a.id.localeCompare(b.id);
+        })
+        .map((model) => ({
+          id: model.id,
+          label: model.label,
+          searchText: `${model.id} ${extractProviderIdWithFallback(model.id)}`,
+        }));
+    },
     [assigneeAdapterModels],
   );
 
@@ -521,6 +541,18 @@ export function NewIssueDialog() {
             : "sm:max-w-lg"
         )}
         onKeyDown={handleKeyDown}
+        onPointerDownOutside={(event) => {
+          // Radix Dialog's modal DismissableLayer calls preventDefault() on
+          // pointerdown events that originate outside the Dialog DOM tree.
+          // Popover portals render at the body level (outside the Dialog), so
+          // touch events on popover content get their default prevented — which
+          // kills scroll gesture recognition on mobile.  Telling Radix "this
+          // event is handled" skips that preventDefault, restoring touch scroll.
+          const target = event.detail.originalEvent.target as HTMLElement | null;
+          if (target?.closest("[data-radix-popper-content-wrapper]")) {
+            event.preventDefault();
+          }
+        }}
       >
         {/* Header bar */}
         <div className="flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0">
@@ -628,18 +660,19 @@ export function NewIssueDialog() {
         </div>
 
         <div className="px-4 pb-2 shrink-0">
-          <div className="overflow-x-auto">
-            <div className="inline-flex min-w-max items-center gap-2 text-sm text-muted-foreground">
+          <div className="overflow-x-auto overscroll-x-contain">
+            <div className="inline-flex items-center gap-2 text-sm text-muted-foreground flex-wrap sm:flex-nowrap sm:min-w-max">
               <span>For</span>
               <InlineEntitySelector
                 ref={assigneeSelectorRef}
                 value={assigneeId}
                 options={assigneeOptions}
                 placeholder="Assignee"
+                disablePortal
                 noneLabel="No assignee"
                 searchPlaceholder="Search assignees..."
                 emptyMessage="No assignees found."
-                onChange={setAssigneeId}
+                onChange={(id) => { if (id) trackRecentAssignee(id); setAssigneeId(id); }}
                 onConfirm={() => {
                   projectSelectorRef.current?.focus();
                 }}
@@ -670,6 +703,7 @@ export function NewIssueDialog() {
                 value={projectId}
                 options={projectOptions}
                 placeholder="Project"
+                disablePortal
                 noneLabel="No project"
                 searchPlaceholder="Search projects..."
                 emptyMessage="No projects found."
@@ -725,6 +759,7 @@ export function NewIssueDialog() {
                     value={assigneeModelOverride}
                     options={modelOverrideOptions}
                     placeholder="Default model"
+                    disablePortal
                     noneLabel="Default model"
                     searchPlaceholder="Search models..."
                     emptyMessage="No models found."

ui/src/components/OnboardingWizard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useCallback } from "react";
+import { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import type { AdapterEnvironmentTestResult } from "@paperclipai/shared";
@@ -17,6 +17,7 @@ import {
 } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 import { cn } from "../lib/utils";
+import { extractModelName, extractProviderIdWithFallback } from "../lib/model-utils";
 import { getUIAdapter } from "../adapters";
 import { defaultCreateValues } from "./agent-config-defaults";
 import {
@@ -24,10 +25,10 @@ import {
   DEFAULT_CODEX_LOCAL_MODEL
 } from "@paperclipai/adapter-codex-local";
 import { DEFAULT_CURSOR_LOCAL_MODEL } from "@paperclipai/adapter-cursor-local";
-import { DEFAULT_OPENCODE_LOCAL_MODEL } from "@paperclipai/adapter-opencode-local";
 import { AsciiArtAnimation } from "./AsciiArtAnimation";
 import { ChoosePathButton } from "./PathInstructionsModal";
 import { HintIcon } from "./agent-config-primitives";
+import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
 import {
   Building2,
   Bot,
@@ -37,7 +38,6 @@ import {
   ArrowLeft,
   ArrowRight,
   Terminal,
-  Globe,
   Sparkles,
   MousePointer2,
   Check,
@@ -52,10 +52,11 @@ type AdapterType =
   | "claude_local"
   | "codex_local"
   | "opencode_local"
+  | "pi_local"
   | "cursor"
   | "process"
   | "http"
-  | "openclaw";
+  | "openclaw_gateway";
 
 const DEFAULT_TASK_DESCRIPTION = `Setup yourself as the CEO. Use the ceo persona found here: [https://github.com/paperclipai/companies/blob/main/default/ceo/AGENTS.md](https://github.com/paperclipai/companies/blob/main/default/ceo/AGENTS.md)
 
@@ -76,6 +77,7 @@ export function OnboardingWizard() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [modelOpen, setModelOpen] = useState(false);
+  const [modelSearch, setModelSearch] = useState("");
 
   // Step 1
   const [companyName, setCompanyName] = useState("");
@@ -149,10 +151,18 @@ export function OnboardingWizard() {
     if (step === 3) autoResizeTextarea();
   }, [step, taskDescription, autoResizeTextarea]);
 
-  const { data: adapterModels } = useQuery({
-    queryKey: ["adapter-models", adapterType],
-    queryFn: () => agentsApi.adapterModels(adapterType),
-    enabled: onboardingOpen && step === 2
+  const {
+    data: adapterModels,
+    error: adapterModelsError,
+    isLoading: adapterModelsLoading,
+    isFetching: adapterModelsFetching,
+  } = useQuery({
+    queryKey:
+      createdCompanyId
+        ? queryKeys.agents.adapterModels(createdCompanyId, adapterType)
+        : ["agents", "none", "adapter-models", adapterType],
+    queryFn: () => agentsApi.adapterModels(createdCompanyId!, adapterType),
+    enabled: Boolean(createdCompanyId) && onboardingOpen && step === 2
   });
   const isLocalAdapter =
     adapterType === "claude_local" || adapterType === "codex_local" || adapterType === "opencode_local" || adapterType === "cursor";
@@ -162,9 +172,9 @@ export function OnboardingWizard() {
       ? "codex"
       : adapterType === "cursor"
         ? "agent"
-      : adapterType === "opencode_local"
-        ? "opencode"
-        : "claude");
+        : adapterType === "opencode_local"
+          ? "opencode"
+          : "claude");
 
   useEffect(() => {
     if (step !== 2) return;
@@ -182,6 +192,41 @@ export function OnboardingWizard() {
     adapterType === "claude_local" &&
     adapterEnvResult?.status === "fail" &&
     hasAnthropicApiKeyOverrideCheck;
+  const filteredModels = useMemo(() => {
+    const query = modelSearch.trim().toLowerCase();
+    return (adapterModels ?? []).filter((entry) => {
+      if (!query) return true;
+      const provider = extractProviderIdWithFallback(entry.id, "");
+      return (
+        entry.id.toLowerCase().includes(query) ||
+        entry.label.toLowerCase().includes(query) ||
+        provider.toLowerCase().includes(query)
+      );
+    });
+  }, [adapterModels, modelSearch]);
+  const groupedModels = useMemo(() => {
+    if (adapterType !== "opencode_local") {
+      return [
+        {
+          provider: "models",
+          entries: [...filteredModels].sort((a, b) => a.id.localeCompare(b.id)),
+        },
+      ];
+    }
+    const groups = new Map<string, Array<{ id: string; label: string }>>();
+    for (const entry of filteredModels) {
+      const provider = extractProviderIdWithFallback(entry.id);
+      const bucket = groups.get(provider) ?? [];
+      bucket.push(entry);
+      groups.set(provider, bucket);
+    }
+    return Array.from(groups.entries())
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([provider, entries]) => ({
+        provider,
+        entries: [...entries].sort((a, b) => a.id.localeCompare(b.id)),
+      }));
+  }, [filteredModels, adapterType]);
 
   function reset() {
     setStep(1);
@@ -225,8 +270,6 @@ export function OnboardingWizard() {
           ? model || DEFAULT_CODEX_LOCAL_MODEL
           : adapterType === "cursor"
             ? model || DEFAULT_CURSOR_LOCAL_MODEL
-          : adapterType === "opencode_local"
-            ? model || DEFAULT_OPENCODE_LOCAL_MODEL
           : model,
       command,
       args,
@@ -315,6 +358,35 @@ export function OnboardingWizard() {
     setLoading(true);
     setError(null);
     try {
+      if (adapterType === "opencode_local") {
+        const selectedModelId = model.trim();
+        if (!selectedModelId) {
+          setError("OpenCode requires an explicit model in provider/model format.");
+          return;
+        }
+        if (adapterModelsError) {
+          setError(
+            adapterModelsError instanceof Error
+              ? adapterModelsError.message
+              : "Failed to load OpenCode models.",
+          );
+          return;
+        }
+        if (adapterModelsLoading || adapterModelsFetching) {
+          setError("OpenCode models are still loading. Please wait and try again.");
+          return;
+        }
+        const discoveredModels = adapterModels ?? [];
+        if (!discoveredModels.some((entry) => entry.id === selectedModelId)) {
+          setError(
+            discoveredModels.length === 0
+              ? "No OpenCode models discovered. Run `opencode models` and authenticate providers."
+              : `Configured OpenCode model is unavailable: ${selectedModelId}`,
+          );
+          return;
+        }
+      }
+
       if (isLocalAdapter) {
         const result = adapterEnvResult ?? (await runAdapterEnvironmentTest());
         if (!result) return;
@@ -590,35 +662,28 @@ export function OnboardingWizard() {
                         {
                           value: "opencode_local" as const,
                           label: "OpenCode",
-                          icon: Code,
-                          desc: "Local OpenCode agent"
+                          icon: OpenCodeLogoIcon,
+                          desc: "Local multi-provider agent"
                         },
                         {
-                          value: "openclaw" as const,
-                          label: "OpenClaw",
+                          value: "pi_local" as const,
+                          label: "Pi",
+                          icon: Terminal,
+                          desc: "Local Pi agent"
+                        },
+                        {
+                          value: "openclaw_gateway" as const,
+                          label: "OpenClaw Gateway",
                           icon: Bot,
-                          desc: "Notify OpenClaw webhook",
-                          comingSoon: true
+                          desc: "Invoke OpenClaw via gateway protocol",
+                          comingSoon: true,
+                          disabledLabel: "Configure OpenClaw within the App"
                         },
                         {
                           value: "cursor" as const,
                           label: "Cursor",
                           icon: MousePointer2,
                           desc: "Local Cursor agent"
-                        },
-                        {
-                          value: "process" as const,
-                          label: "Shell Command",
-                          icon: Terminal,
-                          desc: "Run a process",
-                          comingSoon: true
-                        },
-                        {
-                          value: "http" as const,
-                          label: "HTTP Webhook",
-                          icon: Globe,
-                          desc: "Call an endpoint",
-                          comingSoon: true
                         }
                       ].map((opt) => (
                         <button
@@ -640,20 +705,28 @@ export function OnboardingWizard() {
                               setModel(DEFAULT_CODEX_LOCAL_MODEL);
                             } else if (nextType === "cursor" && !model) {
                               setModel(DEFAULT_CURSOR_LOCAL_MODEL);
-                            } else if (nextType === "opencode_local" && !model) {
-                              setModel(DEFAULT_OPENCODE_LOCAL_MODEL);
                             }
+                            if (nextType === "opencode_local") {
+                              if (!model.includes("/")) {
+                                setModel("");
+                              }
+                              return;
+                            }
+                            setModel("");
                           }}
                         >
                           {opt.recommended && (
-                            <span className="absolute -top-1.5 -right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
+                            <span className="absolute -top-1.5 right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
                               Recommended
                             </span>
                           )}
                           <opt.icon className="h-4 w-4" />
                           <span className="font-medium">{opt.label}</span>
                           <span className="text-muted-foreground text-[10px]">
-                            {opt.comingSoon ? "Coming soon" : opt.desc}
+                            {opt.comingSoon
+                              ? (opt as { disabledLabel?: string }).disabledLabel ??
+                                "Coming soon"
+                              : opt.desc}
                           </span>
                         </button>
                       ))}
@@ -664,6 +737,7 @@ export function OnboardingWizard() {
                   {(adapterType === "claude_local" ||
                     adapterType === "codex_local" ||
                     adapterType === "opencode_local" ||
+                    adapterType === "pi_local" ||
                     adapterType === "cursor") && (
                     <div className="space-y-3">
                       <div>
@@ -688,7 +762,13 @@ export function OnboardingWizard() {
                         <label className="text-xs text-muted-foreground mb-1 block">
                           Model
                         </label>
-                        <Popover open={modelOpen} onOpenChange={setModelOpen}>
+                        <Popover
+                          open={modelOpen}
+                          onOpenChange={(next) => {
+                            setModelOpen(next);
+                            if (!next) setModelSearch("");
+                          }}
+                        >
                           <PopoverTrigger asChild>
                             <button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-sm hover:bg-accent/50 transition-colors w-full justify-between">
                               <span
@@ -698,7 +778,10 @@ export function OnboardingWizard() {
                               >
                                 {selectedModel
                                   ? selectedModel.label
-                                  : model || "Default"}
+                                  : model ||
+                                    (adapterType === "opencode_local"
+                                      ? "Select model (required)"
+                                      : "Default")}
                               </span>
                               <ChevronDown className="h-3 w-3 text-muted-foreground" />
                             </button>
@@ -707,36 +790,60 @@ export function OnboardingWizard() {
                             className="w-[var(--radix-popover-trigger-width)] p-1"
                             align="start"
                           >
-                            <button
-                              className={cn(
-                                "flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
-                                !model && "bg-accent"
-                              )}
-                              onClick={() => {
-                                setModel("");
-                                setModelOpen(false);
-                              }}
-                            >
-                              Default
-                            </button>
-                            {(adapterModels ?? []).map((m) => (
+                            <input
+                              className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
+                              placeholder="Search models..."
+                              value={modelSearch}
+                              onChange={(e) => setModelSearch(e.target.value)}
+                              autoFocus
+                            />
+                            {adapterType !== "opencode_local" && (
                               <button
-                                key={m.id}
                                 className={cn(
-                                  "flex items-center justify-between w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
-                                  m.id === model && "bg-accent"
+                                  "flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
+                                  !model && "bg-accent"
                                 )}
                                 onClick={() => {
-                                  setModel(m.id);
+                                  setModel("");
                                   setModelOpen(false);
                                 }}
                               >
-                                <span>{m.label}</span>
-                                <span className="text-xs text-muted-foreground font-mono">
-                                  {m.id}
-                                </span>
-                              </button>
-                            ))}
+                                  Default
+                                </button>
+                            )}
+                            <div className="max-h-[240px] overflow-y-auto">
+                              {groupedModels.map((group) => (
+                                <div key={group.provider} className="mb-1 last:mb-0">
+                                  {adapterType === "opencode_local" && (
+                                    <div className="px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground">
+                                      {group.provider} ({group.entries.length})
+                                    </div>
+                                  )}
+                                  {group.entries.map((m) => (
+                                    <button
+                                      key={m.id}
+                                      className={cn(
+                                        "flex items-center w-full px-2 py-1.5 text-sm rounded hover:bg-accent/50",
+                                        m.id === model && "bg-accent"
+                                      )}
+                                      onClick={() => {
+                                        setModel(m.id);
+                                        setModelOpen(false);
+                                      }}
+                                    >
+                                      <span className="block w-full text-left truncate" title={m.id}>
+                                        {adapterType === "opencode_local" ? extractModelName(m.id) : m.label}
+                                      </span>
+                                    </button>
+                                  ))}
+                                </div>
+                              ))}
+                            </div>
+                            {filteredModels.length === 0 && (
+                              <p className="px-2 py-1.5 text-xs text-muted-foreground">
+                                No models discovered.
+                              </p>
+                            )}
                           </PopoverContent>
                         </Popover>
                       </div>
@@ -802,7 +909,7 @@ export function OnboardingWizard() {
                             : adapterType === "codex_local"
                             ? `${effectiveAdapterCommand} exec --json -`
                             : adapterType === "opencode_local"
-                              ? `${effectiveAdapterCommand} run --format json \"Respond with hello.\"`
+                              ? `${effectiveAdapterCommand} run --format json "Respond with hello."`
                             : `${effectiveAdapterCommand} --print - --output-format stream-json --verbose`}
                         </p>
                         <p className="text-muted-foreground">
@@ -863,14 +970,14 @@ export function OnboardingWizard() {
                     </div>
                   )}
 
-                  {(adapterType === "http" || adapterType === "openclaw") && (
+                  {(adapterType === "http" || adapterType === "openclaw_gateway") && (
                     <div>
                       <label className="text-xs text-muted-foreground mb-1 block">
-                        Webhook URL
+                        {adapterType === "openclaw_gateway" ? "Gateway URL" : "Webhook URL"}
                       </label>
                       <input
                         className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm font-mono outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
-                        placeholder="https://..."
+                        placeholder={adapterType === "openclaw_gateway" ? "ws://127.0.0.1:18789" : "https://..."}
                         value={url}
                         onChange={(e) => setUrl(e.target.value)}
                       />

ui/src/components/OpenCodeLogoIcon.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../lib/utils";
+
+interface OpenCodeLogoIconProps {
+  className?: string;
+}
+
+export function OpenCodeLogoIcon({ className }: OpenCodeLogoIconProps) {
+  return (
+    <>
+      <img
+        src="/brands/opencode-logo-light-square.svg"
+        alt="OpenCode"
+        className={cn("dark:hidden", className)}
+      />
+      <img
+        src="/brands/opencode-logo-dark-square.svg"
+        alt="OpenCode"
+        className={cn("hidden dark:block", className)}
+      />
+    </>
+  );
+}

ui/src/components/ProjectProperties.tsx

@@ -3,11 +3,12 @@ import { Link } from "@/lib/router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { Project } from "@paperclipai/shared";
 import { StatusBadge } from "./StatusBadge";
-import { formatDate } from "../lib/utils";
+import { cn, formatDate } from "../lib/utils";
 import { goalsApi } from "../api/goals";
 import { projectsApi } from "../api/projects";
 import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
+import { statusBadge, statusBadgeDefault } from "../lib/status-colors";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -15,6 +16,14 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { ExternalLink, Github, Plus, Trash2, X } from "lucide-react";
 import { ChoosePathButton } from "./PathInstructionsModal";
 
+const PROJECT_STATUSES = [
+  { value: "backlog", label: "Backlog" },
+  { value: "planned", label: "Planned" },
+  { value: "in_progress", label: "In Progress" },
+  { value: "completed", label: "Completed" },
+  { value: "cancelled", label: "Cancelled" },
+];
+
 interface ProjectPropertiesProps {
   project: Project;
   onUpdate?: (data: Record<string, unknown>) => void;
@@ -31,6 +40,42 @@ function PropertyRow({ label, children }: { label: string; children: React.React
   );
 }
 
+function ProjectStatusPicker({ status, onChange }: { status: string; onChange: (status: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const colorClass = statusBadge[status] ?? statusBadgeDefault;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          className={cn(
+            "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap shrink-0 cursor-pointer hover:opacity-80 transition-opacity",
+            colorClass,
+          )}
+        >
+          {status.replace("_", " ")}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-40 p-1" align="start">
+        {PROJECT_STATUSES.map((s) => (
+          <Button
+            key={s.value}
+            variant="ghost"
+            size="sm"
+            className={cn("w-full justify-start gap-2 text-xs", s.value === status && "bg-accent")}
+            onClick={() => {
+              onChange(s.value);
+              setOpen(false);
+            }}
+          >
+            {s.label}
+          </Button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps) {
   const { selectedCompanyId } = useCompany();
   const queryClient = useQueryClient();
@@ -212,7 +257,14 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
     <div className="space-y-4">
       <div className="space-y-1">
         <PropertyRow label="Status">
-          <StatusBadge status={project.status} />
+          {onUpdate ? (
+            <ProjectStatusPicker
+              status={project.status}
+              onChange={(status) => onUpdate({ status })}
+            />
+          ) : (
+            <StatusBadge status={project.status} />
+          )}
         </PropertyRow>
         {project.leadAgentId && (
           <PropertyRow label="Lead">

ui/src/components/Sidebar.tsx

@@ -65,7 +65,7 @@ export function Sidebar() {
         </Button>
       </div>
 
-      <nav className="flex-1 min-h-0 overflow-y-auto scrollbar-none flex flex-col gap-4 px-3 py-2">
+      <nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 px-3 py-2">
         <div className="flex flex-col gap-0.5">
           {/* New Issue button aligned with nav items */}
           <button

ui/src/components/SidebarAgents.tsx

@@ -1,8 +1,9 @@
 import { useMemo, useState } from "react";
 import { NavLink, useLocation } from "@/lib/router";
 import { useQuery } from "@tanstack/react-query";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, Plus } from "lucide-react";
 import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
 import { useSidebar } from "../context/SidebarContext";
 import { agentsApi } from "../api/agents";
 import { heartbeatsApi } from "../api/heartbeats";
@@ -40,6 +41,7 @@ function sortByHierarchy(agents: Agent[]): Agent[] {
 export function SidebarAgents() {
   const [open, setOpen] = useState(true);
   const { selectedCompanyId } = useCompany();
+  const { openNewAgent } = useDialog();
   const { isMobile, setSidebarOpen } = useSidebar();
   const location = useLocation();
 
@@ -89,6 +91,16 @@ export function SidebarAgents() {
               Agents
             </span>
           </CollapsibleTrigger>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              openNewAgent();
+            }}
+            className="flex items-center justify-center h-4 w-4 rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
+            aria-label="New agent"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
         </div>
       </div>
 

ui/src/components/agent-config-primitives.tsx

@@ -15,6 +15,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { HelpCircle, ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils";
+import { AGENT_ROLE_LABELS } from "@paperclipai/shared";
 
 /* ---- Help text for (?) tooltips ---- */
 export const help: Record<string, string> = {
@@ -23,7 +24,7 @@ export const help: Record<string, string> = {
   role: "Organizational role. Determines position and capabilities.",
   reportsTo: "The agent this one reports to in the org hierarchy.",
   capabilities: "Describes what this agent can do. Shown in the org chart and used for task routing.",
-  adapterType: "How this agent runs: local CLI (Claude/Codex), OpenClaw webhook, spawned process, or generic HTTP webhook.",
+  adapterType: "How this agent runs: local CLI (Claude/Codex/OpenCode), OpenClaw Gateway, spawned process, or generic HTTP webhook.",
   cwd: "Default working directory fallback for local adapters. Use an absolute path on the machine running Paperclip.",
   promptTemplate: "The prompt sent to the agent on each heartbeat. Supports {{ agent.id }}, {{ agent.name }}, {{ agent.role }} variables.",
   model: "Override the default model used by the adapter.",
@@ -34,7 +35,7 @@ export const help: Record<string, string> = {
   search: "Enable Codex web search capability during runs.",
   maxTurnsPerRun: "Maximum number of agentic turns (tool calls) per heartbeat run.",
   command: "The command to execute (e.g. node, python).",
-  localCommand: "Override the path to the CLI command you want the adapter to call (e.g. /usr/local/bin/claude, codex).",
+  localCommand: "Override the path to the CLI command you want the adapter to call (e.g. /usr/local/bin/claude, codex, opencode).",
   args: "Command-line arguments, comma-separated.",
   extraArgs: "Extra CLI arguments for local adapters, comma-separated.",
   envVars: "Environment variables injected into the adapter process. Use plain values or secret references.",
@@ -53,17 +54,13 @@ export const adapterLabels: Record<string, string> = {
   claude_local: "Claude (local)",
   codex_local: "Codex (local)",
   opencode_local: "OpenCode (local)",
-  openclaw: "OpenClaw",
+  openclaw_gateway: "OpenClaw Gateway",
   cursor: "Cursor (local)",
   process: "Process",
   http: "HTTP",
 };
 
-export const roleLabels: Record<string, string> = {
-  ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO",
-  engineer: "Engineer", designer: "Designer", pm: "PM",
-  qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General",
-};
+export const roleLabels = AGENT_ROLE_LABELS as Record<string, string>;
 
 /* ---- Primitive components ---- */
 

ui/src/components/ui/command.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import { SearchIcon, XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 import {
@@ -50,11 +51,20 @@ function CommandDialog({
       </DialogHeader>
       <DialogContent
         className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
+        showCloseButton={false}
       >
         <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-0 right-2 flex h-12 items-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogContent>
     </Dialog>
   )

ui/src/components/ui/popover.tsx

@@ -19,22 +19,23 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  disablePortal = false,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & { disablePortal?: boolean }) {
+  const content = (
+    <PopoverPrimitive.Content
+      data-slot="popover-content"
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      )}
+      {...props}
+    />
   )
+  if (disablePortal) return content
+  return <PopoverPrimitive.Portal>{content}</PopoverPrimitive.Portal>
 }
 
 function PopoverAnchor({

ui/src/context/DialogContext.tsx

@@ -5,6 +5,8 @@ interface NewIssueDefaults {
   priority?: string;
   projectId?: string;
   assigneeAgentId?: string;
+  title?: string;
+  description?: string;
 }
 
 interface NewGoalDefaults {

ui/src/context/LiveUpdatesProvider.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, type ReactNode } from "react";
-import { useQueryClient, type QueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient, type QueryClient } from "@tanstack/react-query";
 import type { Agent, Issue, LiveEvent } from "@paperclipai/shared";
+import { authApi } from "../api/auth";
 import { useCompany } from "./CompanyContext";
 import type { ToastInput } from "./ToastContext";
 import { useToast } from "./ToastContext";
@@ -152,6 +153,7 @@ function buildActivityToast(
   queryClient: QueryClient,
   companyId: string,
   payload: Record<string, unknown>,
+  currentActor: { userId: string | null; agentId: string | null },
 ): ToastInput | null {
   const entityType = readString(payload.entityType);
   const entityId = readString(payload.entityId);
@@ -166,6 +168,10 @@ function buildActivityToast(
 
   const issue = resolveIssueToastContext(queryClient, companyId, entityId, details);
   const actor = resolveActorLabel(queryClient, companyId, actorType, actorId);
+  const isSelfActivity =
+    (actorType === "user" && !!currentActor.userId && actorId === currentActor.userId) ||
+    (actorType === "agent" && !!currentActor.agentId && actorId === currentActor.agentId);
+  if (isSelfActivity) return null;
 
   if (action === "issue.created") {
     return {
@@ -178,8 +184,8 @@ function buildActivityToast(
   }
 
   if (action === "issue.updated") {
-    if (details?.reopened === true && readString(details.source) === "comment") {
-      // Reopen-via-comment emits a paired comment event; show one combined toast on the comment event.
+    if (readString(details?.source) === "comment") {
+      // Comment-driven updates emit a paired comment event; show one combined toast on the comment event.
       return null;
     }
     const changeDesc = describeIssueUpdate(details);
@@ -202,13 +208,18 @@ function buildActivityToast(
   const commentId = readString(details?.commentId);
   const bodySnippet = readString(details?.bodySnippet);
   const reopened = details?.reopened === true;
+  const updated = details?.updated === true;
   const reopenedFrom = readString(details?.reopenedFrom);
   const reopenedLabel = reopened
     ? reopenedFrom
       ? `reopened from ${reopenedFrom.replace(/_/g, " ")}`
       : "reopened"
     : null;
-  const title = reopened ? `${actor} reopened and commented on ${issue.ref}` : `${actor} commented on ${issue.ref}`;
+  const title = reopened
+    ? `${actor} reopened and commented on ${issue.ref}`
+    : updated
+      ? `${actor} commented and updated ${issue.ref}`
+      : `${actor} commented on ${issue.ref}`;
   const body = bodySnippet
     ? reopenedLabel
       ? `${reopenedLabel} - ${bodySnippet.replace(/^#+\s*/m, "").replace(/\n/g, " ")}`
@@ -227,6 +238,29 @@ function buildActivityToast(
   };
 }
 
+function buildJoinRequestToast(
+  payload: Record<string, unknown>,
+): ToastInput | null {
+  const entityType = readString(payload.entityType);
+  const action = readString(payload.action);
+  const entityId = readString(payload.entityId);
+  const details = readRecord(payload.details);
+
+  if (entityType !== "join_request" || !action || !entityId) return null;
+  if (action !== "join.requested" && action !== "join.request_replayed") return null;
+
+  const requestType = readString(details?.requestType);
+  const label = requestType === "agent" ? "Agent" : "Someone";
+
+  return {
+    title: `${label} wants to join`,
+    body: "A new join request is waiting for approval.",
+    tone: "info",
+    action: { label: "View inbox", href: "/inbox/new" },
+    dedupeKey: `join-request:${entityId}`,
+  };
+}
+
 function buildAgentStatusToast(
   payload: Record<string, unknown>,
   nameOf: (id: string) => string | null,
@@ -369,6 +403,11 @@ function invalidateActivityQueries(
     return;
   }
 
+  if (entityType === "join_request") {
+    queryClient.invalidateQueries({ queryKey: queryKeys.access.joinRequests(companyId) });
+    return;
+  }
+
   if (entityType === "cost_event") {
     queryClient.invalidateQueries({ queryKey: queryKeys.costs(companyId) });
     return;
@@ -420,6 +459,7 @@ function handleLiveEvent(
   event: LiveEvent,
   pushToast: (toast: ToastInput) => string | null,
   gate: ToastGate,
+  currentActor: { userId: string | null; agentId: string | null },
 ) {
   if (event.companyId !== expectedCompanyId) return;
 
@@ -456,7 +496,9 @@ function handleLiveEvent(
   if (event.type === "activity.logged") {
     invalidateActivityQueries(queryClient, expectedCompanyId, payload);
     const action = readString(payload.action);
-    const toast = buildActivityToast(queryClient, expectedCompanyId, payload);
+    const toast =
+      buildActivityToast(queryClient, expectedCompanyId, payload, currentActor) ??
+      buildJoinRequestToast(payload);
     if (toast) gatedPushToast(gate, pushToast, `activity:${action ?? "unknown"}`, toast);
   }
 }
@@ -466,6 +508,12 @@ export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
   const queryClient = useQueryClient();
   const { pushToast } = useToast();
   const gateRef = useRef<ToastGate>({ cooldownHits: new Map(), suppressUntil: 0 });
+  const { data: session } = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+    retry: false,
+  });
+  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
 
   useEffect(() => {
     if (!selectedCompanyId) return;
@@ -511,7 +559,10 @@ export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
 
         try {
           const parsed = JSON.parse(raw) as LiveEvent;
-          handleLiveEvent(queryClient, selectedCompanyId, parsed, pushToast, gateRef.current);
+          handleLiveEvent(queryClient, selectedCompanyId, parsed, pushToast, gateRef.current, {
+            userId: currentUserId,
+            agentId: null,
+          });
         } catch {
           // Ignore non-JSON payloads.
         }
@@ -540,7 +591,7 @@ export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
         socket.close(1000, "provider_unmount");
       }
     };
-  }, [queryClient, selectedCompanyId, pushToast]);
+  }, [queryClient, selectedCompanyId, pushToast, currentUserId]);
 
   return <>{children}</>;
 }

ui/src/index.css

@@ -94,8 +94,8 @@
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --ring: oklch(0.439 0 0);
@@ -178,6 +178,17 @@
   background: oklch(0.5 0 0);
 }
 
+/* Auto-hide scrollbar: transparent by default, visible on container hover */
+.scrollbar-auto-hide::-webkit-scrollbar-thumb {
+  background: transparent !important;
+}
+.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
+  background: oklch(0.4 0 0) !important;
+}
+.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.5 0 0) !important;
+}
+
 /* Expandable dialog transition for max-width changes */
 [data-slot="dialog-content"] {
   transition: max-width 200ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -415,6 +426,40 @@
   font-weight: 500;
 }
 
+.paperclip-mermaid {
+  margin: 0.5rem 0;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 3px);
+  background-color: color-mix(in oklab, var(--accent) 35%, transparent);
+  overflow-x: auto;
+}
+
+.paperclip-mermaid svg {
+  display: block;
+  width: max-content;
+  max-width: none;
+  min-width: 100%;
+  height: auto;
+}
+
+.paperclip-mermaid-status {
+  margin: 0 0 0.45rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.paperclip-mermaid-status-error {
+  color: var(--destructive);
+}
+
+.paperclip-mermaid-source {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
 /* Project mention chips rendered inside MarkdownBody */
 a.paperclip-project-mention-chip {
   display: inline-flex;

ui/src/lib/model-utils.ts

@@ -0,0 +1,16 @@
+export function extractProviderId(modelId: string): string | null {
+  const trimmed = modelId.trim();
+  if (!trimmed.includes("/")) return null;
+  const provider = trimmed.slice(0, trimmed.indexOf("/")).trim();
+  return provider || null;
+}
+
+export function extractProviderIdWithFallback(modelId: string, fallback = "other"): string {
+  return extractProviderId(modelId) ?? fallback;
+}
+
+export function extractModelName(modelId: string): string {
+  const trimmed = modelId.trim();
+  if (!trimmed.includes("/")) return trimmed;
+  return trimmed.slice(trimmed.indexOf("/") + 1).trim();
+}

ui/src/lib/queryKeys.ts

@@ -11,12 +11,16 @@ export const queryKeys = {
     taskSessions: (id: string) => ["agents", "task-sessions", id] as const,
     keys: (agentId: string) => ["agents", "keys", agentId] as const,
     configRevisions: (agentId: string) => ["agents", "config-revisions", agentId] as const,
+    adapterModels: (companyId: string, adapterType: string) =>
+      ["agents", companyId, "adapter-models", adapterType] as const,
   },
   issues: {
     list: (companyId: string) => ["issues", companyId] as const,
     search: (companyId: string, q: string, projectId?: string) =>
       ["issues", companyId, "search", q, projectId ?? "__all-projects__"] as const,
     listAssignedToMe: (companyId: string) => ["issues", companyId, "assigned-to-me"] as const,
+    listTouchedByMe: (companyId: string) => ["issues", companyId, "touched-by-me"] as const,
+    listUnreadTouchedByMe: (companyId: string) => ["issues", companyId, "unread-touched-by-me"] as const,
     labels: (companyId: string) => ["issues", companyId, "labels"] as const,
     listByProject: (companyId: string, projectId: string) =>
       ["issues", companyId, "project", projectId] as const,

ui/src/lib/recent-assignees.ts

@@ -0,0 +1,36 @@
+const STORAGE_KEY = "paperclip:recent-assignees";
+const MAX_RECENT = 10;
+
+export function getRecentAssigneeIds(): string[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+export function trackRecentAssignee(agentId: string): void {
+  if (!agentId) return;
+  const recent = getRecentAssigneeIds().filter((id) => id !== agentId);
+  recent.unshift(agentId);
+  if (recent.length > MAX_RECENT) recent.length = MAX_RECENT;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(recent));
+}
+
+export function sortAgentsByRecency<T extends { id: string; name: string }>(
+  agents: T[],
+  recentIds: string[],
+): T[] {
+  const recentIndex = new Map(recentIds.map((id, i) => [id, i]));
+  return [...agents].sort((a, b) => {
+    const aRecent = recentIndex.get(a.id);
+    const bRecent = recentIndex.get(b.id);
+    if (aRecent !== undefined && bRecent !== undefined) return aRecent - bRecent;
+    if (aRecent !== undefined) return -1;
+    if (bRecent !== undefined) return 1;
+    return a.name.localeCompare(b.name);
+  });
+}

ui/src/main.tsx

@@ -15,6 +15,12 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import "@mdxeditor/editor/style.css";
 import "./index.css";
 
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/sw.js");
+  });
+}
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

ui/src/pages/AgentDetail.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate, Link, useBeforeUnload } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { agentsApi, type AgentKey, type ClaudeLoginResult } from "../api/agents";
 import { heartbeatsApi } from "../api/heartbeats";
+import { ApiError } from "../api/client";
 import { ChartCard, RunActivityChart, PriorityChart, IssueStatusChart, SuccessRateChart } from "../components/ActivityCharts";
 import { activityApi } from "../api/activity";
 import { issuesApi } from "../api/issues";
@@ -55,7 +56,7 @@ import {
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { AgentIcon, AgentIconPicker } from "../components/AgentIconPicker";
-import { isUuidLike, type Agent, type HeartbeatRun, type HeartbeatRunEvent, type AgentRuntimeState } from "@paperclipai/shared";
+import { isUuidLike, type Agent, type HeartbeatRun, type HeartbeatRunEvent, type AgentRuntimeState, type LiveEvent } from "@paperclipai/shared";
 import { agentRouteRef } from "../lib/utils";
 
 const runStatusIcons: Record<string, { icon: typeof CheckCircle2; color: string }> = {
@@ -264,11 +265,12 @@ export function AgentDetail() {
   const resolvedCompanyId = agent?.companyId ?? selectedCompanyId;
   const canonicalAgentRef = agent ? agentRouteRef(agent) : routeAgentRef;
   const agentLookupRef = agent?.id ?? routeAgentRef;
+  const resolvedAgentId = agent?.id ?? null;
 
   const { data: runtimeState } = useQuery({
-    queryKey: queryKeys.agents.runtimeState(agentLookupRef),
-    queryFn: () => agentsApi.runtimeState(agentLookupRef, resolvedCompanyId ?? undefined),
-    enabled: Boolean(agentLookupRef),
+    queryKey: queryKeys.agents.runtimeState(resolvedAgentId ?? routeAgentRef),
+    queryFn: () => agentsApi.runtimeState(resolvedAgentId!, resolvedCompanyId ?? undefined),
+    enabled: Boolean(resolvedAgentId),
   });
 
   const { data: heartbeats } = useQuery({
@@ -466,7 +468,7 @@ export function AgentDetail() {
             disabled={agentAction.isPending || isPendingApproval}
           >
             <Play className="h-3.5 w-3.5 sm:mr-1" />
-            <span className="hidden sm:inline">Invoke</span>
+            <span className="hidden sm:inline">Run Heartbeat</span>
           </Button>
           {agent.status === "paused" ? (
             <Button
@@ -1154,8 +1156,12 @@ function ConfigurationTab({
   const queryClient = useQueryClient();
 
   const { data: adapterModels } = useQuery({
-    queryKey: ["adapter-models", agent.adapterType],
-    queryFn: () => agentsApi.adapterModels(agent.adapterType),
+    queryKey:
+      companyId
+        ? queryKeys.agents.adapterModels(companyId, agent.adapterType)
+        : ["agents", "none", "adapter-models", agent.adapterType],
+    queryFn: () => agentsApi.adapterModels(companyId!, agent.adapterType),
+    enabled: Boolean(companyId),
   });
 
   const updateAgent = useMutation({
@@ -1755,6 +1761,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
   const [logError, setLogError] = useState<string | null>(null);
   const [logOffset, setLogOffset] = useState(0);
   const [isFollowing, setIsFollowing] = useState(false);
+  const [isStreamingConnected, setIsStreamingConnected] = useState(false);
   const logEndRef = useRef<HTMLDivElement>(null);
   const pendingLogLineRef = useRef("");
   const scrollContainerRef = useRef<ScrollContainer | null>(null);
@@ -1765,6 +1772,10 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
   });
   const isLive = run.status === "running" || run.status === "queued";
 
+  function isRunLogUnavailable(err: unknown): boolean {
+    return err instanceof ApiError && err.status === 404;
+  }
+
   function appendLogContent(content: string, finalize = false) {
     if (!content && !finalize) return;
     const combined = `${pendingLogLineRef.current}${content}`;
@@ -1899,7 +1910,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
     setLogOffset(0);
     setLogError(null);
 
-    if (!run.logRef) {
+    if (!run.logRef && !isLive) {
       setLogLoading(false);
       return () => {
         cancelled = true;
@@ -1928,6 +1939,10 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
         }
       } catch (err) {
         if (!cancelled) {
+          if (isLive && isRunLogUnavailable(err)) {
+            setLogLoading(false);
+            return;
+          }
           setLogError(err instanceof Error ? err.message : "Failed to load run log");
         }
       } finally {
@@ -1943,7 +1958,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
 
   // Poll for live updates
   useEffect(() => {
-    if (!isLive) return;
+    if (!isLive || isStreamingConnected) return;
     const interval = setInterval(async () => {
       const maxSeq = events.length > 0 ? Math.max(...events.map((e) => e.seq)) : 0;
       try {
@@ -1956,11 +1971,11 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
       }
     }, 2000);
     return () => clearInterval(interval);
-  }, [run.id, isLive, events]);
+  }, [run.id, isLive, isStreamingConnected, events]);
 
   // Poll shell log for running runs
   useEffect(() => {
-    if (!isLive || !run.logRef) return;
+    if (!isLive || isStreamingConnected) return;
     const interval = setInterval(async () => {
       try {
         const result = await heartbeatsApi.log(run.id, logOffset, 256_000);
@@ -1972,12 +1987,125 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
         } else if (result.content.length > 0) {
           setLogOffset((prev) => prev + result.content.length);
         }
-      } catch {
+      } catch (err) {
+        if (isRunLogUnavailable(err)) return;
         // ignore polling errors
       }
     }, 2000);
     return () => clearInterval(interval);
-  }, [run.id, run.logRef, isLive, logOffset]);
+  }, [run.id, isLive, isStreamingConnected, logOffset]);
+
+  // Stream live updates from websocket (primary path for running runs).
+  useEffect(() => {
+    if (!isLive) return;
+
+    let closed = false;
+    let reconnectTimer: number | null = null;
+    let socket: WebSocket | null = null;
+
+    const scheduleReconnect = () => {
+      if (closed) return;
+      reconnectTimer = window.setTimeout(connect, 1500);
+    };
+
+    const connect = () => {
+      if (closed) return;
+      const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+      const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(run.companyId)}/events/ws`;
+      socket = new WebSocket(url);
+
+      socket.onopen = () => {
+        setIsStreamingConnected(true);
+      };
+
+      socket.onmessage = (message) => {
+        const rawMessage = typeof message.data === "string" ? message.data : "";
+        if (!rawMessage) return;
+
+        let event: LiveEvent;
+        try {
+          event = JSON.parse(rawMessage) as LiveEvent;
+        } catch {
+          return;
+        }
+
+        if (event.companyId !== run.companyId) return;
+        const payload = asRecord(event.payload);
+        const eventRunId = asNonEmptyString(payload?.runId);
+        if (!payload || eventRunId !== run.id) return;
+
+        if (event.type === "heartbeat.run.log") {
+          const chunk = typeof payload.chunk === "string" ? payload.chunk : "";
+          if (!chunk) return;
+          const streamRaw = asNonEmptyString(payload.stream);
+          const stream = streamRaw === "stderr" || streamRaw === "system" ? streamRaw : "stdout";
+          const ts = asNonEmptyString((payload as Record<string, unknown>).ts) ?? event.createdAt;
+          setLogLines((prev) => [...prev, { ts, stream, chunk }]);
+          return;
+        }
+
+        if (event.type !== "heartbeat.run.event") return;
+
+        const seq = typeof payload.seq === "number" ? payload.seq : null;
+        if (seq === null || !Number.isFinite(seq)) return;
+
+        const streamRaw = asNonEmptyString(payload.stream);
+        const stream =
+          streamRaw === "stdout" || streamRaw === "stderr" || streamRaw === "system"
+            ? streamRaw
+            : null;
+        const levelRaw = asNonEmptyString(payload.level);
+        const level =
+          levelRaw === "info" || levelRaw === "warn" || levelRaw === "error"
+            ? levelRaw
+            : null;
+
+        const liveEvent: HeartbeatRunEvent = {
+          id: seq,
+          companyId: run.companyId,
+          runId: run.id,
+          agentId: run.agentId,
+          seq,
+          eventType: asNonEmptyString(payload.eventType) ?? "event",
+          stream,
+          level,
+          color: asNonEmptyString(payload.color),
+          message: asNonEmptyString(payload.message),
+          payload: asRecord(payload.payload),
+          createdAt: new Date(event.createdAt),
+        };
+
+        setEvents((prev) => {
+          if (prev.some((existing) => existing.seq === seq)) return prev;
+          return [...prev, liveEvent];
+        });
+      };
+
+      socket.onerror = () => {
+        socket?.close();
+      };
+
+      socket.onclose = () => {
+        setIsStreamingConnected(false);
+        scheduleReconnect();
+      };
+    };
+
+    connect();
+
+    return () => {
+      closed = true;
+      setIsStreamingConnected(false);
+      if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
+      if (socket) {
+        socket.onopen = null;
+        socket.onmessage = null;
+        socket.onerror = null;
+        socket.onclose = null;
+        socket.close(1000, "run_detail_unmount");
+      }
+    };
+  }, [isLive, run.companyId, run.id, run.agentId]);
 
   const adapterInvokePayload = useMemo(() => {
     const evt = events.find((e) => e.eventType === "adapter.invoke");

ui/src/pages/Agents.tsx

@@ -18,23 +18,19 @@ import { PageTabBar } from "../components/PageTabBar";
 import { Tabs } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Bot, Plus, List, GitBranch, SlidersHorizontal } from "lucide-react";
-import type { Agent } from "@paperclipai/shared";
+import { AGENT_ROLE_LABELS, type Agent } from "@paperclipai/shared";
 
 const adapterLabels: Record<string, string> = {
   claude_local: "Claude",
   codex_local: "Codex",
   opencode_local: "OpenCode",
   cursor: "Cursor",
-  openclaw: "OpenClaw",
+  openclaw_gateway: "OpenClaw Gateway",
   process: "Process",
   http: "HTTP",
 };
 
-const roleLabels: Record<string, string> = {
-  ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO",
-  engineer: "Engineer", designer: "Designer", pm: "PM",
-  qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General",
-};
+const roleLabels = AGENT_ROLE_LABELS as Record<string, string>;
 
 type FilterTab = "all" | "active" | "paused" | "error";
 
@@ -230,7 +226,7 @@ export function Agents() {
               <EntityRow
                 key={agent.id}
                 title={agent.name}
-                subtitle={`${agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
+                subtitle={`${roleLabels[agent.role] ?? agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
                 to={agentUrl(agent)}
                 leading={
                   <span className="relative flex h-2.5 w-2.5">

ui/src/pages/CompanySettings.tsx

@@ -6,12 +6,27 @@ import { companiesApi } from "../api/companies";
 import { accessApi } from "../api/access";
 import { queryKeys } from "../lib/queryKeys";
 import { Button } from "@/components/ui/button";
-import { Settings } from "lucide-react";
+import { Settings, Check } from "lucide-react";
 import { CompanyPatternIcon } from "../components/CompanyPatternIcon";
-import { Field, ToggleField, HintIcon } from "../components/agent-config-primitives";
+import {
+  Field,
+  ToggleField,
+  HintIcon
+} from "../components/agent-config-primitives";
+
+type AgentSnippetInput = {
+  onboardingTextUrl: string;
+  connectionCandidates?: string[] | null;
+  testResolutionUrl?: string | null;
+};
 
 export function CompanySettings() {
-  const { companies, selectedCompany, selectedCompanyId, setSelectedCompanyId } = useCompany();
+  const {
+    companies,
+    selectedCompany,
+    selectedCompanyId,
+    setSelectedCompanyId
+  } = useCompany();
   const { setBreadcrumbs } = useBreadcrumbs();
   const queryClient = useQueryClient();
 
@@ -28,8 +43,10 @@ export function CompanySettings() {
     setBrandColor(selectedCompany.brandColor ?? "");
   }, [selectedCompany]);
 
-  const [inviteLink, setInviteLink] = useState<string | null>(null);
   const [inviteError, setInviteError] = useState<string | null>(null);
+  const [inviteSnippet, setInviteSnippet] = useState<string | null>(null);
+  const [snippetCopied, setSnippetCopied] = useState(false);
+  const [snippetCopyDelightId, setSnippetCopyDelightId] = useState(0);
 
   const generalDirty =
     !!selectedCompany &&
@@ -38,46 +55,89 @@ export function CompanySettings() {
       brandColor !== (selectedCompany.brandColor ?? ""));
 
   const generalMutation = useMutation({
-    mutationFn: (data: { name: string; description: string | null; brandColor: string | null }) =>
-      companiesApi.update(selectedCompanyId!, data),
+    mutationFn: (data: {
+      name: string;
+      description: string | null;
+      brandColor: string | null;
+    }) => companiesApi.update(selectedCompanyId!, data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
-    },
+    }
   });
 
   const settingsMutation = useMutation({
     mutationFn: (requireApproval: boolean) =>
       companiesApi.update(selectedCompanyId!, {
-        requireBoardApprovalForNewAgents: requireApproval,
+        requireBoardApprovalForNewAgents: requireApproval
       }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
-    },
+    }
   });
 
   const inviteMutation = useMutation({
     mutationFn: () =>
-      accessApi.createCompanyInvite(selectedCompanyId!, {
-        allowedJoinTypes: "both",
-        expiresInHours: 72,
-      }),
-    onSuccess: (invite) => {
+      accessApi.createOpenClawInvitePrompt(selectedCompanyId!),
+    onSuccess: async (invite) => {
       setInviteError(null);
       const base = window.location.origin.replace(/\/+$/, "");
-      const absoluteUrl = invite.inviteUrl.startsWith("http")
-        ? invite.inviteUrl
-        : `${base}${invite.inviteUrl}`;
-      setInviteLink(absoluteUrl);
-      queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId!) });
+      const onboardingTextLink =
+        invite.onboardingTextUrl ??
+        invite.onboardingTextPath ??
+        `/api/invites/${invite.token}/onboarding.txt`;
+      const absoluteUrl = onboardingTextLink.startsWith("http")
+        ? onboardingTextLink
+        : `${base}${onboardingTextLink}`;
+      setSnippetCopied(false);
+      setSnippetCopyDelightId(0);
+      let snippet: string;
+      try {
+        const manifest = await accessApi.getInviteOnboarding(invite.token);
+        snippet = buildAgentSnippet({
+          onboardingTextUrl: absoluteUrl,
+          connectionCandidates:
+            manifest.onboarding.connectivity?.connectionCandidates ?? null,
+          testResolutionUrl:
+            manifest.onboarding.connectivity?.testResolutionEndpoint?.url ??
+            null
+        });
+      } catch {
+        snippet = buildAgentSnippet({
+          onboardingTextUrl: absoluteUrl,
+          connectionCandidates: null,
+          testResolutionUrl: null
+        });
+      }
+      setInviteSnippet(snippet);
+      try {
+        await navigator.clipboard.writeText(snippet);
+        setSnippetCopied(true);
+        setSnippetCopyDelightId((prev) => prev + 1);
+        setTimeout(() => setSnippetCopied(false), 2000);
+      } catch {
+        /* clipboard may not be available */
+      }
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.sidebarBadges(selectedCompanyId!)
+      });
     },
     onError: (err) => {
-      setInviteError(err instanceof Error ? err.message : "Failed to create invite");
-    },
+      setInviteError(
+        err instanceof Error ? err.message : "Failed to create invite"
+      );
+    }
   });
+
+  useEffect(() => {
+    setInviteError(null);
+    setInviteSnippet(null);
+    setSnippetCopied(false);
+    setSnippetCopyDelightId(0);
+  }, [selectedCompanyId]);
   const archiveMutation = useMutation({
     mutationFn: ({
       companyId,
-      nextCompanyId,
+      nextCompanyId
     }: {
       companyId: string;
       nextCompanyId: string | null;
@@ -86,15 +146,19 @@ export function CompanySettings() {
       if (nextCompanyId) {
         setSelectedCompanyId(nextCompanyId);
       }
-      await queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
-      await queryClient.invalidateQueries({ queryKey: queryKeys.companies.stats });
-    },
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.companies.all
+      });
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.companies.stats
+      });
+    }
   });
 
   useEffect(() => {
     setBreadcrumbs([
       { label: selectedCompany?.name ?? "Company", href: "/dashboard" },
-      { label: "Settings" },
+      { label: "Settings" }
     ]);
   }, [setBreadcrumbs, selectedCompany?.name]);
 
@@ -110,7 +174,7 @@ export function CompanySettings() {
     generalMutation.mutate({
       name: companyName.trim(),
       description: description.trim() || null,
-      brandColor: brandColor || null,
+      brandColor: brandColor || null
     });
   }
 
@@ -135,7 +199,10 @@ export function CompanySettings() {
               onChange={(e) => setCompanyName(e.target.value)}
             />
           </Field>
-          <Field label="Description" hint="Optional description shown in the company profile.">
+          <Field
+            label="Description"
+            hint="Optional description shown in the company profile."
+          >
             <input
               className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
               type="text"
@@ -162,7 +229,10 @@ export function CompanySettings() {
               />
             </div>
             <div className="flex-1 space-y-2">
-              <Field label="Brand color" hint="Sets the hue for the company icon. Leave empty for auto-generated color.">
+              <Field
+                label="Brand color"
+                hint="Sets the hue for the company icon. Leave empty for auto-generated color."
+              >
                 <div className="flex items-center gap-2">
                   <input
                     type="color"
@@ -244,65 +314,112 @@ export function CompanySettings() {
         </div>
         <div className="space-y-3 rounded-md border border-border px-4 py-4">
           <div className="flex items-center gap-1.5">
-            <span className="text-xs text-muted-foreground">Generate a link to invite humans or agents to this company.</span>
-            <HintIcon text="Invite links expire after 72 hours and allow both human and agent joins." />
+            <span className="text-xs text-muted-foreground">
+              Generate an OpenClaw agent invite snippet.
+            </span>
+            <HintIcon text="Creates a short-lived OpenClaw agent invite and renders a copy-ready prompt." />
           </div>
           <div className="flex flex-wrap items-center gap-2">
-            <Button size="sm" onClick={() => inviteMutation.mutate()} disabled={inviteMutation.isPending}>
-              {inviteMutation.isPending ? "Creating..." : "Create invite link"}
+            <Button
+              size="sm"
+              onClick={() => inviteMutation.mutate()}
+              disabled={inviteMutation.isPending}
+            >
+              {inviteMutation.isPending
+                ? "Generating..."
+                : "Generate OpenClaw Invite Prompt"}
             </Button>
-            {inviteLink && (
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={async () => {
-                  await navigator.clipboard.writeText(inviteLink);
-                }}
-              >
-                Copy link
-              </Button>
-            )}
           </div>
-          {inviteError && <p className="text-sm text-destructive">{inviteError}</p>}
-          {inviteLink && (
+          {inviteError && (
+            <p className="text-sm text-destructive">{inviteError}</p>
+          )}
+          {inviteSnippet && (
             <div className="rounded-md border border-border bg-muted/30 p-2">
-              <div className="text-xs text-muted-foreground">Share link</div>
-              <div className="mt-1 break-all font-mono text-xs">{inviteLink}</div>
+              <div className="flex items-center justify-between gap-2">
+                <div className="text-xs text-muted-foreground">
+                  OpenClaw Invite Prompt
+                </div>
+                {snippetCopied && (
+                  <span
+                    key={snippetCopyDelightId}
+                    className="flex items-center gap-1 text-xs text-green-600 animate-pulse"
+                  >
+                    <Check className="h-3 w-3" />
+                    Copied
+                  </span>
+                )}
+              </div>
+              <div className="mt-1 space-y-1.5">
+                <textarea
+                  className="h-[28rem] w-full rounded-md border border-border bg-background px-2 py-1.5 font-mono text-xs outline-none"
+                  value={inviteSnippet}
+                  readOnly
+                />
+                <div className="flex justify-end">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={async () => {
+                      try {
+                        await navigator.clipboard.writeText(inviteSnippet);
+                        setSnippetCopied(true);
+                        setSnippetCopyDelightId((prev) => prev + 1);
+                        setTimeout(() => setSnippetCopied(false), 2000);
+                      } catch {
+                        /* clipboard may not be available */
+                      }
+                    }}
+                  >
+                    {snippetCopied ? "Copied snippet" : "Copy snippet"}
+                  </Button>
+                </div>
+              </div>
             </div>
           )}
         </div>
       </div>
 
-      {/* Archive */}
+      {/* Danger Zone */}
       <div className="space-y-4">
-        <div className="text-xs font-medium text-amber-700 uppercase tracking-wide">
-          Archive
+        <div className="text-xs font-medium text-destructive uppercase tracking-wide">
+          Danger Zone
         </div>
-        <div className="space-y-3 rounded-md border border-amber-300/60 bg-amber-100/30 px-4 py-4">
+        <div className="space-y-3 rounded-md border border-destructive/40 bg-destructive/5 px-4 py-4">
           <p className="text-sm text-muted-foreground">
-            Archive this company to hide it from the sidebar. This persists in the database.
+            Archive this company to hide it from the sidebar. This persists in
+            the database.
           </p>
           <div className="flex items-center gap-2">
             <Button
               size="sm"
-              variant="outline"
-              disabled={archiveMutation.isPending || selectedCompany.status === "archived"}
+              variant="destructive"
+              disabled={
+                archiveMutation.isPending ||
+                selectedCompany.status === "archived"
+              }
               onClick={() => {
                 if (!selectedCompanyId) return;
                 const confirmed = window.confirm(
-                  `Archive company "${selectedCompany.name}"? It will be hidden from the sidebar.`,
+                  `Archive company "${selectedCompany.name}"? It will be hidden from the sidebar.`
                 );
                 if (!confirmed) return;
-                const nextCompanyId = companies.find((company) =>
-                  company.id !== selectedCompanyId && company.status !== "archived")?.id ?? null;
-                archiveMutation.mutate({ companyId: selectedCompanyId, nextCompanyId });
+                const nextCompanyId =
+                  companies.find(
+                    (company) =>
+                      company.id !== selectedCompanyId &&
+                      company.status !== "archived"
+                  )?.id ?? null;
+                archiveMutation.mutate({
+                  companyId: selectedCompanyId,
+                  nextCompanyId
+                });
               }}
             >
               {archiveMutation.isPending
                 ? "Archiving..."
                 : selectedCompany.status === "archived"
-                  ? "Already archived"
-                  : "Archive company"}
+                ? "Already archived"
+                : "Archive company"}
             </Button>
             {archiveMutation.isError && (
               <span className="text-xs text-destructive">
@@ -317,3 +434,117 @@ export function CompanySettings() {
     </div>
   );
 }
+
+function buildAgentSnippet(input: AgentSnippetInput) {
+  const candidateUrls = buildCandidateOnboardingUrls(input);
+  const resolutionTestUrl = buildResolutionTestUrl(input);
+
+  const candidateList =
+    candidateUrls.length > 0
+      ? candidateUrls.map((u) => `- ${u}`).join("\n")
+      : "- (No candidate URLs available yet.)";
+
+  const connectivityBlock =
+    candidateUrls.length === 0
+      ? `No candidate URLs are available. Ask your user to configure a reachable hostname in Paperclip, then retry.
+Suggested steps:
+- choose a hostname that resolves to the Paperclip host from your runtime
+- run: pnpm paperclipai allowed-hostname <host>
+- restart Paperclip
+- verify with: curl -fsS http://<host>:3100/api/health
+- regenerate this invite snippet`
+      : `If none are reachable, ask your user to add a reachable hostname in Paperclip, restart, and retry.
+Suggested command:
+- pnpm paperclipai allowed-hostname <host>
+Then verify with: curl -fsS <base-url>/api/health`;
+
+  const resolutionLine = resolutionTestUrl
+    ? `\nYou MUST test Paperclip-to-gateway reachability, call: ${resolutionTestUrl}?url=<urlencoded-gateway-url> (using the hostname that worked above). Do not assume your 172.x is necessarily reachable from Paperclip. Test it. `
+    : "";
+
+  return `You're invited to join a Paperclip organization.
+
+The URLs you should try are:
+${candidateList}
+
+Connectivity guidance:
+If you are running on a different machine than Paperclip, Paperclip must be reachable at one of the hostnames used above.
+Verify the hostname works from your runtime with: GET <base-url>/api/health
+
+${connectivityBlock}
+
+For your "agentName", just use your own agent name (OpenClaw or whatever your name is) and send it directly.
+You also need to send a gateway URL that Paperclip can access. Check your config and include that URL.${resolutionLine}
+
+---
+
+This onboarding flow is for OpenClaw Gateway.
+When you submit the join request, use:
+- \`adapterType: "openclaw_gateway"\`
+- \`agentDefaultsPayload.url\` as your \`ws://\` or \`wss://\` gateway URL
+- \`agentDefaultsPayload.headers["x-openclaw-token"]\` with your gateway token
+- (legacy accepted) \`agentDefaultsPayload.headers["x-openclaw-auth"]\`
+- Keep device auth enabled (recommended). If \`devicePrivateKeyPem\` is omitted, Paperclip will generate and persist one during join so pairing approvals remain stable.
+- Only use \`disableDeviceAuth=true\` for special environments where pairing cannot be completed.
+
+Do NOT use \`/v1/responses\` or \`/hooks/*\` in this join flow.
+
+Before you do anything, please respond to your user that you understand the instructions and you're going to work on them. Then do the step above in another session called "paperclip-onboarding" and then tell your user when you're done. Update your user in intermediate steps along the way so they know what's going on.
+
+Then after you've connected to Paperclip (exchanged keys etc.) you MUST review and follow the onboarding instructions in onboarding.txt they give you.
+
+`;
+}
+
+function buildCandidateOnboardingUrls(input: AgentSnippetInput): string[] {
+  const candidates = (input.connectionCandidates ?? [])
+    .map((candidate) => candidate.trim())
+    .filter(Boolean);
+  const urls = new Set<string>();
+  let onboardingUrl: URL | null = null;
+
+  try {
+    onboardingUrl = new URL(input.onboardingTextUrl);
+    urls.add(onboardingUrl.toString());
+  } catch {
+    const trimmed = input.onboardingTextUrl.trim();
+    if (trimmed) {
+      urls.add(trimmed);
+    }
+  }
+
+  if (!onboardingUrl) {
+    for (const candidate of candidates) {
+      urls.add(candidate);
+    }
+    return Array.from(urls);
+  }
+
+  const onboardingPath = `${onboardingUrl.pathname}${onboardingUrl.search}`;
+  for (const candidate of candidates) {
+    try {
+      const base = new URL(candidate);
+      urls.add(`${base.origin}${onboardingPath}`);
+    } catch {
+      urls.add(candidate);
+    }
+  }
+
+  return Array.from(urls);
+}
+
+function buildResolutionTestUrl(input: AgentSnippetInput): string | null {
+  const explicit = input.testResolutionUrl?.trim();
+  if (explicit) return explicit;
+
+  try {
+    const onboardingUrl = new URL(input.onboardingTextUrl);
+    const testPath = onboardingUrl.pathname.replace(
+      /\/onboarding\.txt$/,
+      "/test-resolution"
+    );
+    return `${onboardingUrl.origin}${testPath}`;
+  } catch {
+    return null;
+  }
+}

ui/src/pages/Inbox.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Link, useLocation, useNavigate } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { approvalsApi } from "../api/approvals";
@@ -34,7 +34,7 @@ import {
   Clock,
   ArrowUpRight,
   XCircle,
-  UserCheck,
+  X,
   RotateCcw,
 } from "lucide-react";
 import { Identity } from "../components/Identity";
@@ -42,13 +42,14 @@ import { PageTabBar } from "../components/PageTabBar";
 import type { HeartbeatRun, Issue, JoinRequest } from "@paperclipai/shared";
 
 const STALE_THRESHOLD_MS = 24 * 60 * 60 * 1000; // 24 hours
+const RECENT_ISSUES_LIMIT = 100;
 const FAILED_RUN_STATUSES = new Set(["failed", "timed_out"]);
 const ACTIONABLE_APPROVAL_STATUSES = new Set(["pending", "revision_requested"]);
 
 type InboxTab = "new" | "all";
 type InboxCategoryFilter =
   | "everything"
-  | "assigned_to_me"
+  | "issues_i_touched"
   | "join_requests"
   | "approvals"
   | "failed_runs"
@@ -56,13 +57,43 @@ type InboxCategoryFilter =
   | "stale_work";
 type InboxApprovalFilter = "all" | "actionable" | "resolved";
 type SectionKey =
-  | "assigned_to_me"
+  | "issues_i_touched"
   | "join_requests"
   | "approvals"
   | "failed_runs"
   | "alerts"
   | "stale_work";
 
+const DISMISSED_KEY = "paperclip:inbox:dismissed";
+
+function loadDismissed(): Set<string> {
+  try {
+    const raw = localStorage.getItem(DISMISSED_KEY);
+    return raw ? new Set(JSON.parse(raw)) : new Set();
+  } catch {
+    return new Set();
+  }
+}
+
+function saveDismissed(ids: Set<string>) {
+  localStorage.setItem(DISMISSED_KEY, JSON.stringify([...ids]));
+}
+
+function useDismissedItems() {
+  const [dismissed, setDismissed] = useState<Set<string>>(loadDismissed);
+
+  const dismiss = useCallback((id: string) => {
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      saveDismissed(next);
+      return next;
+    });
+  }, []);
+
+  return { dismissed, dismiss };
+}
+
 const RUN_SOURCE_LABELS: Record<string, string> = {
   timer: "Scheduled",
   assignment: "Assignment",
@@ -106,6 +137,23 @@ function runFailureMessage(run: HeartbeatRun): string {
   return firstNonEmptyLine(run.error) ?? firstNonEmptyLine(run.stderrExcerpt) ?? "Run exited with an error.";
 }
 
+function normalizeTimestamp(value: string | Date | null | undefined): number {
+  if (!value) return 0;
+  const timestamp = new Date(value).getTime();
+  return Number.isFinite(timestamp) ? timestamp : 0;
+}
+
+function issueLastActivityTimestamp(issue: Issue): number {
+  const lastExternalCommentAt = normalizeTimestamp(issue.lastExternalCommentAt);
+  if (lastExternalCommentAt > 0) return lastExternalCommentAt;
+
+  const updatedAt = normalizeTimestamp(issue.updatedAt);
+  const myLastTouchAt = normalizeTimestamp(issue.myLastTouchAt);
+  if (myLastTouchAt > 0 && updatedAt <= myLastTouchAt) return 0;
+
+  return updatedAt;
+}
+
 function readIssueIdFromRun(run: HeartbeatRun): string | null {
   const context = run.contextSnapshot;
   if (!context) return null;
@@ -123,10 +171,12 @@ function FailedRunCard({
   run,
   issueById,
   agentName: linkedAgentName,
+  onDismiss,
 }: {
   run: HeartbeatRun;
   issueById: Map<string, Issue>;
   agentName: string | null;
+  onDismiss: () => void;
 }) {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -165,6 +215,14 @@ function FailedRunCard({
   return (
     <div className="group relative overflow-hidden rounded-xl border border-red-500/30 bg-gradient-to-br from-red-500/10 via-card to-card p-4">
       <div className="absolute right-0 top-0 h-24 w-24 rounded-full bg-red-500/10 blur-2xl" />
+      <button
+        type="button"
+        onClick={onDismiss}
+        className="absolute right-2 top-2 z-10 rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100"
+        aria-label="Dismiss"
+      >
+        <X className="h-4 w-4" />
+      </button>
       <div className="relative space-y-3">
         {issue ? (
           <Link
@@ -182,9 +240,9 @@ function FailedRunCard({
           </span>
         )}
 
-        <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div className="min-w-0 flex-1">
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               <span className="rounded-md bg-red-500/20 p-1.5">
                 <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
               </span>
@@ -199,12 +257,12 @@ function FailedRunCard({
               {sourceLabel} run failed {timeAgo(run.createdAt)}
             </p>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:justify-end">
             <Button
               type="button"
               variant="outline"
               size="sm"
-              className="h-8 px-2.5"
+              className="h-8 shrink-0 px-2.5"
               onClick={() => retryRun.mutate()}
               disabled={retryRun.isPending}
             >
@@ -215,7 +273,7 @@ function FailedRunCard({
               type="button"
               variant="outline"
               size="sm"
-              className="h-8 px-2.5"
+              className="h-8 shrink-0 px-2.5"
               asChild
             >
               <Link to={`/agents/${run.agentId}/runs/${run.id}`}>
@@ -253,6 +311,7 @@ export function Inbox() {
   const [actionError, setActionError] = useState<string | null>(null);
   const [allCategoryFilter, setAllCategoryFilter] = useState<InboxCategoryFilter>("everything");
   const [allApprovalFilter, setAllApprovalFilter] = useState<InboxApprovalFilter>("all");
+  const { dismissed, dismiss } = useDismissedItems();
 
   const pathSegment = location.pathname.split("/").pop() ?? "new";
   const tab: InboxTab = pathSegment === "all" ? "all" : "new";
@@ -308,14 +367,14 @@ export function Inbox() {
     enabled: !!selectedCompanyId,
   });
   const {
-    data: assignedToMeIssuesRaw = [],
-    isLoading: isAssignedToMeLoading,
+    data: touchedIssuesRaw = [],
+    isLoading: isTouchedIssuesLoading,
   } = useQuery({
-    queryKey: queryKeys.issues.listAssignedToMe(selectedCompanyId!),
+    queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId!),
     queryFn: () =>
       issuesApi.list(selectedCompanyId!, {
-        assigneeUserId: "me",
-        status: "backlog,todo,in_progress,in_review,blocked",
+        touchedByUserId: "me",
+        status: "backlog,todo,in_progress,in_review,blocked,done",
       }),
     enabled: !!selectedCompanyId,
   });
@@ -326,13 +385,22 @@ export function Inbox() {
     enabled: !!selectedCompanyId,
   });
 
-  const staleIssues = issues ? getStaleIssues(issues) : [];
-  const assignedToMeIssues = useMemo(
-    () =>
-      [...assignedToMeIssuesRaw].sort(
-        (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
-      ),
-    [assignedToMeIssuesRaw],
+  const staleIssues = useMemo(
+    () => (issues ? getStaleIssues(issues) : []).filter((i) => !dismissed.has(`stale:${i.id}`)),
+    [issues, dismissed],
+  );
+  const sortByMostRecentActivity = useCallback(
+    (a: Issue, b: Issue) => {
+      const activityDiff = issueLastActivityTimestamp(b) - issueLastActivityTimestamp(a);
+      if (activityDiff !== 0) return activityDiff;
+      return normalizeTimestamp(b.updatedAt) - normalizeTimestamp(a.updatedAt);
+    },
+    [],
+  );
+
+  const touchedIssues = useMemo(
+    () => [...touchedIssuesRaw].sort(sortByMostRecentActivity).slice(0, RECENT_ISSUES_LIMIT),
+    [sortByMostRecentActivity, touchedIssuesRaw],
   );
 
   const agentById = useMemo(() => {
@@ -348,8 +416,8 @@ export function Inbox() {
   }, [issues]);
 
   const failedRuns = useMemo(
-    () => getLatestFailedRunsByAgent(heartbeatRuns ?? []),
-    [heartbeatRuns],
+    () => getLatestFailedRunsByAgent(heartbeatRuns ?? []).filter((r) => !dismissed.has(`run:${r.id}`)),
+    [heartbeatRuns, dismissed],
   );
 
   const allApprovals = useMemo(
@@ -430,25 +498,48 @@ export function Inbox() {
     },
   });
 
+  const [fadingOutIssues, setFadingOutIssues] = useState<Set<string>>(new Set());
+
+  const markReadMutation = useMutation({
+    mutationFn: (id: string) => issuesApi.markRead(id),
+    onMutate: (id) => {
+      setFadingOutIssues((prev) => new Set(prev).add(id));
+    },
+    onSuccess: () => {
+      if (selectedCompanyId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId) });
+        queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId) });
+        queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId) });
+      }
+    },
+    onSettled: (_data, _error, id) => {
+      setTimeout(() => {
+        setFadingOutIssues((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }, 300);
+    },
+  });
+
   if (!selectedCompanyId) {
     return <EmptyState icon={InboxIcon} message="Select a company to view inbox." />;
   }
 
   const hasRunFailures = failedRuns.length > 0;
-  const showAggregateAgentError = !!dashboard && dashboard.agents.error > 0 && !hasRunFailures;
+  const showAggregateAgentError = !!dashboard && dashboard.agents.error > 0 && !hasRunFailures && !dismissed.has("alert:agent-errors");
   const showBudgetAlert =
     !!dashboard &&
     dashboard.costs.monthBudgetCents > 0 &&
-    dashboard.costs.monthUtilizationPercent >= 80;
+    dashboard.costs.monthUtilizationPercent >= 80 &&
+    !dismissed.has("alert:budget");
   const hasAlerts = showAggregateAgentError || showBudgetAlert;
   const hasStale = staleIssues.length > 0;
   const hasJoinRequests = joinRequests.length > 0;
-  const hasAssignedToMe = assignedToMeIssues.length > 0;
+  const hasTouchedIssues = touchedIssues.length > 0;
 
   const newItemCount =
-    assignedToMeIssues.length +
-    joinRequests.length +
-    actionableApprovals.length +
     failedRuns.length +
     staleIssues.length +
     (showAggregateAgentError ? 1 : 0) +
@@ -456,8 +547,8 @@ export function Inbox() {
 
   const showJoinRequestsCategory =
     allCategoryFilter === "everything" || allCategoryFilter === "join_requests";
-  const showAssignedCategory =
-    allCategoryFilter === "everything" || allCategoryFilter === "assigned_to_me";
+  const showTouchedCategory =
+    allCategoryFilter === "everything" || allCategoryFilter === "issues_i_touched";
   const showApprovalsCategory = allCategoryFilter === "everything" || allCategoryFilter === "approvals";
   const showFailedRunsCategory =
     allCategoryFilter === "everything" || allCategoryFilter === "failed_runs";
@@ -465,7 +556,7 @@ export function Inbox() {
   const showStaleCategory = allCategoryFilter === "everything" || allCategoryFilter === "stale_work";
 
   const approvalsToRender = tab === "new" ? actionableApprovals : filteredAllApprovals;
-  const showAssignedSection = tab === "new" ? hasAssignedToMe : showAssignedCategory && hasAssignedToMe;
+  const showTouchedSection = tab === "new" ? hasTouchedIssues : showTouchedCategory && hasTouchedIssues;
   const showJoinRequestsSection =
     tab === "new" ? hasJoinRequests : showJoinRequestsCategory && hasJoinRequests;
   const showApprovalsSection =
@@ -478,12 +569,12 @@ export function Inbox() {
   const showStaleSection = tab === "new" ? hasStale : showStaleCategory && hasStale;
 
   const visibleSections = [
-    showAssignedSection ? "assigned_to_me" : null,
-    showApprovalsSection ? "approvals" : null,
-    showJoinRequestsSection ? "join_requests" : null,
     showFailedRunsSection ? "failed_runs" : null,
     showAlertsSection ? "alerts" : null,
     showStaleSection ? "stale_work" : null,
+    showApprovalsSection ? "approvals" : null,
+    showJoinRequestsSection ? "join_requests" : null,
+    showTouchedSection ? "issues_i_touched" : null,
   ].filter((key): key is SectionKey => key !== null);
 
   const allLoaded =
@@ -491,7 +582,7 @@ export function Inbox() {
     !isApprovalsLoading &&
     !isDashboardLoading &&
     !isIssuesLoading &&
-    !isAssignedToMeLoading &&
+    !isTouchedIssuesLoading &&
     !isRunsLoading;
 
   const showSeparatorBefore = (key: SectionKey) => visibleSections.indexOf(key) > 0;
@@ -531,7 +622,7 @@ export function Inbox() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="everything">All categories</SelectItem>
-                <SelectItem value="assigned_to_me">Assigned to me</SelectItem>
+                <SelectItem value="issues_i_touched">My recent issues</SelectItem>
                 <SelectItem value="join_requests">Join requests</SelectItem>
                 <SelectItem value="approvals">Approvals</SelectItem>
                 <SelectItem value="failed_runs">Failed runs</SelectItem>
@@ -569,41 +660,14 @@ export function Inbox() {
       {allLoaded && visibleSections.length === 0 && (
         <EmptyState
           icon={InboxIcon}
-          message={tab === "new" ? "You're all caught up!" : "No inbox items match these filters."}
+          message={
+            tab === "new"
+              ? "No issues you're involved in yet."
+              : "No inbox items match these filters."
+          }
         />
       )}
 
-      {showAssignedSection && (
-        <>
-          {showSeparatorBefore("assigned_to_me") && <Separator />}
-          <div>
-            <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-              Assigned To Me
-            </h3>
-            <div className="divide-y divide-border border border-border">
-              {assignedToMeIssues.map((issue) => (
-                <Link
-                  key={issue.id}
-                  to={`/issues/${issue.identifier ?? issue.id}`}
-                  className="flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50 no-underline text-inherit"
-                >
-                  <UserCheck className="h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" />
-                  <PriorityIcon priority={issue.priority} />
-                  <StatusIcon status={issue.status} />
-                  <span className="text-xs font-mono text-muted-foreground">
-                    {issue.identifier ?? issue.id.slice(0, 8)}
-                  </span>
-                  <span className="flex-1 truncate text-sm">{issue.title}</span>
-                  <span className="shrink-0 text-xs text-muted-foreground">
-                    updated {timeAgo(issue.updatedAt)}
-                  </span>
-                </Link>
-              ))}
-            </div>
-          </div>
-        </>
-      )}
-
       {showApprovalsSection && (
         <>
           {showSeparatorBefore("approvals") && <Separator />}
@@ -700,6 +764,7 @@ export function Inbox() {
                   run={run}
                   issueById={issueById}
                   agentName={agentName(run.agentId)}
+                  onDismiss={() => dismiss(`run:${run.id}`)}
                 />
               ))}
             </div>
@@ -716,29 +781,49 @@ export function Inbox() {
             </h3>
             <div className="divide-y divide-border border border-border">
               {showAggregateAgentError && (
-                <Link
-                  to="/agents"
-                  className="flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50 no-underline text-inherit"
-                >
-                  <AlertTriangle className="h-4 w-4 shrink-0 text-red-600 dark:text-red-400" />
-                  <span className="text-sm">
-                    <span className="font-medium">{dashboard!.agents.error}</span>{" "}
-                    {dashboard!.agents.error === 1 ? "agent has" : "agents have"} errors
-                  </span>
-                </Link>
+                <div className="group/alert relative flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50">
+                  <Link
+                    to="/agents"
+                    className="flex flex-1 cursor-pointer items-center gap-3 no-underline text-inherit"
+                  >
+                    <AlertTriangle className="h-4 w-4 shrink-0 text-red-600 dark:text-red-400" />
+                    <span className="text-sm">
+                      <span className="font-medium">{dashboard!.agents.error}</span>{" "}
+                      {dashboard!.agents.error === 1 ? "agent has" : "agents have"} errors
+                    </span>
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => dismiss("alert:agent-errors")}
+                    className="rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover/alert:opacity-100"
+                    aria-label="Dismiss"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                </div>
               )}
               {showBudgetAlert && (
-                <Link
-                  to="/costs"
-                  className="flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50 no-underline text-inherit"
-                >
-                  <AlertTriangle className="h-4 w-4 shrink-0 text-yellow-400" />
-                  <span className="text-sm">
-                    Budget at{" "}
-                    <span className="font-medium">{dashboard!.costs.monthUtilizationPercent}%</span>{" "}
-                    utilization this month
-                  </span>
-                </Link>
+                <div className="group/alert relative flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50">
+                  <Link
+                    to="/costs"
+                    className="flex flex-1 cursor-pointer items-center gap-3 no-underline text-inherit"
+                  >
+                    <AlertTriangle className="h-4 w-4 shrink-0 text-yellow-400" />
+                    <span className="text-sm">
+                      Budget at{" "}
+                      <span className="font-medium">{dashboard!.costs.monthUtilizationPercent}%</span>{" "}
+                      utilization this month
+                    </span>
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => dismiss("alert:budget")}
+                    className="rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover/alert:opacity-100"
+                    aria-label="Dismiss"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                </div>
               )}
             </div>
           </div>
@@ -754,38 +839,110 @@ export function Inbox() {
             </h3>
             <div className="divide-y divide-border border border-border">
               {staleIssues.map((issue) => (
-                <Link
+                <div
                   key={issue.id}
-                  to={`/issues/${issue.identifier ?? issue.id}`}
-                  className="flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50 no-underline text-inherit"
+                  className="group/stale relative flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
                 >
-                  <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  <PriorityIcon priority={issue.priority} />
-                  <StatusIcon status={issue.status} />
-                  <span className="text-xs font-mono text-muted-foreground">
-                    {issue.identifier ?? issue.id.slice(0, 8)}
-                  </span>
-                  <span className="flex-1 truncate text-sm">{issue.title}</span>
-                  {issue.assigneeAgentId &&
-                    (() => {
-                      const name = agentName(issue.assigneeAgentId);
-                      return name ? (
-                        <Identity name={name} size="sm" />
-                      ) : (
-                        <span className="font-mono text-xs text-muted-foreground">
-                          {issue.assigneeAgentId.slice(0, 8)}
-                        </span>
-                      );
-                    })()}
-                  <span className="shrink-0 text-xs text-muted-foreground">
-                    updated {timeAgo(issue.updatedAt)}
-                  </span>
-                </Link>
+                  <Link
+                    to={`/issues/${issue.identifier ?? issue.id}`}
+                    className="flex flex-1 cursor-pointer items-center gap-3 no-underline text-inherit"
+                  >
+                    <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <PriorityIcon priority={issue.priority} />
+                    <StatusIcon status={issue.status} />
+                    <span className="text-xs font-mono text-muted-foreground">
+                      {issue.identifier ?? issue.id.slice(0, 8)}
+                    </span>
+                    <span className="flex-1 truncate text-sm">{issue.title}</span>
+                    {issue.assigneeAgentId &&
+                      (() => {
+                        const name = agentName(issue.assigneeAgentId);
+                        return name ? (
+                          <Identity name={name} size="sm" />
+                        ) : (
+                          <span className="font-mono text-xs text-muted-foreground">
+                            {issue.assigneeAgentId.slice(0, 8)}
+                          </span>
+                        );
+                      })()}
+                    <span className="shrink-0 text-xs text-muted-foreground">
+                      updated {timeAgo(issue.updatedAt)}
+                    </span>
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => dismiss(`stale:${issue.id}`)}
+                    className="rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover/stale:opacity-100"
+                    aria-label="Dismiss"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                </div>
               ))}
             </div>
           </div>
         </>
       )}
+
+      {showTouchedSection && (
+        <>
+          {showSeparatorBefore("issues_i_touched") && <Separator />}
+          <div>
+            <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+              My Recent Issues
+            </h3>
+            <div className="divide-y divide-border border border-border">
+              {touchedIssues.map((issue) => {
+                const isUnread = issue.isUnreadForMe && !fadingOutIssues.has(issue.id);
+                const isFading = fadingOutIssues.has(issue.id);
+                return (
+                  <div
+                    key={issue.id}
+                    className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
+                  >
+                    <span className="flex w-4 shrink-0 justify-center">
+                      {(isUnread || isFading) && (
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            markReadMutation.mutate(issue.id);
+                          }}
+                          className="group/dot flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
+                          aria-label="Mark as read"
+                        >
+                          <span
+                            className={`h-2.5 w-2.5 rounded-full bg-blue-600 dark:bg-blue-400 transition-opacity duration-300 ${
+                              isFading ? "opacity-0" : "opacity-100"
+                            }`}
+                          />
+                        </button>
+                      )}
+                    </span>
+                    <Link
+                      to={`/issues/${issue.identifier ?? issue.id}`}
+                      className="flex flex-1 min-w-0 cursor-pointer items-center gap-3 no-underline text-inherit"
+                    >
+                      <PriorityIcon priority={issue.priority} />
+                      <StatusIcon status={issue.status} />
+                      <span className="text-xs font-mono text-muted-foreground">
+                        {issue.identifier ?? issue.id.slice(0, 8)}
+                      </span>
+                      <span className="flex-1 truncate text-sm">{issue.title}</span>
+                      <span className="shrink-0 text-xs text-muted-foreground">
+                        {issue.lastExternalCommentAt
+                          ? `commented ${timeAgo(issue.lastExternalCommentAt)}`
+                          : `updated ${timeAgo(issue.updatedAt)}`}
+                      </span>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 }

ui/src/pages/InviteLanding.tsx

@@ -10,16 +10,13 @@ import { AGENT_ADAPTER_TYPES } from "@paperclipai/shared";
 import type { AgentAdapterType, JoinRequest } from "@paperclipai/shared";
 
 type JoinType = "human" | "agent";
-const joinAdapterOptions: AgentAdapterType[] = [
-  "openclaw",
-  ...AGENT_ADAPTER_TYPES.filter((type): type is Exclude<AgentAdapterType, "openclaw"> => type !== "openclaw"),
-];
+const joinAdapterOptions: AgentAdapterType[] = [...AGENT_ADAPTER_TYPES];
 
 const adapterLabels: Record<string, string> = {
   claude_local: "Claude (local)",
   codex_local: "Codex (local)",
   opencode_local: "OpenCode (local)",
-  openclaw: "OpenClaw",
+  openclaw_gateway: "OpenClaw Gateway",
   cursor: "Cursor (local)",
   process: "Process",
   http: "HTTP",

ui/src/pages/IssueDetail.tsx

@@ -8,7 +8,6 @@ import { agentsApi } from "../api/agents";
 import { authApi } from "../api/auth";
 import { projectsApi } from "../api/projects";
 import { useCompany } from "../context/CompanyContext";
-import { useToast } from "../context/ToastContext";
 import { usePanel } from "../context/PanelContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
@@ -146,7 +145,6 @@ function ActorIdentity({ evt, agentMap }: { evt: ActivityEvent; agentMap: Map<st
 export function IssueDetail() {
   const { issueId } = useParams<{ issueId: string }>();
   const { selectedCompanyId } = useCompany();
-  const { pushToast } = useToast();
   const { openPanel, closePanel, panelVisible, setPanelVisible } = usePanel();
   const { setBreadcrumbs } = useBreadcrumbs();
   const queryClient = useQueryClient();
@@ -160,6 +158,7 @@ export function IssueDetail() {
   });
   const [attachmentError, setAttachmentError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const lastMarkedReadIssueIdRef = useRef<string | null>(null);
 
   const { data: issue, isLoading, error } = useQuery({
     queryKey: queryKeys.issues.detail(issueId!),
@@ -383,38 +382,36 @@ export function IssueDetail() {
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId!) });
     if (selectedCompanyId) {
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId) });
     }
   };
 
+  const markIssueRead = useMutation({
+    mutationFn: (id: string) => issuesApi.markRead(id),
+    onSuccess: () => {
+      if (selectedCompanyId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId) });
+        queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId) });
+        queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId) });
+      }
+    },
+  });
+
   const updateIssue = useMutation({
     mutationFn: (data: Record<string, unknown>) => issuesApi.update(issueId!, data),
-    onSuccess: (updated) => {
+    onSuccess: () => {
       invalidateIssue();
-      const issueRef = updated.identifier ?? `Issue ${updated.id.slice(0, 8)}`;
-      pushToast({
-        dedupeKey: `activity:issue.updated:${updated.id}`,
-        title: `${issueRef} updated`,
-        body: truncate(updated.title, 96),
-        tone: "success",
-        action: { label: `View ${issueRef}`, href: `/issues/${updated.identifier ?? updated.id}` },
-      });
     },
   });
 
   const addComment = useMutation({
     mutationFn: ({ body, reopen }: { body: string; reopen?: boolean }) =>
       issuesApi.addComment(issueId!, body, reopen),
-    onSuccess: (comment) => {
+    onSuccess: () => {
       invalidateIssue();
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(issueId!) });
-      const issueRef = issue?.identifier ?? (issueId ? `Issue ${issueId.slice(0, 8)}` : "Issue");
-      pushToast({
-        dedupeKey: `activity:issue.comment_added:${issueId}:${comment.id}`,
-        title: `Comment posted on ${issueRef}`,
-        body: issue?.title ? truncate(issue.title, 96) : undefined,
-        tone: "success",
-        action: issueId ? { label: `View ${issueRef}`, href: `/issues/${issue?.identifier ?? issueId}` } : undefined,
-      });
     },
   });
 
@@ -434,17 +431,9 @@ export function IssueDetail() {
         assigneeUserId: reassignment.assigneeUserId,
         ...(reopen ? { status: "todo" } : {}),
       }),
-    onSuccess: (updated) => {
+    onSuccess: () => {
       invalidateIssue();
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(issueId!) });
-      const issueRef = updated.identifier ?? (issueId ? `Issue ${issueId.slice(0, 8)}` : "Issue");
-      pushToast({
-        dedupeKey: `activity:issue.reassigned:${updated.id}`,
-        title: `${issueRef} reassigned`,
-        body: issue?.title ? truncate(issue.title, 96) : undefined,
-        tone: "success",
-        action: issueId ? { label: `View ${issueRef}`, href: `/issues/${issue?.identifier ?? issueId}` } : undefined,
-      });
     },
   });
 
@@ -476,11 +465,12 @@ export function IssueDetail() {
   });
 
   useEffect(() => {
+    const titleLabel = issue?.title ?? issueId ?? "Issue";
     setBreadcrumbs([
       { label: "Issues", href: "/issues" },
-      { label: issue?.title ?? issueId ?? "Issue" },
+      { label: hasLiveRuns ? `🔵 ${titleLabel}` : titleLabel },
     ]);
-  }, [setBreadcrumbs, issue, issueId]);
+  }, [setBreadcrumbs, issue, issueId, hasLiveRuns]);
 
   // Redirect to identifier-based URL if navigated via UUID
   useEffect(() => {
@@ -489,6 +479,13 @@ export function IssueDetail() {
     }
   }, [issue, issueId, navigate]);
 
+  useEffect(() => {
+    if (!issue?.id) return;
+    if (lastMarkedReadIssueIdRef.current === issue.id) return;
+    lastMarkedReadIssueIdRef.current = issue.id;
+    markIssueRead.mutate(issue.id);
+  }, [issue?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (issue) {
       openPanel(

ui/src/pages/Issues.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useCallback, useRef } from "react";
 import { useSearchParams } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { issuesApi } from "../api/issues";
@@ -17,6 +17,31 @@ export function Issues() {
   const [searchParams] = useSearchParams();
   const queryClient = useQueryClient();
 
+  const initialSearch = searchParams.get("q") ?? "";
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const handleSearchChange = useCallback((search: string) => {
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      const trimmedSearch = search.trim();
+      const currentSearch = new URLSearchParams(window.location.search).get("q") ?? "";
+      if (currentSearch === trimmedSearch) return;
+
+      const url = new URL(window.location.href);
+      if (trimmedSearch) {
+        url.searchParams.set("q", trimmedSearch);
+      } else {
+        url.searchParams.delete("q");
+      }
+
+      const nextUrl = `${url.pathname}${url.search}${url.hash}`;
+      window.history.replaceState(window.history.state, "", nextUrl);
+    }, 300);
+  }, []);
+
+  useEffect(() => {
+    return () => clearTimeout(debounceRef.current);
+  }, []);
+
   const { data: agents } = useQuery({
     queryKey: queryKeys.agents.list(selectedCompanyId!),
     queryFn: () => agentsApi.list(selectedCompanyId!),
@@ -69,6 +94,8 @@ export function Issues() {
       liveIssueIds={liveIssueIds}
       viewStateKey="paperclip:issues-view"
       initialAssignees={searchParams.get("assignee") ? [searchParams.get("assignee")!] : undefined}
+      initialSearch={initialSearch}
+      onSearchChange={handleSearchChange}
       onUpdateIssue={(id, data) => updateIssue.mutate({ id, data })}
     />
   );

ui/src/pages/NewAgent.tsx

@@ -0,0 +1,334 @@
+import { useState, useEffect } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useSearchParams } from "@/lib/router";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { agentsApi } from "../api/agents";
+import { queryKeys } from "../lib/queryKeys";
+import { AGENT_ROLES } from "@paperclipai/shared";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Shield, User } from "lucide-react";
+import { cn, agentUrl } from "../lib/utils";
+import { roleLabels } from "../components/agent-config-primitives";
+import { AgentConfigForm, type CreateConfigValues } from "../components/AgentConfigForm";
+import { defaultCreateValues } from "../components/agent-config-defaults";
+import { getUIAdapter } from "../adapters";
+import { AgentIcon } from "../components/AgentIconPicker";
+import {
+  DEFAULT_CODEX_LOCAL_BYPASS_APPROVALS_AND_SANDBOX,
+  DEFAULT_CODEX_LOCAL_MODEL,
+} from "@paperclipai/adapter-codex-local";
+import { DEFAULT_CURSOR_LOCAL_MODEL } from "@paperclipai/adapter-cursor-local";
+
+const SUPPORTED_ADVANCED_ADAPTER_TYPES = new Set<CreateConfigValues["adapterType"]>([
+  "claude_local",
+  "codex_local",
+  "opencode_local",
+  "pi_local",
+  "cursor",
+  "openclaw_gateway",
+]);
+
+function createValuesForAdapterType(
+  adapterType: CreateConfigValues["adapterType"],
+): CreateConfigValues {
+  const { adapterType: _discard, ...defaults } = defaultCreateValues;
+  const nextValues: CreateConfigValues = { ...defaults, adapterType };
+  if (adapterType === "codex_local") {
+    nextValues.model = DEFAULT_CODEX_LOCAL_MODEL;
+    nextValues.dangerouslyBypassSandbox =
+      DEFAULT_CODEX_LOCAL_BYPASS_APPROVALS_AND_SANDBOX;
+  } else if (adapterType === "cursor") {
+    nextValues.model = DEFAULT_CURSOR_LOCAL_MODEL;
+  } else if (adapterType === "opencode_local") {
+    nextValues.model = "";
+  }
+  return nextValues;
+}
+
+export function NewAgent() {
+  const { selectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const presetAdapterType = searchParams.get("adapterType");
+
+  const [name, setName] = useState("");
+  const [title, setTitle] = useState("");
+  const [role, setRole] = useState("general");
+  const [reportsTo, setReportsTo] = useState("");
+  const [configValues, setConfigValues] = useState<CreateConfigValues>(defaultCreateValues);
+  const [roleOpen, setRoleOpen] = useState(false);
+  const [reportsToOpen, setReportsToOpen] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const {
+    data: adapterModels,
+    error: adapterModelsError,
+    isLoading: adapterModelsLoading,
+    isFetching: adapterModelsFetching,
+  } = useQuery({
+    queryKey: selectedCompanyId
+      ? queryKeys.agents.adapterModels(selectedCompanyId, configValues.adapterType)
+      : ["agents", "none", "adapter-models", configValues.adapterType],
+    queryFn: () => agentsApi.adapterModels(selectedCompanyId!, configValues.adapterType),
+    enabled: Boolean(selectedCompanyId),
+  });
+
+  const isFirstAgent = !agents || agents.length === 0;
+  const effectiveRole = isFirstAgent ? "ceo" : role;
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: "Agents", href: "/agents" },
+      { label: "New Agent" },
+    ]);
+  }, [setBreadcrumbs]);
+
+  useEffect(() => {
+    if (isFirstAgent) {
+      if (!name) setName("CEO");
+      if (!title) setTitle("CEO");
+    }
+  }, [isFirstAgent]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const requested = presetAdapterType;
+    if (!requested) return;
+    if (!SUPPORTED_ADVANCED_ADAPTER_TYPES.has(requested as CreateConfigValues["adapterType"])) {
+      return;
+    }
+    setConfigValues((prev) => {
+      if (prev.adapterType === requested) return prev;
+      return createValuesForAdapterType(requested as CreateConfigValues["adapterType"]);
+    });
+  }, [presetAdapterType]);
+
+  const createAgent = useMutation({
+    mutationFn: (data: Record<string, unknown>) =>
+      agentsApi.hire(selectedCompanyId!, data),
+    onSuccess: (result) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
+      navigate(agentUrl(result.agent));
+    },
+    onError: (error) => {
+      setFormError(error instanceof Error ? error.message : "Failed to create agent");
+    },
+  });
+
+  function buildAdapterConfig() {
+    const adapter = getUIAdapter(configValues.adapterType);
+    return adapter.buildAdapterConfig(configValues);
+  }
+
+  function handleSubmit() {
+    if (!selectedCompanyId || !name.trim()) return;
+    setFormError(null);
+    if (configValues.adapterType === "opencode_local") {
+      const selectedModel = configValues.model.trim();
+      if (!selectedModel) {
+        setFormError("OpenCode requires an explicit model in provider/model format.");
+        return;
+      }
+      if (adapterModelsError) {
+        setFormError(
+          adapterModelsError instanceof Error
+            ? adapterModelsError.message
+            : "Failed to load OpenCode models.",
+        );
+        return;
+      }
+      if (adapterModelsLoading || adapterModelsFetching) {
+        setFormError("OpenCode models are still loading. Please wait and try again.");
+        return;
+      }
+      const discovered = adapterModels ?? [];
+      if (!discovered.some((entry) => entry.id === selectedModel)) {
+        setFormError(
+          discovered.length === 0
+            ? "No OpenCode models discovered. Run `opencode models` and authenticate providers."
+            : `Configured OpenCode model is unavailable: ${selectedModel}`,
+        );
+        return;
+      }
+    }
+    createAgent.mutate({
+      name: name.trim(),
+      role: effectiveRole,
+      ...(title.trim() ? { title: title.trim() } : {}),
+      ...(reportsTo ? { reportsTo } : {}),
+      adapterType: configValues.adapterType,
+      adapterConfig: buildAdapterConfig(),
+      runtimeConfig: {
+        heartbeat: {
+          enabled: configValues.heartbeatEnabled,
+          intervalSec: configValues.intervalSec,
+          wakeOnDemand: true,
+          cooldownSec: 10,
+          maxConcurrentRuns: 1,
+        },
+      },
+      budgetMonthlyCents: 0,
+    });
+  }
+
+  const currentReportsTo = (agents ?? []).find((a) => a.id === reportsTo);
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <div>
+        <h1 className="text-lg font-semibold">New Agent</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Advanced agent configuration
+        </p>
+      </div>
+
+      <div className="border border-border">
+        {/* Name */}
+        <div className="px-4 pt-4 pb-2">
+          <input
+            className="w-full text-lg font-semibold bg-transparent outline-none placeholder:text-muted-foreground/50"
+            placeholder="Agent name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            autoFocus
+          />
+        </div>
+
+        {/* Title */}
+        <div className="px-4 pb-2">
+          <input
+            className="w-full bg-transparent outline-none text-sm text-muted-foreground placeholder:text-muted-foreground/40"
+            placeholder="Title (e.g. VP of Engineering)"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+
+        {/* Property chips: Role + Reports To */}
+        <div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
+          <Popover open={roleOpen} onOpenChange={setRoleOpen}>
+            <PopoverTrigger asChild>
+              <button
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
+                  isFirstAgent && "opacity-60 cursor-not-allowed"
+                )}
+                disabled={isFirstAgent}
+              >
+                <Shield className="h-3 w-3 text-muted-foreground" />
+                {roleLabels[effectiveRole] ?? effectiveRole}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-36 p-1" align="start">
+              {AGENT_ROLES.map((r) => (
+                <button
+                  key={r}
+                  className={cn(
+                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                    r === role && "bg-accent"
+                  )}
+                  onClick={() => { setRole(r); setRoleOpen(false); }}
+                >
+                  {roleLabels[r] ?? r}
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+
+          <Popover open={reportsToOpen} onOpenChange={setReportsToOpen}>
+            <PopoverTrigger asChild>
+              <button
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
+                  isFirstAgent && "opacity-60 cursor-not-allowed"
+                )}
+                disabled={isFirstAgent}
+              >
+                {currentReportsTo ? (
+                  <>
+                    <AgentIcon icon={currentReportsTo.icon} className="h-3 w-3 text-muted-foreground" />
+                    {`Reports to ${currentReportsTo.name}`}
+                  </>
+                ) : (
+                  <>
+                    <User className="h-3 w-3 text-muted-foreground" />
+                    {isFirstAgent ? "Reports to: N/A (CEO)" : "Reports to..."}
+                  </>
+                )}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-48 p-1" align="start">
+              <button
+                className={cn(
+                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                  !reportsTo && "bg-accent"
+                )}
+                onClick={() => { setReportsTo(""); setReportsToOpen(false); }}
+              >
+                No manager
+              </button>
+              {(agents ?? []).map((a) => (
+                <button
+                  key={a.id}
+                  className={cn(
+                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
+                    a.id === reportsTo && "bg-accent"
+                  )}
+                  onClick={() => { setReportsTo(a.id); setReportsToOpen(false); }}
+                >
+                  <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
+                  {a.name}
+                  <span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* Shared config form */}
+        <AgentConfigForm
+          mode="create"
+          values={configValues}
+          onChange={(patch) => setConfigValues((prev) => ({ ...prev, ...patch }))}
+          adapterModels={adapterModels}
+        />
+
+        {/* Footer */}
+        <div className="border-t border-border px-4 py-3">
+          {isFirstAgent && (
+            <p className="text-xs text-muted-foreground mb-2">This will be the CEO</p>
+          )}
+          {formError && (
+            <p className="text-xs text-destructive mb-2">{formError}</p>
+          )}
+          <div className="flex items-center justify-end gap-2">
+            <Button variant="outline" size="sm" onClick={() => navigate("/agents")}>
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              disabled={!name.trim() || createAgent.isPending}
+              onClick={handleSubmit}
+            >
+              {createAgent.isPending ? "Creating…" : "Create agent"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/src/pages/OrgChart.tsx

@@ -10,7 +10,7 @@ import { EmptyState } from "../components/EmptyState";
 import { PageSkeleton } from "../components/PageSkeleton";
 import { AgentIcon } from "../components/AgentIconPicker";
 import { Network } from "lucide-react";
-import type { Agent } from "@paperclipai/shared";
+import { AGENT_ROLE_LABELS, type Agent } from "@paperclipai/shared";
 
 // Layout constants
 const CARD_W = 200;
@@ -120,7 +120,7 @@ const adapterLabels: Record<string, string> = {
   codex_local: "Codex",
   opencode_local: "OpenCode",
   cursor: "Cursor",
-  openclaw: "OpenClaw",
+  openclaw_gateway: "OpenClaw Gateway",
   process: "Process",
   http: "HTTP",
 };
@@ -421,11 +421,7 @@ export function OrgChart() {
   );
 }
 
-const roleLabels: Record<string, string> = {
-  ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO",
-  engineer: "Engineer", designer: "Designer", pm: "PM",
-  qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General",
-};
+const roleLabels = AGENT_ROLE_LABELS as Record<string, string>;
 
 function roleLabel(role: string): string {
   return roleLabels[role] ?? role;

ui/src/pages/ProjectDetail.tsx

@@ -16,7 +16,11 @@ import { InlineEditor } from "../components/InlineEditor";
 import { StatusBadge } from "../components/StatusBadge";
 import { IssuesList } from "../components/IssuesList";
 import { PageSkeleton } from "../components/PageSkeleton";
-import { projectRouteRef } from "../lib/utils";
+import { projectRouteRef, cn } from "../lib/utils";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { SlidersHorizontal } from "lucide-react";
 
 /* ── Top-level tab types ── */
 
@@ -194,8 +198,9 @@ export function ProjectDetail() {
     filter?: string;
   }>();
   const { companies, selectedCompanyId, setSelectedCompanyId } = useCompany();
-  const { openPanel, closePanel } = usePanel();
+  const { openPanel, closePanel, panelVisible, setPanelVisible } = usePanel();
   const { setBreadcrumbs } = useBreadcrumbs();
+  const [mobilePropsOpen, setMobilePropsOpen] = useState(false);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const location = useLocation();
@@ -309,6 +314,27 @@ export function ProjectDetail() {
           as="h2"
           className="text-xl font-bold"
         />
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          className="ml-auto md:hidden shrink-0"
+          onClick={() => setMobilePropsOpen(true)}
+          title="Properties"
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          className={cn(
+            "shrink-0 ml-auto transition-opacity duration-200 hidden md:flex",
+            panelVisible ? "opacity-0 pointer-events-none w-0 overflow-hidden" : "opacity-100",
+          )}
+          onClick={() => setPanelVisible(true)}
+          title="Show properties"
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+        </Button>
       </div>
 
       {/* Top-level project tabs */}
@@ -350,6 +376,20 @@ export function ProjectDetail() {
       {activeTab === "list" && project?.id && resolvedCompanyId && (
         <ProjectIssuesList projectId={project.id} companyId={resolvedCompanyId} />
       )}
+
+      {/* Mobile properties drawer */}
+      <Sheet open={mobilePropsOpen} onOpenChange={setMobilePropsOpen}>
+        <SheetContent side="bottom" className="max-h-[85dvh] pb-[env(safe-area-inset-bottom)]">
+          <SheetHeader>
+            <SheetTitle className="text-sm">Properties</SheetTitle>
+          </SheetHeader>
+          <ScrollArea className="flex-1 overflow-y-auto">
+            <div className="px-4 pb-4">
+              <ProjectProperties project={project} onUpdate={(data) => updateProject.mutate(data)} />
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
     </div>
   );
 }