@agentprojectcontext/apx 1.34.0 → 1.36.0

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

@@ -0,0 +1,222 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { Sparkles, RefreshCw, Wand2 } from "lucide-react";
+import { Section } from "../Section";
+import { Button, Field, Input, Loading, Badge, Switch } from "../ui";
+import { useToast } from "../Toast";
+import { Skills, type InspectTrace } from "../../lib/api/skills";
+
+// Skill Inspector — per-turn skill RAG middleware. When ON, the static
+// "available skills" slug-dump is removed from the agent's system prompt and a
+// local RAG injects, per turn, only the skill(s) the user's message actually
+// needs. This panel toggles the feature, tunes its thresholds, (re)builds the
+// vector index, and offers a live dry-run so you can see what it would surface.
+//
+// Mirrors MemoryPanel (RAG embeddings): same Section/Field/Button idiom. Config
+// persists under config.skills.inspector.* via the inspector PUT endpoint, so
+// no separate global-config patch is needed.
+
+// Numeric knobs with human labels + sane ranges. We keep them as plain number
+// inputs (same idiom as the embeddings model fields) rather than sliders so the
+// values are explicit and copy-pasteable.
+const KNOBS: { key: keyof NumericKnobs; label: string; hint: string; step: number; min: number; max: number }[] = [
+  { key: "load_threshold", label: "Umbral de carga", hint: "Similitud mínima para inyectar el CUERPO de la skill (alto = más estricto).", step: 0.01, min: 0, max: 1 },
+  { key: "hint_threshold", label: "Umbral de sugerencia", hint: "Similitud mínima para solo SUGERIR la skill (que el agente la cargue si quiere).", step: 0.01, min: 0, max: 1 },
+  { key: "margin", label: "Margen sobre el 2º", hint: "El top debe superar al segundo por este margen para cargar su cuerpo (evita empates flojos).", step: 0.01, min: 0, max: 1 },
+  { key: "max_loaded", label: "Máx. cuerpos cargados", hint: "Cuántas skills se inyectan completas por turno.", step: 1, min: 0, max: 5 },
+  { key: "max_hints", label: "Máx. sugerencias", hint: "Cuántas skills extra se nombran como sugerencia.", step: 1, min: 0, max: 8 },
+  { key: "prompt_floor", label: "Largo mínimo del prompt", hint: "Mensajes más cortos que esto se ignoran (evita 'ok', 'hola').", step: 1, min: 0, max: 40 },
+  { key: "body_char_cap", label: "Tope de chars del cuerpo", hint: "Recorta cuerpos de skill largos para no inflar el contexto.", step: 500, min: 500, max: 20000 },
+];
+
+type NumericKnobs = {
+  load_threshold: number; hint_threshold: number; margin: number;
+  max_loaded: number; max_hints: number; prompt_floor: number; body_char_cap: number;
+};
+
+export function SkillsInspectorPanel() {
+  const toast = useToast();
+  const { data, mutate, isLoading } = useSWR("/skills/inspector", () => Skills.inspector());
+  const [busy, setBusy] = useState(false);
+  const [probe, setProbe] = useState("");
+  const [probeResult, setProbeResult] = useState<InspectTrace | null>(null);
+
+  if (isLoading || !data) return <Loading />;
+
+  const cfg = data.config;
+  const idx = data.index;
+
+  const apply = async (patch: Record<string, unknown>) => {
+    setBusy(true);
+    try {
+      await Skills.updateInspector(patch);
+      await mutate();
+    } catch (e) {
+      toast.error(`No se pudo guardar: ${(e as Error).message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const runIndex = async (force = false) => {
+    setBusy(true);
+    try {
+      const r = await Skills.index({ force });
+      toast.success(
+        `Indexado con ${r.embedder} (dim ${r.dim}): +${r.changed.added} ~${r.changed.refreshed} -${r.changed.removed}.`,
+      );
+      await mutate();
+    } catch (e) {
+      toast.error(`Falló el index: ${(e as Error).message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const runProbe = async () => {
+    if (!probe.trim()) return;
+    setBusy(true);
+    setProbeResult(null);
+    try {
+      const r = await Skills.inspect(probe.trim());
+      setProbeResult(r.trace);
+    } catch (e) {
+      toast.error(`Falló el dry-run: ${(e as Error).message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <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."
+      >
+        <div className="space-y-4">
+          <Field
+            label="Activar inspector"
+            hint="Apagado = comportamiento clásico (lista de slugs + sugerencia pasiva). Encendido = el RAG decide por turno."
+          >
+            <Switch
+              checked={cfg.enabled}
+              disabled={busy}
+              onChange={(v) => apply({ enabled: v })}
+              label={cfg.enabled ? "Encendido" : "Apagado"}
+            />
+          </Field>
+
+          <div className="flex flex-wrap items-center gap-2 pt-1">
+            <Badge tone={idx.count > 0 ? "success" : "warning"}>
+              Índice: {idx.count} skills
+            </Badge>
+            <Badge tone="muted">{idx.embedder || "sin indexar"}</Badge>
+            {idx.dim ? <Badge tone="muted">dim {idx.dim}</Badge> : null}
+            {idx.updated_at ? (
+              <span className="text-xs text-muted-foreground">
+                actualizado {new Date(idx.updated_at).toLocaleString()}
+              </span>
+            ) : null}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 pt-1">
+            <Button variant="secondary" onClick={() => runIndex(false)} loading={busy}>
+              <RefreshCw size={14} /> Reindexar
+            </Button>
+            <Button variant="secondary" onClick={() => runIndex(true)} loading={busy}>
+              <RefreshCw size={14} /> Reindexar (forzado)
+            </Button>
+            <span className="text-xs text-muted-foreground">
+              El embedder sale de Memoria (RAG). Local con Ollama, u offline si no hay proveedor.
+            </span>
+          </div>
+        </div>
+      </Section>
+
+      <Section
+        title="Umbrales y límites"
+        description="Ajustá qué tan agresivo es el inspector. Subir los umbrales = menos falsos positivos pero más riesgo de perderse una skill; bajarlos = lo contrario."
+      >
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {KNOBS.map((k) => (
+            <Field key={k.key} label={k.label} hint={k.hint}>
+              <Input
+                type="number"
+                step={k.step}
+                min={k.min}
+                max={k.max}
+                defaultValue={String(cfg[k.key])}
+                disabled={busy}
+                onBlur={(ev) => {
+                  const n = Number(ev.target.value);
+                  if (Number.isFinite(n) && n !== cfg[k.key]) apply({ [k.key]: n });
+                }}
+                className="max-w-[12rem]"
+              />
+            </Field>
+          ))}
+        </div>
+      </Section>
+
+      <Section
+        title="Probar (dry-run)"
+        description="Escribí un mensaje como lo haría un usuario y mirá qué skills cargaría/sugeriría el inspector — sin llamar al modelo. Fuerza el inspector activo aunque esté apagado arriba."
+      >
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <Input
+              value={probe}
+              placeholder="ej: necesito crear un video promocional con voz en off"
+              disabled={busy}
+              onChange={(ev) => setProbe(ev.target.value)}
+              onKeyDown={(ev) => { if (ev.key === "Enter") runProbe(); }}
+              className="max-w-xl flex-1"
+            />
+            <Button variant="primary" onClick={runProbe} loading={busy}>
+              <Wand2 size={14} /> Probar
+            </Button>
+          </div>
+
+          {probeResult && (
+            <div className="rounded-md border border-border/60 bg-muted/30 p-3 text-sm">
+              <div className="mb-2 flex flex-wrap items-center gap-2">
+                <Sparkles size={14} className="text-muted-foreground" />
+                <span className="text-muted-foreground">{probeResult.embedder || "—"}</span>
+                {probeResult.jit ? <Badge tone="warning">JIT (índice vacío)</Badge> : null}
+                {probeResult.reason && !probeResult.loaded?.length && !probeResult.hinted?.length ? (
+                  <Badge tone="muted">{probeResult.reason}</Badge>
+                ) : null}
+              </div>
+
+              {probeResult.loaded?.length ? (
+                <div className="mb-1">
+                  <span className="text-muted-foreground">Cargadas: </span>
+                  {probeResult.loaded.map((s) => (
+                    <Badge key={s} tone="success" className="mr-1">{s}</Badge>
+                  ))}
+                </div>
+              ) : null}
+
+              {probeResult.hinted?.length ? (
+                <div className="mb-1">
+                  <span className="text-muted-foreground">Sugeridas: </span>
+                  {probeResult.hinted.map((s) => (
+                    <Badge key={s} tone="info" className="mr-1">{s}</Badge>
+                  ))}
+                </div>
+              ) : null}
+
+              {probeResult.scored?.length ? (
+                <div className="mt-2 space-y-0.5 font-mono text-xs text-muted-foreground">
+                  {probeResult.scored.map((s) => (
+                    <div key={s.slug}>{s.sim.toFixed(3)}  {s.slug}</div>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </Section>
+    </div>
+  );
+}

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

@@ -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";
@@ -32,6 +32,13 @@ export interface ChatMsg {
   usage?: ChatUsage;
   /** Operational notes (engine fallbacks, retries, suppressions). */
   notes?: string[];
+  /** Skill Inspector decision for this turn (when the feature is on): which
+   *  skills the per-turn RAG loaded inline vs merely hinted. */
+  inspector?: {
+    embedder?: string;
+    loaded?: string[];
+    hinted?: string[];
+  };
 }
 
 export interface SendOptions {
@@ -46,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). */
@@ -138,6 +152,18 @@ export function applyStreamEvent(turn: ChatMsg, ev: ChatStreamEvent): ChatMsg {
       return withNote(`retry (${ev.reason || "?"})`);
     case "tools_suppressed":
       return withNote(`tools suppressed: ${(ev.tools || []).join(", ")}`);
+    case "skill_inspector": {
+      const insp = ev.inspector;
+      if (!insp || (!insp.loaded?.length && !insp.hinted?.length)) return turn;
+      return {
+        ...turn,
+        inspector: {
+          embedder: insp.embedder,
+          loaded: insp.loaded || [],
+          hinted: insp.hinted || [],
+        },
+      };
+    }
     case "assistant_text":
       return ev.text ? { ...turn, parts: [...turn.parts, { kind: "text", text: ev.text }] } : turn;
     case "tool_start":
@@ -216,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);
 
@@ -264,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,
@@ -315,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

@@ -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: {
@@ -908,6 +918,7 @@ export const en = {
     ollama_title:        "Ollama (local)",
     openai_title:        "OpenAI",
     gemini_title:        "Gemini",
+    compaction_title:    "History compaction",
   },
 
   router_panel: {

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

@@ -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: {
@@ -906,6 +916,7 @@ export const es = {
     ollama_title:        "Ollama (local)",
     openai_title:        "OpenAI",
     gemini_title:        "Gemini",
+    compaction_title:    "Compactación de historial",
   },
 
   router_panel: {

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

@@ -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/lib/api/skills.ts

@@ -11,6 +11,55 @@ export type SkillsList = {
   skills: SkillEntry[];
 };
 
+export interface InspectorConfig {
+  enabled: boolean;
+  load_threshold: number;
+  hint_threshold: number;
+  margin: number;
+  max_loaded: number;
+  max_hints: number;
+  prompt_floor: number;
+  body_char_cap: number;
+}
+
+export interface IndexStatus {
+  count: number;
+  embedder: string | null;
+  dim: number | null;
+  updated_at: string | null;
+}
+
+export interface InspectorState {
+  config: InspectorConfig;
+  defaults: InspectorConfig;
+  keys: string[];
+  index: IndexStatus;
+}
+
+export interface IndexResult {
+  ok: boolean;
+  embedder: string;
+  dim: number;
+  planned: { missing: number; stale: number; gone: number; total: number };
+  changed: { added: number; refreshed: number; removed: number; kept: number };
+  index: IndexStatus;
+}
+
+export interface InspectTrace {
+  enabled: boolean;
+  reason?: string;
+  embedder?: string;
+  scored?: { slug: string; sim: number }[];
+  loaded?: string[];
+  hinted?: string[];
+  jit?: boolean;
+}
+
+export interface InspectResult {
+  trace: InspectTrace;
+  contextNote: string;
+}
+
 export const Skills = {
   /**
    * List installed skills (bundled + user + optional project-scoped). The
@@ -22,4 +71,25 @@ export const Skills = {
         ? `/skills?project_path=${encodeURIComponent(projectPath)}`
         : "/skills",
     ),
+
+  /** Skill Inspector config + index status. */
+  inspector: () => http.get<InspectorState>("/skills/inspector"),
+
+  /** Patch inspector config (toggle / tune thresholds). */
+  updateInspector: (patch: Partial<InspectorConfig>) =>
+    http.put<{ ok: boolean; config: InspectorConfig; index: IndexStatus }>(
+      "/skills/inspector",
+      patch,
+    ),
+
+  /** (Re)build the inspector vector index. */
+  index: (body: { project_path?: string; force?: boolean } = {}) =>
+    http.post<IndexResult>("/skills/index", body),
+
+  /** Dry-run the inspector for a prompt (forces enabled). */
+  inspect: (prompt: string, projectPath?: string) =>
+    http.post<InspectResult>("/skills/inspect", {
+      prompt,
+      project_path: projectPath,
+    }),
 };

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

@@ -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

@@ -1,13 +1,14 @@
 import { type ReactElement } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
-  Bot, Cpu, Database, KeyRound, MessageCircle, Palette, ScrollText, Send, Smartphone, User,
+  Bot, Cpu, Database, KeyRound, MessageCircle, Palette, ScrollText, Send, Smartphone, Sparkles, User,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
 import { IdentityPanel } from "../components/settings/IdentityPanel";
 import { SuperAgentPanel } from "../components/settings/SuperAgentPanel";
 import { MemoryPanel } from "../components/settings/MemoryPanel";
+import { SkillsInspectorPanel } from "../components/settings/SkillsInspectorPanel";
 import { ModelsTab } from "./base/ModelsTab";
 import { TelegramSettingsTabs } from "../components/settings/TelegramSettingsTabs";
 import { DevicesPanel } from "../components/settings/DevicesPanel";
@@ -17,7 +18,7 @@ import { STORAGE } from "../constants";
 import { t } from "../i18n";
 
 type TabKey =
-  | "identity" | "super_agent" | "engines" | "memory" | "telegram" | "devices" | "appearance" | "advanced";
+  | "identity" | "super_agent" | "engines" | "memory" | "skills" | "telegram" | "devices" | "appearance" | "advanced";
 
 const SECTIONS: TabSection[] = [
   {
@@ -33,6 +34,7 @@ const SECTIONS: TabSection[] = [
       { key: "super_agent", label: t("settings.tabs.super_agent"), icon: Bot },
       { key: "engines",     label: t("settings.tabs.engines"),     icon: Cpu },
       { key: "memory",      label: "Memoria (RAG)",                icon: Database },
+      { key: "skills",      label: "Skills (RAG)",                 icon: Sparkles },
     ],
   },
   {
@@ -50,15 +52,18 @@ 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 />,
   super_agent: () => <SuperAgentPanel />,
   engines:     () => <ModelsTab />,
   memory:      () => <MemoryPanel />,
+  skills:      () => <SkillsInspectorPanel />,
   telegram:    () => <TelegramSettingsTabs />,
   devices:     () => <DevicesPanel />,
   appearance:  () => <AppearancePanel />,
@@ -81,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 />
@@ -95,6 +100,7 @@ function tabFromPath(pathname: string): TabKey {
     case "super-agent": return "super_agent";
     case "engines": return "engines";
     case "memory": return "memory";
+    case "skills": return "skills";
     case "telegram": return "telegram";
     case "devices": return "devices";
     case "appearance": return "appearance";

package/src/interfaces/web/src/screens/modules/VoiceScreen.tsx

@@ -120,7 +120,7 @@ export function VoiceScreen() {
   };
 
   return (
-    <div className="mx-auto max-w-6xl p-6" data-testid="screen-voice">
+    <div className="p-6" data-testid="screen-voice">
       <div className="grid gap-6 xl:grid-cols-2">
         {/* Left: TTS providers */}
         <Section