@agentprojectcontext/apx 1.25.0 → 1.27.1

package/src/interfaces/web/src/screens/base/AgentDefaultsTab.tsx

@@ -0,0 +1,274 @@
+import { useState, type ReactNode } from "react";
+import useSWR from "swr";
+import { Bot, Crown, Plus, Sparkles, Trash2, Wrench, Pencil, RotateCcw } from "lucide-react";
+import { Agents } from "../../lib/api";
+import { Section } from "../../components/Section";
+import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch, Textarea } from "../../components/ui";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip";
+import { useToast } from "../../components/Toast";
+import { t } from "../../i18n";
+import type { AgentEntry } from "../../types/daemon";
+
+type VaultAgent = AgentEntry & { source?: "bundled" | "user" | "user-override" };
+
+// Two-layer vault editor:
+//   - bundled defaults (read-only on disk, ALWAYS visible unless the user
+//     explicitly tombstoned them)
+//   - user layer (~/.apx/agents) — new agents the user created, or
+//     copy-on-write overrides of bundled defaults
+// The "Mostrar removidos" toggle exposes tombstoned slugs so they can be
+// restored without a CLI roundtrip.
+export function AgentDefaultsTab() {
+  const toast = useToast();
+  const [showRemoved, setShowRemoved] = useState(false);
+  const swrKey = showRemoved ? "/agents/vault?include_removed=1" : "/agents/vault";
+  const vault = useSWR(swrKey, () => Agents.vault({ includeRemoved: showRemoved }));
+  const items = (vault.data || []) as VaultAgent[];
+
+  const [editing, setEditing] = useState<VaultAgent | "new" | null>(null);
+
+  const remove = async (a: VaultAgent) => {
+    const tombstoning = a.source !== "user";
+    const msg = tombstoning
+      ? t("base.defaults_tombstone_msg", { slug: a.slug })
+      : t("base.defaults_delete_msg", { slug: a.slug });
+    if (!confirm(msg)) return;
+    try {
+      await Agents.vaultRemove(a.slug);
+      toast.success(tombstoning ? t("base.defaults_hidden") : t("base.defaults_deleted"));
+      vault.mutate();
+    } catch (e) { toast.error((e as Error).message); }
+  };
+
+  const restore = async (slug: string) => {
+    try { await Agents.vaultRestore(slug); toast.success(t("base.defaults_restored")); vault.mutate(); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+
+  return (
+    <Section
+      title={t("base.defaults_title")}
+      description={t("base.defaults_desc")}
+      action={
+        <div className="flex items-center gap-2">
+          <Switch checked={showRemoved} onChange={setShowRemoved} label={t("base.defaults_show_removed")} />
+          <Button size="sm" onClick={() => setEditing("new")}>
+            <Plus size={14} /> {t("base.defaults_new")}
+          </Button>
+        </div>
+      }
+    >
+      {vault.isLoading && <Loading />}
+      {!vault.isLoading && items.length === 0 && (
+        <Empty>{t("base.defaults_empty")}</Empty>
+      )}
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {items.map((a) => {
+          const tombstoned = showRemoved && (a as { tombstoned?: boolean }).tombstoned;
+          return (
+            <div
+              key={a.slug}
+              className={`flex flex-col gap-2 rounded-xl border bg-card p-4 ${tombstoned ? "border-dashed border-border opacity-60" : "border-border"}`}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex min-w-0 items-center gap-2">
+                  <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-slate-600 to-gray-600">
+                    {a.is_master ? <Crown className="size-4 text-white" /> : <Bot className="size-4 text-white" />}
+                  </div>
+                  <span className="truncate text-sm font-semibold">{a.slug}</span>
+                  <SourceBadge source={a.source} />
+                </div>
+                <div className="flex shrink-0 items-center gap-0.5">
+                  {tombstoned ? (
+                    <IconBtn label={t("base.defaults_restore")} onClick={() => restore(a.slug)} variant="secondary"><RotateCcw size={13} /></IconBtn>
+                  ) : (
+                    <>
+                      <IconBtn label={t("base.defaults_edit")} onClick={() => setEditing(a)} variant="ghost"><Pencil size={13} /></IconBtn>
+                      <IconBtn
+                        label={a.source === "user" ? t("base.defaults_delete") : t("base.defaults_hide")}
+                        onClick={() => remove(a)}
+                        variant="ghost-destructive"
+                      >
+                        <Trash2 size={13} />
+                      </IconBtn>
+                    </>
+                  )}
+                </div>
+              </div>
+              {a.model
+                ? <Badge tone="info">{a.model}</Badge>
+                : <span className="text-[10px] text-muted-fg">modelo: default del router</span>}
+              {a.description && <p className="line-clamp-3 text-xs text-muted-fg">{a.description}</p>}
+              <div className="flex flex-wrap gap-1">
+                {a.role && <Badge>{a.role}</Badge>}
+                {a.skills?.map((s) => <span key={s} className="inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] text-muted-fg"><Sparkles size={9} /> {s}</span>)}
+                {a.tools?.map((t) => <span key={t} className="inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] text-muted-fg"><Wrench size={9} /> {t}</span>)}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {editing !== null && (
+        <VaultAgentDialog
+          agent={editing === "new" ? null : editing}
+          onClose={() => setEditing(null)}
+          onSaved={() => { setEditing(null); vault.mutate(); }}
+        />
+      )}
+    </Section>
+  );
+}
+
+function SourceBadge({ source }: { source?: VaultAgent["source"] }) {
+  if (source === "user")          return <Badge tone="success">user</Badge>;
+  if (source === "user-override") return <Badge tone="warning">override</Badge>;
+  return <Badge tone="muted">bundled</Badge>;
+}
+
+// Small square icon button with a tooltip; keeps the card header compact.
+// We use the ui Button for the destructive variant fallback via className.
+function IconBtn({
+  label,
+  onClick,
+  variant = "ghost",
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  variant?: "ghost" | "ghost-destructive" | "secondary";
+  children: ReactNode;
+}) {
+  const base = "inline-flex size-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+  const variants = {
+    ghost: "text-muted-fg hover:bg-accent hover:text-accent-fg",
+    "ghost-destructive": "text-muted-fg hover:bg-destructive/15 hover:text-destructive",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  } as const;
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button type="button" onClick={onClick} aria-label={label} className={`${base} ${variants[variant]}`}>
+            {children}
+          </button>
+        }
+      />
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+// Create / edit dialog. When opened on a bundled agent the API patch will
+// copy-on-write it to the user layer; we don't need to do anything special
+// here — just submit the merged fields.
+function VaultAgentDialog({
+  agent, onClose, onSaved,
+}: { agent: VaultAgent | null; onClose: () => void; onSaved: () => void }) {
+  const toast = useToast();
+  const [busy, setBusy] = useState(false);
+  const isNew = !agent;
+  const [slug, setSlug] = useState(agent?.slug ?? "");
+  const [role, setRole] = useState(agent?.role ?? "");
+  const [model, setModel] = useState(agent?.model ?? "");
+  const [description, setDescription] = useState(agent?.description ?? "");
+  const [language, setLanguage] = useState<string>(
+    (agent as unknown as { language?: string })?.language ?? "es",
+  );
+  const [skills, setSkills] = useState((agent?.skills ?? []).join(", "));
+  const [tools, setTools] = useState((agent?.tools ?? []).join(", "));
+  const [isMaster, setIsMaster] = useState(!!agent?.is_master);
+  const [body, setBody] = useState((agent as unknown as { body?: string })?.body ?? "");
+
+  const submit = async () => {
+    const fields = {
+      role: role || undefined,
+      model: model || undefined,
+      description: description || undefined,
+      language: language || undefined,
+      skills,    // CSV; the API normalizes to an array
+      tools,
+      is_master: isMaster,
+    };
+    setBusy(true);
+    try {
+      if (isNew) {
+        if (!/^[a-z][a-z0-9_-]*$/.test(slug)) {
+          throw new Error(t("base.defaults_slug_invalid"));
+        }
+        await Agents.vaultCreate(slug, fields, body);
+        toast.success(t("base.defaults_created", { slug }));
+      } else {
+        await Agents.vaultPatch(agent!.slug, { fields, body });
+        toast.success(t("base.defaults_saved", { slug: agent!.slug }));
+      }
+      onSaved();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open
+      onClose={onClose}
+      title={isNew ? t("base.defaults_new_title") : t("base.defaults_edit_title", { slug: agent!.slug })}
+      description={isNew
+        ? t("base.defaults_new_desc")
+        : agent!.source === "bundled"
+          ? t("base.defaults_bundled_desc")
+          : t("base.defaults_user_desc")
+      }
+      size="lg"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={submit} loading={busy}>{t("common.save")}</Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        {isNew && (
+          <Field label="slug" hint="kebab-case, ej. reviewer, my-agent, content-writer">
+            <Input autoFocus value={slug} onChange={(e) => setSlug(e.target.value)} placeholder="reviewer" />
+          </Field>
+        )}
+        <div className="grid grid-cols-2 gap-3">
+          <Field label="role">
+            <Input value={role} onChange={(e) => setRole(e.target.value)} placeholder="Code reviewer" />
+          </Field>
+          <Field label="model">
+            <Input value={model} onChange={(e) => setModel(e.target.value)} placeholder="openrouter:..." />
+          </Field>
+          <Field label="language">
+            <Input value={language} onChange={(e) => setLanguage(e.target.value)} placeholder="es" />
+          </Field>
+          <Field label="is_master">
+            <div className="flex h-9 items-center">
+              <Switch checked={isMaster} onChange={setIsMaster} label={t("base.defaults_master_label")} />
+            </div>
+          </Field>
+        </div>
+        <Field label="description">
+          <Input value={description} onChange={(e) => setDescription(e.target.value)} />
+        </Field>
+        <Field label="skills" hint="separadas por coma">
+          <Input value={skills} onChange={(e) => setSkills(e.target.value)} placeholder="code-review, git" />
+        </Field>
+        <Field label="tools" hint="separadas por coma">
+          <Input value={tools} onChange={(e) => setTools(e.target.value)} placeholder="read, write, run" />
+        </Field>
+        <Field label="body" hint="markdown — extiende el system prompt del agente">
+          <Textarea
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            rows={10}
+            placeholder="# Mission\n..."
+          />
+        </Field>
+      </div>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/screens/base/ComingSoon.tsx

@@ -0,0 +1,16 @@
+import { Construction } from "lucide-react";
+import { Section } from "../../components/Section";
+
+export function ComingSoon({ title, note }: { title: string; note?: string }) {
+  return (
+    <Section title={title} description="Vista del menú Base (espacio general).">
+      <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border bg-muted/20 py-16 text-center">
+        <Construction className="size-8 text-muted-fg" />
+        <div>
+          <p className="text-sm font-medium">Próximamente</p>
+          {note && <p className="mt-1 max-w-md text-xs text-muted-fg">{note}</p>}
+        </div>
+      </div>
+    </Section>
+  );
+}

package/src/interfaces/web/src/screens/base/GlobalTasksTab.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import useSWR from "swr";
+import { Tasks } from "../../lib/api";
+import { Section } from "../../components/Section";
+import { Badge, Button, Empty, Loading } from "../../components/ui";
+import { t } from "../../i18n";
+
+// All projects' tasks, aggregated (GET /tasks).
+export function GlobalTasksTab() {
+  const navigate = useNavigate();
+  const [state, setState] = useState<"open" | "done" | "dropped" | "all">("open");
+  const list = useSWR(`/tasks?state=${state}`, () => Tasks.global(state));
+
+  return (
+    <Section
+      title={t("project.global_tasks.title")}
+      description={t("project.global_tasks.subtitle")}
+      action={
+        <div className="flex gap-1">
+          {(["open", "done", "dropped", "all"] as const).map((s) => (
+            <Button key={s} size="sm" variant={state === s ? "primary" : "ghost"} onClick={() => setState(s)}>{s}</Button>
+          ))}
+        </div>
+      }
+    >
+      {list.isLoading && <Loading />}
+      {!list.isLoading && (list.data?.length ?? 0) === 0 && <Empty>{t("project.global_tasks.empty")}</Empty>}
+      <ul className="space-y-2 text-sm">
+        {(list.data || []).map((task) => (
+          <li key={`${task.project_id}-${task.id}`} className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+            <button
+              type="button"
+              onClick={() => navigate(`/p/${task.project_id}/tasks`)}
+              title={t("project.global_tasks.go_project")}
+            >
+              <Badge tone="info">{(task.project_name || "").split("/").pop() || task.project_id}</Badge>
+            </button>
+            <div className="min-w-0 flex-1">
+              <div className="font-medium">{task.title}</div>
+              <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-fg">
+                <span>{task.state}</span>
+                {task.agent && <Badge tone="muted">@{task.agent}</Badge>}
+                {task.tags?.map((tg) => <span key={tg}>#{tg}</span>)}
+                {task.due && <span>{t("project.global_tasks.due")} {task.due}</span>}
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}

package/src/interfaces/web/src/screens/base/LogsTab.tsx

@@ -0,0 +1,188 @@
+import { useMemo, useState } from "react";
+import useSWR from "swr";
+import { ArrowDownLeft, ArrowUpRight, RefreshCw } from "lucide-react";
+import { Admin, Messages } from "../../lib/api";
+import type { MessageEntry } from "../../types/daemon";
+import { Section } from "../../components/Section";
+import { Badge, Button, Empty, Input, Loading } from "../../components/ui";
+import { UiSelect } from "../../components/UiSelect";
+import { t } from "../../i18n";
+
+const CLAMP = 320;
+
+function fmtTs(ts: string): string {
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return ts;
+  return d.toLocaleString(undefined, {
+    month: "short", day: "2-digit",
+    hour: "2-digit", minute: "2-digit", second: "2-digit",
+  });
+}
+
+function actorLabel(m: MessageEntry): string {
+  return m.agent_slug || m.actor_id || m.author || m.actor_kind || "—";
+}
+
+function LogRow({ m }: { m: MessageEntry }) {
+  const [expanded, setExpanded] = useState(false);
+  const long = (m.body?.length || 0) > CLAMP;
+  const shown = !long || expanded ? m.body : `${m.body.slice(0, CLAMP)}…`;
+  return (
+    <li className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+      <span className="mt-0.5 shrink-0">
+        {m.direction === "in"
+          ? <ArrowDownLeft size={14} className="text-blue-400" />
+          : <ArrowUpRight size={14} className="text-emerald-400" />}
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-fg">
+          <span className="font-mono">{fmtTs(m.ts)}</span>
+          <Badge tone="info">{m.channel}</Badge>
+          {m.type && <Badge>{m.type}</Badge>}
+          <span className="font-medium text-foreground">{actorLabel(m)}</span>
+        </div>
+        {m.body && (
+          <p className="mt-1 whitespace-pre-wrap break-words text-xs">{shown}</p>
+        )}
+        {long && (
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="mt-1 text-[11px] font-medium text-sky-400 hover:underline"
+          >
+            {expanded ? t("logs.show_less") : t("logs.show_more")}
+          </button>
+        )}
+      </div>
+    </li>
+  );
+}
+
+function DaemonErrors() {
+  const [open, setOpen] = useState(false);
+  const logs = useSWR(open ? "/admin/logs?errors" : null, () => Admin.logs("errors", 200));
+  const entries = logs.data?.entries || [];
+  return (
+    <details className="mb-3 rounded-lg border border-border bg-muted/20" onToggle={(e) => setOpen((e.target as HTMLDetailsElement).open)}>
+      <summary className="cursor-pointer px-3 py-2 text-xs font-medium text-muted-fg">
+        {t("logs.daemon_errors")}{entries.length ? ` · ${entries.length}` : ""}
+      </summary>
+      <div className="border-t border-border p-3">
+        {logs.isLoading && <Loading />}
+        {open && !logs.isLoading && entries.length === 0 && <p className="text-xs text-muted-fg">{t("logs.no_errors")}</p>}
+        <ul className="space-y-1">
+          {entries.map((e, i) => (
+            <li key={i} className="rounded-md bg-card px-2 py-1 text-[11px]">
+              <div className="flex items-center gap-2 text-muted-fg">
+                {typeof e.ts === "string" && <span className="font-mono">{new Date(e.ts).toLocaleString()}</span>}
+                {typeof e.level === "string" && <span className="text-destructive">{e.level}</span>}
+              </div>
+              <p className="whitespace-pre-wrap break-words font-mono">
+                {String(e.msg ?? e.message ?? e.error ?? e.raw ?? JSON.stringify(e)).slice(0, 500)}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </details>
+  );
+}
+
+export function LogsTab({ pid }: { pid?: string }) {
+  const isGlobal = !pid || String(pid) === "0";
+  const [channel, setChannel] = useState("");
+  const [dir, setDir] = useState("");
+  const [type, setType] = useState("");
+  const [q, setQ] = useState("");
+  const ch = channel.trim() || undefined;
+
+  const key = isGlobal
+    ? `/messages/global?channel=${ch ?? ""}`
+    : `/projects/${pid}/messages?channel=${ch ?? ""}`;
+  const list = useSWR<MessageEntry[]>(key, () =>
+    isGlobal
+      ? Messages.global({ channel: ch, limit: 300 })
+      : Messages.project(pid!, { channel: ch, limit: 300 })
+  );
+
+  // Newest first, regardless of backend ordering.
+  const sorted = useMemo(
+    () => [...(list.data || [])].sort((a, b) => (b.ts || "").localeCompare(a.ts || "")),
+    [list.data],
+  );
+
+  const types = useMemo(
+    () => Array.from(new Set(sorted.map((m) => m.type).filter(Boolean))) as string[],
+    [sorted],
+  );
+
+  const rows = useMemo(() => sorted.filter((m) => {
+    if (dir && m.direction !== dir) return false;
+    if (type && m.type !== type) return false;
+    if (q && !(m.body || "").toLowerCase().includes(q.toLowerCase())) return false;
+    return true;
+  }), [sorted, dir, type, q]);
+
+  return (
+    <Section
+      title={t("logs.title")}
+      description={isGlobal ? t("logs.desc_global") : t("logs.desc_project")}
+      action={
+        <div className="flex items-center gap-2">
+          <Input
+            placeholder={t("logs.filter_channel")}
+            value={channel}
+            onChange={(e) => setChannel(e.target.value)}
+            className="w-44"
+          />
+          <Button size="sm" variant="secondary" onClick={() => list.mutate()}>
+            <RefreshCw size={13} />
+          </Button>
+        </div>
+      }
+    >
+      {isGlobal && <DaemonErrors />}
+
+      {/* Option filters (client-side over the loaded window) */}
+      <div className="mb-3 flex flex-wrap items-center gap-2">
+        <div className="w-36">
+          <UiSelect
+            value={dir}
+            onChange={setDir}
+            placeholder={t("logs.filter_dir")}
+            options={[
+              { value: "", label: t("logs.all_directions") },
+              { value: "in", label: t("logs.in") },
+              { value: "out", label: t("logs.out") },
+            ]}
+          />
+        </div>
+        <div className="w-40">
+          <UiSelect
+            value={type}
+            onChange={setType}
+            placeholder={t("logs.filter_type")}
+            options={[{ value: "", label: t("logs.all_types") }, ...types.map((ty) => ({ value: ty, label: ty }))]}
+          />
+        </div>
+        <Input
+          placeholder={t("logs.search_text")}
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          className="w-56"
+        />
+        <span className="text-[11px] text-muted-fg">{rows.length} {t("logs.count_of")} {sorted.length}</span>
+      </div>
+
+      {list.isLoading && <Loading />}
+      {list.error && <Empty>{t("logs.error", { msg: (list.error as Error).message })}</Empty>}
+      {!list.isLoading && !list.error && rows.length === 0 && (
+        <Empty>{ch ? t("logs.no_activity_ch", { ch }) : t("logs.no_activity")}</Empty>
+      )}
+
+      <ul className="space-y-1 text-sm">
+        {rows.map((m, i) => <LogRow key={`${m.ts}-${i}`} m={m} />)}
+      </ul>
+    </Section>
+  );
+}

package/src/interfaces/web/src/screens/base/ModelsTab.tsx

@@ -0,0 +1,13 @@
+import { DefaultRouterCard } from "../../components/settings/DefaultRouterCard";
+import { EnginesPanel } from "../../components/settings/EnginesPanel";
+
+// Base "Models" page: general default router (no per-task cases) on top of the
+// provider list. EnginesPanel is reused as-is from Settings.
+export function ModelsTab() {
+  return (
+    <div className="space-y-6">
+      <DefaultRouterCard />
+      <EnginesPanel />
+    </div>
+  );
+}

package/src/interfaces/web/src/screens/base/SessionsTab.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { RefreshCw } from "lucide-react";
+import { Sessions } from "../../lib/api";
+import { Section } from "../../components/Section";
+import { Badge, Button, Empty, Loading } from "../../components/ui";
+import { UiSelect } from "../../components/UiSelect";
+import { t } from "../../i18n";
+
+const ENGINE_TONE: Record<string, "success" | "info" | "warning" | "muted"> = {
+  apx: "success", claude: "info", codex: "warning",
+};
+
+export function SessionsTab() {
+  const [engine, setEngine] = useState("");
+  const list = useSWR(`/sessions?engine=${engine}`, () => Sessions.global(engine || undefined));
+  const rows = list.data?.sessions || [];
+
+  return (
+    <Section
+      title={t("base.sessions_title")}
+      description={t("base.sessions_desc")}
+      action={
+        <div className="flex items-center gap-2">
+          <div className="w-40">
+            <UiSelect
+              value={engine}
+              onChange={setEngine}
+              options={[
+                { value: "", label: t("base.sessions_all") },
+                { value: "apx", label: "apx" },
+                { value: "claude", label: "claude" },
+                { value: "codex", label: "codex" },
+              ]}
+            />
+          </div>
+          <Button size="sm" variant="secondary" onClick={() => list.mutate()}><RefreshCw size={13} /></Button>
+        </div>
+      }
+    >
+      {list.isLoading && <Loading />}
+      {list.error && <Empty>{t("base.sessions_error", { msg: (list.error as Error).message })}</Empty>}
+      {!list.isLoading && !list.error && rows.length === 0 && <Empty>{t("base.sessions_empty")}</Empty>}
+      <ul className="space-y-1 text-sm">
+        {rows.map((s, i) => (
+          <li key={`${s.engine}-${s.id}-${i}`} className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+            <Badge tone={ENGINE_TONE[s.engine] || "muted"}>{s.engine}</Badge>
+            <div className="min-w-0 flex-1">
+              <div className="truncate">{s.title || s.id}</div>
+              <div className="truncate font-mono text-[10px] text-muted-fg">{s.cwd}</div>
+            </div>
+            {s.mtime > 0 && <span className="shrink-0 text-[11px] text-muted-fg">{new Date(s.mtime).toLocaleString()}</span>}
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}

package/src/interfaces/web/src/screens/base/WorkspacesTab.tsx

@@ -0,0 +1,49 @@
+import { useNavigate } from "react-router-dom";
+import { FolderKanban, Plus } from "lucide-react";
+import { Section } from "../../components/Section";
+import { Badge, Button, Empty, Loading } from "../../components/ui";
+import { projectKindLabel } from "../../components/layout/ProjectSidebar";
+import { useProjects } from "../../hooks/useProjects";
+import { t } from "../../i18n";
+
+export function WorkspacesTab() {
+  const navigate = useNavigate();
+  const { projects, isLoading } = useProjects();
+
+  return (
+    <Section
+      title={t("base.workspaces_title")}
+      description={t("base.workspaces_desc")}
+      action={
+        <Button size="sm" variant="primary" onClick={() => navigate("/p/0/workspaces?action=add-project")}>
+          <Plus size={14} /> {t("base.workspaces_new")}
+        </Button>
+      }
+    >
+      {isLoading && <Loading />}
+      {!isLoading && projects.length === 0 && <Empty>{t("base.workspaces_empty")}</Empty>}
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {projects.map((p) => {
+          const isBase = String(p.id) === "0";
+          const label = isBase ? t("base.title") : (p.name || p.path.split("/").pop() || String(p.id));
+          return (
+            <button
+              key={p.id}
+              type="button"
+              onClick={() => navigate(`/p/${p.id}`)}
+              className="flex cursor-pointer flex-col gap-2 rounded-xl border border-border bg-card p-4 text-left transition-colors hover:border-muted-fg/50"
+            >
+              <div className="flex items-center gap-2">
+                <FolderKanban className="size-4 text-muted-fg" />
+                <span className="truncate text-sm font-semibold">{label}</span>
+                <Badge tone={isBase ? "success" : "info"}>{isBase ? t("base.title") : projectKindLabel(p.kind)}</Badge>
+              </div>
+              <p className="truncate font-mono text-[10px] text-muted-fg">{p.path}</p>
+            </button>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}