npm - @agentprojectcontext/apx - Versions diffs - 1.35.0 → 1.36.0 - Mend

@agentprojectcontext/apx 1.35.0 → 1.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-C0fm31dY.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-UcAqlBO6.css">
+    <script type="module" crossorigin src="/assets/index-DJKA763h.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cm0KyPoZ.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/src/App.tsx CHANGED Viewed

@@ -179,7 +179,6 @@ function settingsLabel(key?: string) {
 function projectLabel(key?: string) {
   switch (key) {
     case "chat": return t("project.nav.chat");
-    case "threads": return t("project.nav.threads");
     case "telegram": return t("project.nav.telegram");
     case "agents": return t("project.nav.agents");
     case "routines": return t("project.nav.routines");

package/src/interfaces/web/src/components/chat/ChatList.tsx ADDED Viewed

@@ -0,0 +1,412 @@
+import { useEffect, useMemo, useState, type ElementType } from "react";
+import useSWR from "swr";
+import clsx from "clsx";
+import {
+  Bot,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  FolderOpen,
+  MessageSquare,
+  Mic,
+  Monitor,
+  Plus,
+  Send,
+  Sparkles,
+  Timer,
+  User,
+} from "lucide-react";
+import { Conversations } from "../../lib/api";
+import { Input, Loading } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { t } from "../../i18n";
+import type { AgentEntry, ConversationListEntry } from "../../types/daemon";
+// Channel taxonomy — same channels the daemon writes ("web", "voice",
+// "desktop", "telegram", …) folded into 8 sidebar groups. Each group has an
+// icon + a fixed display order so the sidebar is stable across reloads.
+export type ChannelGroupKey =
+  | "live"
+  | "telegram"
+  | "voice"
+  | "desktop"
+  | "web"
+  | "a2a"
+  | "schedule"
+  | "other";
+interface GroupMeta {
+  label: string;
+  icon: ElementType;
+  order: number;
+}
+const GROUP_META: Record<ChannelGroupKey, GroupMeta> = {
+  live:     { label: "Live", icon: Sparkles, order: 0 },
+  telegram: { label: "Telegram", icon: Send, order: 1 },
+  voice:    { label: "Voice", icon: Mic, order: 2 },
+  desktop:  { label: "Desktop", icon: Monitor, order: 3 },
+  web:      { label: "Web", icon: MessageSquare, order: 4 },
+  a2a:      { label: "Agent ↔ Agent", icon: Bot, order: 5 },
+  schedule: { label: "Schedule", icon: Timer, order: 6 },
+  other:    { label: "Other", icon: FolderOpen, order: 7 },
+};
+function channelGroup(channel?: string): ChannelGroupKey {
+  if (!channel) return "web";
+  const c = channel.toLowerCase();
+  if (c === "telegram") return "telegram";
+  if (c === "voice" || c === "overlay") return "voice";
+  if (c === "desktop") return "desktop";
+  if (c === "web" || c === "sidebar" || c === "web-sidebar") return "web";
+  if (c === "a2a" || c.startsWith("agent")) return "a2a";
+  if (c === "schedule" || c === "cron" || c === "routine") return "schedule";
+  return "other";
+}
+// Composite key identifying a sidebar selection: either a "live" agent session
+// (no conversation file yet) or a persisted conversation tied to an agent.
+export type ChatKey =
+  | { kind: "live"; agentSlug: string }
+  | { kind: "conv"; agentSlug: string; convId: string };
+export function chatKeyToString(k: ChatKey): string {
+  return k.kind === "live" ? `live:${k.agentSlug}` : `conv:${k.agentSlug}:${k.convId}`;
+}
+interface Props {
+  pid: string;
+  agents: AgentEntry[];
+  /** Virtual super-agent slug used by the dropdown (kept in sync with ChatTab). */
+  superAgentSlug: string;
+  superAgentLabel: string;
+  selected: ChatKey;
+  onSelect: (key: ChatKey) => void;
+  onNewChat: () => void;
+}
+// Per-agent SWR fetcher. Lives in a child so adding/removing agents doesn't
+// violate the rules of hooks in the parent.
+function AgentConvFetcher({
+  pid,
+  slug,
+  onLoaded,
+}: {
+  pid: string;
+  slug: string;
+  onLoaded: (slug: string, data: ConversationListEntry[] | undefined) => void;
+}) {
+  const { data } = useSWR(
+    `/projects/${pid}/agents/${slug}/conversations`,
+    () => Conversations.list(pid, slug),
+    { revalidateOnFocus: false },
+  );
+  // Bubble fetched data up to the parent on every change.
+  useEffect(() => {
+    onLoaded(slug, data);
+  }, [slug, data]); // eslint-disable-line react-hooks/exhaustive-deps
+  return null;
+}
+export function ChatList({
+  pid,
+  agents,
+  superAgentSlug,
+  superAgentLabel,
+  selected,
+  onSelect,
+  onNewChat,
+}: Props) {
+  const [query, setQuery] = useState("");
+  const [agentFilter, setAgentFilter] = useState("");
+  const [collapsed, setCollapsed] = useState<Partial<Record<ChannelGroupKey, boolean>>>({});
+  const [byAgent, setByAgent] = useState<Record<string, ConversationListEntry[]>>({});
+  const handleLoaded = (slug: string, data: ConversationListEntry[] | undefined) => {
+    if (!data) return;
+    setByAgent((prev) => {
+      const cur = prev[slug];
+      if (cur && cur.length === data.length && cur === data) return prev;
+      return { ...prev, [slug]: data };
+    });
+  };
+  const allConvs = useMemo<ConversationListEntry[]>(() => {
+    const out: ConversationListEntry[] = [];
+    for (const a of agents) {
+      for (const c of byAgent[a.slug] || []) {
+        out.push({ ...c, agent_slug: c.agent_slug || a.slug });
+      }
+    }
+    return out;
+  }, [agents, byAgent]);
+  const filteredConvs = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return allConvs.filter((c) => {
+      if (agentFilter && c.agent_slug !== agentFilter) return false;
+      if (q) {
+        const hay = `${c.title || ""} ${c.id} ${c.agent_slug}`.toLowerCase();
+        if (!hay.includes(q)) return false;
+      }
+      return true;
+    });
+  }, [allConvs, query, agentFilter]);
+  // Group: live entries (one per applicable agent) + stored conversations by channel.
+  const groups = useMemo(() => {
+    const byKey = new Map<ChannelGroupKey, ConversationListEntry[]>();
+    for (const c of filteredConvs) {
+      const key = channelGroup(c.channel);
+      const bucket = byKey.get(key);
+      if (bucket) bucket.push(c);
+      else byKey.set(key, [c]);
+    }
+    return Array.from(byKey.entries())
+      .map(([key, items]) => ({
+        key,
+        items: items.sort(
+          (a, b) => new Date(b.started_at || 0).getTime() - new Date(a.started_at || 0).getTime(),
+        ),
+      }))
+      .sort((a, b) => GROUP_META[a.key].order - GROUP_META[b.key].order);
+  }, [filteredConvs]);
+  // "Live" agents shown at the top: super-agent + project agents matching the
+  // current agent filter (so "filter by foo" hides the others everywhere).
+  const liveAgents = useMemo(() => {
+    if (agentFilter === superAgentSlug) {
+      return [{ slug: superAgentSlug, label: superAgentLabel }];
+    }
+    const out: { slug: string; label: string }[] = [];
+    if (!agentFilter) out.push({ slug: superAgentSlug, label: superAgentLabel });
+    for (const a of agents) {
+      if (agentFilter && a.slug !== agentFilter) continue;
+      out.push({ slug: a.slug, label: a.slug });
+    }
+    return out;
+  }, [agents, agentFilter, superAgentSlug, superAgentLabel]);
+  const agentOptions = useMemo(
+    () => [
+      { value: "", label: t("project.chat.list.all_agents") },
+      { value: superAgentSlug, label: superAgentLabel },
+      ...agents.map((a) => ({ value: a.slug, label: a.slug })),
+    ],
+    [agents, superAgentSlug, superAgentLabel],
+  );
+  const totalCount = allConvs.length + liveAgents.length;
+  const anyLoaded = Object.keys(byAgent).length > 0 || agents.length === 0;
+  return (
+    <aside className="flex h-full w-72 shrink-0 flex-col border-r border-border bg-card/30">
+      {/* Hidden per-agent fetchers — one SWR per agent, but with a stable
+          component per slug so rules-of-hooks are respected. */}
+      {agents.map((a) => (
+        <AgentConvFetcher key={a.slug} pid={pid} slug={a.slug} onLoaded={handleLoaded} />
+      ))}
+      <header className="flex h-[57px] shrink-0 items-center justify-between gap-2 border-b border-border px-3">
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold">{t("project.chat.list.title")}</p>
+          <p className="text-[10px] text-muted-fg">
+            {t("project.chat.list.count", { n: totalCount })}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onNewChat}
+          className="inline-flex items-center gap-1 rounded-md border border-border bg-accent/60 px-2 py-1 text-[11px] font-medium hover:bg-accent"
+        >
+          <Plus className="size-3" /> {t("project.chat.list.new")}
+        </button>
+      </header>
+      <div className="space-y-2 border-b border-border p-2">
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t("project.chat.list.search")}
+        />
+        <UiSelect value={agentFilter} onChange={setAgentFilter} options={agentOptions} />
+      </div>
+      <div className="flex-1 space-y-3 overflow-y-auto p-2">
+        {!anyLoaded && (
+          <div className="px-2 py-1">
+            <Loading />
+          </div>
+        )}
+        {/* Live group — synthetic, always first. */}
+        {liveAgents.length > 0 && (
+          <ChannelGroup
+            keyName="live"
+            count={liveAgents.length}
+            collapsed={!!collapsed.live}
+            onToggle={() => setCollapsed((p) => ({ ...p, live: !p.live }))}
+          >
+            {liveAgents.map((a) => {
+              const isRoby = a.slug === superAgentSlug;
+              const active =
+                selected.kind === "live" && selected.agentSlug === a.slug;
+              return (
+                <ChatListItem
+                  key={`live-${a.slug}`}
+                  title={isRoby ? a.label : t("project.chat.list.live_with", { slug: a.slug })}
+                  subtitle={t("project.chat.list.live_subtitle")}
+                  badge={isRoby ? "super" : a.slug}
+                  selected={active}
+                  onClick={() => onSelect({ kind: "live", agentSlug: a.slug })}
+                />
+              );
+            })}
+          </ChannelGroup>
+        )}
+        {/* Stored conversations, grouped by channel. */}
+        {groups.map((g) => (
+          <ChannelGroup
+            key={g.key}
+            keyName={g.key}
+            count={g.items.length}
+            collapsed={!!collapsed[g.key]}
+            onToggle={() => setCollapsed((p) => ({ ...p, [g.key]: !p[g.key] }))}
+          >
+            {g.items.map((c) => {
+              const active =
+                selected.kind === "conv" &&
+                selected.agentSlug === c.agent_slug &&
+                selected.convId === c.id;
+              return (
+                <ChatListItem
+                  key={`${c.agent_slug}-${c.id}`}
+                  title={c.title || c.id}
+                  subtitle={[c.agent_slug, `${c.messages ?? 0} msg`]
+                    .filter(Boolean)
+                    .join(" · ")}
+                  badge={c.agent_slug}
+                  timeAgo={c.started_at}
+                  selected={active}
+                  onClick={() =>
+                    onSelect({ kind: "conv", agentSlug: c.agent_slug, convId: c.id })
+                  }
+                />
+              );
+            })}
+          </ChannelGroup>
+        ))}
+        {anyLoaded && allConvs.length === 0 && (
+          <p className="px-3 py-6 text-center text-xs text-muted-fg">
+            {t("project.chat.list.empty")}
+          </p>
+        )}
+      </div>
+    </aside>
+  );
+}
+function ChannelGroup({
+  keyName,
+  count,
+  collapsed,
+  onToggle,
+  children,
+}: {
+  keyName: ChannelGroupKey;
+  count: number;
+  collapsed: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  const meta = GROUP_META[keyName];
+  const Icon = meta.icon;
+  return (
+    <section className="space-y-1">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-center justify-between rounded-md px-2 py-1 text-muted-fg hover:bg-accent/30"
+      >
+        <span className="inline-flex items-center gap-1.5">
+          {collapsed ? (
+            <ChevronRight className="size-3" />
+          ) : (
+            <ChevronDown className="size-3" />
+          )}
+          <Icon className="size-3" />
+          <span className="text-[10px] font-semibold uppercase tracking-wider">
+            {meta.label}
+          </span>
+        </span>
+        <span className="text-[10px]">{count}</span>
+      </button>
+      {!collapsed && <div className="space-y-0.5">{children}</div>}
+    </section>
+  );
+}
+function ChatListItem({
+  title,
+  subtitle,
+  badge,
+  timeAgo,
+  selected,
+  onClick,
+}: {
+  title: string;
+  subtitle?: string;
+  badge?: string;
+  timeAgo?: string;
+  selected?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={clsx(
+        "w-full rounded-md border px-2.5 py-2 text-left transition-colors",
+        selected
+          ? "border-primary/50 bg-primary/10"
+          : "border-transparent hover:border-border hover:bg-accent/40",
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p className={clsx("truncate text-sm", selected ? "font-semibold" : "font-medium")}>
+          {title}
+        </p>
+        {timeAgo && (
+          <span className="inline-flex shrink-0 items-center gap-0.5 text-[10px] text-muted-fg">
+            <Clock className="size-2.5" />
+            {formatTimeAgo(timeAgo)}
+          </span>
+        )}
+      </div>
+      <div className="mt-0.5 flex items-center justify-between gap-2 text-[10px] text-muted-fg">
+        <span className="truncate">{subtitle}</span>
+        {badge && (
+          <span className="inline-flex shrink-0 items-center gap-1 rounded bg-accent/50 px-1.5 py-0.5">
+            <User className="size-2.5" />
+            {badge}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}
+function formatTimeAgo(iso?: string): string {
+  if (!iso) return "";
+  const ts = new Date(iso).getTime();
+  if (!Number.isFinite(ts)) return "";
+  const diff = Date.now() - ts;
+  const m = Math.floor(diff / 60000);
+  if (m < 1) return "now";
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h`;
+  return `${Math.floor(h / 24)}d`;
+}

package/src/interfaces/web/src/components/settings/AppearancePanel.tsx CHANGED Viewed

@@ -30,7 +30,7 @@ export function AppearancePanel() {
   };
   return (
-    <div className="space-y-6">
+    <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
       <Section title={t("settings.appearance")}>
         <div className="flex items-center gap-2">
           <Button variant={theme === "light" ? "primary" : "secondary"} onClick={() => set("light")}>{t("settings.light_mode")}</Button>

package/src/interfaces/web/src/components/settings/MemoryPanel.tsx CHANGED Viewed

@@ -101,7 +101,7 @@ export function MemoryPanel() {
   };
   return (
-    <div className="space-y-6">
+    <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
       <Section
         title={t("memory_panel.embeddings_title")}
         description="Modelo que vectoriza el historial de todos los canales para la memoria relevante. Igual que TTS/STT: elegí proveedor y modelo. 'Automático' prueba local primero y cae al offline si no hay nada."

package/src/interfaces/web/src/components/settings/SkillsInspectorPanel.tsx CHANGED Viewed

@@ -88,7 +88,7 @@ export function SkillsInspectorPanel() {
   };
   return (
-    <div className="space-y-6">
+    <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
       <Section
         title="Skill Inspector (RAG por turno)"
         description="Función experimental. Cuando está activa, el agente NO recibe la lista completa de skills en su prompt; en cada mensaje un RAG local decide qué skill(s) cargar — el cuerpo completo si hay match fuerte, una sugerencia si hay match medio, nada si no aplica. Se reevalúa cada turno: una skill que dejó de ser relevante desaparece del contexto."

package/src/interfaces/web/src/hooks/useChat.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from "react";
-import { SuperAgent, Agents } from "../lib/api";
+import { SuperAgent, Agents, Conversations } from "../lib/api";
 import type { ChatStreamEvent, ChatUsage, ConversationMessage } from "../types/daemon";
 export type ToolStatus = "running" | "done" | "error" | "deduped";
@@ -53,7 +53,14 @@ export interface UseChatResult {
   send: (text: string, opts?: SendOptions) => Promise<void>;
   stop: () => void;
   clear: () => void;
+  /** Load a persisted conversation as history and bind subsequent sends to it.
+   *  Only supported for project agents (super-agent conversations aren't
+   *  persisted per-file). Pass `null` to drop the binding without clearing. */
+  load: (agentSlug: string, conversationId: string) => Promise<void>;
   streaming: boolean;
+  /** Conversation id we're bound to, if any. Lets callers reflect "live vs
+   *  loaded" state in the UI. */
+  conversationId: string | undefined;
 }
 /** Concatenate the text parts of a message (for clipboard). */
@@ -235,6 +242,7 @@ export function applyStreamEvent(turn: ChatMsg, ev: ChatStreamEvent): ChatMsg {
 export function useChat(pid: string, onError?: (msg: string) => void): UseChatResult {
   const [msgs, setMsgs] = useState<ChatMsg[]>([]);
   const [streaming, setStreaming] = useState(false);
+  const [conversationId, setConversationId] = useState<string | undefined>(undefined);
   const abortRef = useRef<AbortController | null>(null);
   const convoRef = useRef<string | undefined>(undefined);
@@ -283,8 +291,10 @@ export function useChat(pid: string, onError?: (msg: string) => void): UseChatRe
             prompt: trimmed,
             conversation_id: convoRef.current,
             model: opts.model || undefined,
+            channel: "web",
           });
           convoRef.current = out.conversation_id;
+          setConversationId(out.conversation_id);
           patchLast((m) => ({
             ...m,
             pending: false,
@@ -334,8 +344,31 @@ export function useChat(pid: string, onError?: (msg: string) => void): UseChatRe
   const clear = useCallback(() => {
     if (streaming) return;
     convoRef.current = undefined;
+    setConversationId(undefined);
     setMsgs([]);
   }, [streaming]);
-  return { msgs, send, stop, clear, streaming };
+  const load = useCallback(
+    async (agentSlug: string, conversationId: string) => {
+      if (streaming) return;
+      try {
+        const detail = await Conversations.get(pid, agentSlug, conversationId);
+        const loaded: ChatMsg[] = detail.messages
+          .filter((m) => m.role === "user" || m.role === "assistant")
+          .map((m) => ({
+            role: m.role as "user" | "assistant",
+            parts: [{ kind: "text", text: m.content }],
+            ts: m.ts || new Date().toISOString(),
+          }));
+        convoRef.current = conversationId;
+        setConversationId(conversationId);
+        setMsgs(loaded);
+      } catch (e) {
+        onError?.((e as Error)?.message || "could not load conversation");
+      }
+    },
+    [pid, streaming, onError],
+  );
+  return { msgs, send, stop, clear, load, streaming, conversationId };
 }

package/src/interfaces/web/src/i18n/en.ts CHANGED Viewed

@@ -275,7 +275,6 @@ export const en = {
       tasks:    "Tasks",
       mcps:     "MCPs",
       vars:     "Variables",
-      threads:  "Chats",
       logs:     "Logs",
       memories: "Memories",
     },
@@ -301,6 +300,7 @@ export const en = {
       subtitle:    "Direct conversations with project agents. The super-agent does not intervene.",
       superagent_title:  "Chat with {persona}",
       superagent_subtitle: "Chat with {persona} — the APX super-agent. Can use tools (projects, tasks, mcps, agents).",
+      loaded_subtitle: "Loaded conversation with {slug}. Sending will append to this thread.",
       empty:       "Send a message to start the conversation.",
       placeholder: "Type something and press enter to send (shift+enter = new line)",
       send:        "Send",
@@ -316,6 +316,16 @@ export const en = {
       model_label: "model",
       model_hint:  "e.g. openai:gpt-5, groq:llama-3.3-70b-versatile",
       master_label: "Master agent",
+      list: {
+        title:         "Chats",
+        new:           "New",
+        search:        "Search chats…",
+        all_agents:    "All agents",
+        empty:         "No conversations yet. Start one from the right.",
+        count:         "{n} total",
+        live_with:     "Live · {slug}",
+        live_subtitle: "In-memory session",
+      },
     },
     tasks: {

package/src/interfaces/web/src/i18n/es.ts CHANGED Viewed

@@ -276,7 +276,6 @@ export const es = {
       tasks:    "Tasks",
       mcps:     "MCPs",
       vars:     "Variables",
-      threads:  "Chats",
       logs:     "Logs",
       memories: "Memorias",
     },
@@ -302,6 +301,7 @@ export const es = {
       subtitle:    "Chat directo con el agente del proyecto.",
       superagent_title:  "Chat con {persona}",
       superagent_subtitle: "Chat con {persona} — el super-agente APX. Puede usar tools (proyectos, tasks, mcps, agentes).",
+      loaded_subtitle: "Conversación cargada con {slug}. Lo que mandes se agrega a este chat.",
       empty:       "Mandá un mensaje para arrancar la conversación.",
       placeholder: "Escribí algo y enter para enviar (shift+enter = nueva línea)",
       send:        "Enviar",
@@ -317,6 +317,16 @@ export const es = {
       model_label: "modelo",
       model_hint:  "ej. openai:gpt-5, groq:llama-3.3-70b-versatile",
       master_label: "Agente master",
+      list: {
+        title:         "Chats",
+        new:           "Nuevo",
+        search:        "Buscar chats…",
+        all_agents:    "Todos los agentes",
+        empty:         "No hay conversaciones todavía. Arrancá una desde la derecha.",
+        count:         "{n} en total",
+        live_with:     "Live · {slug}",
+        live_subtitle: "Sesión en memoria",
+      },
     },
     tasks: {

package/src/interfaces/web/src/lib/api/agents.ts CHANGED Viewed

@@ -10,7 +10,7 @@ export const Agents = {
     http.patch<AgentEntry>(`/projects/${pid}/agents/${encodeURIComponent(slug)}`, body),
   remove: (pid: string, slug: string) =>
     http.del<{ ok: boolean }>(`/projects/${pid}/agents/${encodeURIComponent(slug)}`),
-  chat: (pid: string, slug: string, body: { prompt: string; conversation_id?: string; model?: string }) =>
+  chat: (pid: string, slug: string, body: { prompt: string; conversation_id?: string; model?: string; channel?: string }) =>
     http.post<{ conversation_id: string; text: string; usage?: unknown; engine: string }>(
       `/projects/${pid}/agents/${encodeURIComponent(slug)}/chat`,
       body,

package/src/interfaces/web/src/screens/ProjectScreen.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useParams, Routes, Route, useLocation, useNavigate } from "react-router-dom";
+import { useParams, Routes, Route, Navigate, useLocation, useNavigate } from "react-router-dom";
 import {
   Bot, Heart, Zap, Puzzle, FolderKanban, Settings,
   MessagesSquare, Send, KeyRound,
@@ -23,7 +23,6 @@ import { RoutinesTab } from "./project/RoutinesTab";
 import { TasksTab } from "./project/TasksTab";
 import { McpsTab } from "./project/McpsTab";
 import { VarsTab } from "./project/VarsTab";
-import { ThreadsTab } from "./project/ThreadsTab";
 import { ChatTab } from "./project/ChatTab";
 import { TelegramTab } from "./project/TelegramTab";
 import { MemoriesTab } from "./project/MemoriesTab";
@@ -31,7 +30,7 @@ import { AgentDetailScreen } from "./project/AgentDetailScreen";
 type NavKey =
   | "" | "chat" | "config" | "telegram"
-  | "agents" | "routines" | "tasks" | "mcps" | "vars" | "threads" | "logs" | "memories";
+  | "agents" | "routines" | "tasks" | "mcps" | "vars" | "logs" | "memories";
 export function ProjectScreen() {
   const navigate = useNavigate();
@@ -83,7 +82,6 @@ export function ProjectScreen() {
           { key: "",         label: t("project.nav.overview"),  icon: FolderKanban },
           { key: "telegram", label: t("project.nav.telegram"),  icon: Send },
           { key: "chat",     label: t("project.nav.chat"),      icon: MessagesSquare },
-          { key: "threads",  label: t("project.nav.threads"),   icon: MessagesSquare },
           { key: "agents",   label: t("project.nav.agents"),    icon: Bot },
           { key: "memories", label: t("project.nav.memories"),  icon: Brain },
         ],
@@ -146,7 +144,7 @@ export function ProjectScreen() {
         <Route path="tasks"        element={isBase ? <GlobalTasksTab /> : <TasksTab pid={pid} />} />
         <Route path="mcps"         element={<McpsTab pid={pid} />} />
         <Route path="vars"         element={<VarsTab pid={pid} />} />
-        <Route path="threads"      element={<ThreadsTab pid={pid} />} />
+        <Route path="threads"      element={<Navigate to={`/p/${pid}/chat`} replace />} />
         <Route path="chat"         element={<ChatTab pid={pid} />} />
         <Route path="*"            element={<Overview pid={pid} />} />
       </Routes>

package/src/interfaces/web/src/screens/SettingsScreen.tsx CHANGED Viewed

@@ -52,9 +52,11 @@ const SECTIONS: TabSection[] = [
   },
 ];
-// Tabs whose content (model router + provider grid, telegram tabs) benefits
-// from a wider container; the rest keep the cosier 3xl reading width.
-const WIDE_TABS = new Set<TabKey>(["engines", "telegram"]);
+// Tabs whose content lays out multiple top-level sections in a two-column grid
+// on xl (and so wants full available width). Single-section panels (identity,
+// super agent, devices, advanced) keep a cosier reading width so wide displays
+// don't blow form fields up to absurd widths.
+const WIDE_TABS = new Set<TabKey>(["engines", "telegram", "memory", "skills", "appearance"]);
 const PANELS: Record<TabKey, () => ReactElement> = {
   identity:    () => <IdentityPanel />,
@@ -84,7 +86,7 @@ export function SettingsScreen() {
       onChange={(k) => navigate(k === "identity" ? "/settings" : `/settings/${pathFromTab(k as TabKey)}`)}
       collapsed={collapsed}
       onToggleCollapse={toggle}
-      contentClassName={`mx-auto w-full ${WIDE_TABS.has(active) ? "max-w-6xl" : "max-w-3xl"} space-y-6 p-6 pt-3`}
+      contentClassName={`w-full ${WIDE_TABS.has(active) ? "" : "mx-auto max-w-3xl"} space-y-6 p-6 pt-3`}
       testId={`settings-tab-${active}`}
     >
       <Panel />