skillmux 0.1.5 → 0.1.6

package/dist/{launch-tui-4TJFQA3L.js → launch-tui-JD4F62FS.js}

@@ -1529,26 +1529,78 @@ function updateTuiState(state, event) {
   return readyState;
 }
 
-// src/tui/components/AgentList.tsx
-import { Box, Text } from "ink";
-import { jsx, jsxs } from "react/jsx-runtime";
-function statusMarker(agent) {
-  if (!agent.supported) {
-    return "!";
+// src/tui/theme.ts
+import React from "react";
+var nord0 = "#2e3440";
+var nord1 = "#3b4252";
+var nord3 = "#4c566a";
+var nord4 = "#d8dee9";
+var nord6 = "#eceff4";
+var nord8 = "#88c0d0";
+var nord9 = "#81a1c1";
+var nord11 = "#bf616a";
+var nord13 = "#ebcb8b";
+var nord14 = "#a3be8c";
+var nord15 = "#b48ead";
+var nordTheme = {
+  fg: { default: nord4, muted: nord3, emphasis: nord6 },
+  bg: { base: nord0, surface: nord1, overlay: nord1, selection: nord9 },
+  accent: { primary: nord9, secondary: nord15 },
+  status: { success: nord14, warning: nord13, error: nord11, info: nord8 },
+  border: { default: nord3, focused: nord9 }
+};
+var fallbackTheme = {
+  fg: { default: "white", muted: "gray", emphasis: "white" },
+  bg: {
+    base: "black",
+    surface: "black",
+    overlay: "black",
+    selection: "cyan"
+  },
+  accent: { primary: "cyan", secondary: "magenta" },
+  status: { success: "green", warning: "yellow", error: "red", info: "cyan" },
+  border: { default: "gray", focused: "cyan" }
+};
+function detectColorLevel() {
+  if (process.env.NO_COLOR !== void 0) {
+    return "none";
   }
-  if (!agent.exists) {
-    return "?";
+  const colorTerm = process.env.COLORTERM;
+  if (colorTerm === "truecolor" || colorTerm === "24bit") {
+    return "truecolor";
   }
-  return "*";
-}
-function statusColor(agent) {
-  if (!agent.supported) {
-    return "red";
+  const term = process.env.TERM ?? "";
+  if (term.includes("256color")) {
+    return "256";
   }
-  if (!agent.exists || agent.issueCount > 0) {
-    return "yellow";
+  return "16";
+}
+function resolveTheme() {
+  const colorLevel = detectColorLevel();
+  if (colorLevel === "none" || colorLevel === "16") {
+    return fallbackTheme;
   }
-  return "green";
+  return nordTheme;
+}
+var ThemeContext = React.createContext(nordTheme);
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+var ThemeProvider = ThemeContext.Provider;
+
+// src/tui/components/AgentList.tsx
+import { Box, Text } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+function statusColor(agent, theme) {
+  if (!agent.supported) return theme.status.error;
+  if (!agent.exists || agent.issueCount > 0) return theme.status.warning;
+  return theme.status.success;
+}
+function statusLabel(agent) {
+  if (!agent.supported) return "!";
+  if (!agent.exists) return "?";
+  if (agent.issueCount > 0) return "*";
+  return "*";
 }
 function AgentList({
   agents,
@@ -1558,20 +1610,23 @@ function AgentList({
   width = 24,
   height = 18
 }) {
+  const theme = useTheme();
   const emptyMessage = searchQuery !== void 0 && searchQuery.trim().length > 0 ? "No matching agents" : "No agents found";
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width, height, children: [
-    /* @__PURE__ */ jsx(Text, { bold: true, color: focused ? "cyan" : void 0, children: "Agents" }),
+    /* @__PURE__ */ jsx(Text, { bold: true, color: focused ? theme.fg.emphasis : theme.fg.muted, children: "Agents" }),
     agents.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: emptyMessage }) : agents.map((agent) => {
-      const selected = agent.id === selectedAgentId;
-      const selectionPrefix = selected ? ">" : " ";
-      return /* @__PURE__ */ jsxs(Text, { inverse: selected, children: [
-        /* @__PURE__ */ jsx(Text, { color: statusColor(agent), children: statusMarker(agent) }),
-        /* @__PURE__ */ jsxs(Text, { children: [
-          selectionPrefix,
+      const isSelected = agent.id === selectedAgentId;
+      const isActive = isSelected && focused;
+      const prefix = isActive ? ">" : " ";
+      return /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs(Text, { backgroundColor: isSelected ? theme.bg.selection : void 0, children: [
+        /* @__PURE__ */ jsx(Text, { color: statusColor(agent, theme), children: statusLabel(agent) }),
+        /* @__PURE__ */ jsxs(Text, { color: isSelected ? theme.fg.emphasis : theme.fg.default, children: [
+          " ",
+          prefix,
           " ",
           agent.name
         ] })
-      ] }, agent.id);
+      ] }) }, agent.id);
     })
   ] });
 }
@@ -1608,18 +1663,17 @@ function confirmationDetails(modal) {
   return `${modal.unmanagedCount} unmanaged skills will be moved under SkillMux management.`;
 }
 function ConfirmDialog({ modal }) {
+  const theme = useTheme();
+  const isRemove = modal.kind === "confirm-remove" || modal.kind === "confirm-remove-agent";
+  const titleColor = isRemove ? theme.status.warning : theme.status.info;
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", height: confirmDialogHeight, children: [
-    /* @__PURE__ */ jsx2(
-      Text2,
-      {
-        bold: true,
-        color: modal.kind === "confirm-remove" || modal.kind === "confirm-remove-agent" ? "yellow" : "cyan",
-        children: "Confirm"
-      }
-    ),
-    /* @__PURE__ */ jsx2(Text2, { children: confirmationText(modal) }),
-    confirmationDetails(modal) === null ? null : /* @__PURE__ */ jsx2(Text2, { children: confirmationDetails(modal) }),
-    /* @__PURE__ */ jsx2(Text2, { children: "[y] confirm   [Esc] cancel" })
+    /* @__PURE__ */ jsx2(Text2, { bold: true, color: titleColor, children: "Confirm" }),
+    /* @__PURE__ */ jsx2(Text2, { color: theme.fg.default, children: confirmationText(modal) }),
+    confirmationDetails(modal) === null ? null : /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: confirmationDetails(modal) }),
+    /* @__PURE__ */ jsxs2(Text2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { bold: true, color: theme.status.success, children: "[y] confirm" }),
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "   [Esc] cancel" })
+    ] })
   ] });
 }
 
@@ -1641,17 +1695,18 @@ function DoctorDialog({
   width = 72,
   height = 14
 }) {
+  const theme = useTheme();
   if (modal.status === "loading") {
     return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width, height, children: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Doctor" }),
-      /* @__PURE__ */ jsx3(Text3, { children: "Loading doctor diagnostics..." }),
+      /* @__PURE__ */ jsx3(Text3, { bold: true, color: theme.fg.emphasis, children: "Doctor" }),
+      /* @__PURE__ */ jsx3(Text3, { color: theme.fg.muted, children: "Loading doctor diagnostics..." }),
       /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "[Esc] close" })
     ] });
   }
   if (modal.status === "error") {
     return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width, height, children: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Doctor" }),
-      /* @__PURE__ */ jsx3(Text3, { color: "red", children: modal.errorMessage }),
+      /* @__PURE__ */ jsx3(Text3, { bold: true, color: theme.fg.emphasis, children: "Doctor" }),
+      /* @__PURE__ */ jsx3(Text3, { color: theme.status.error, children: modal.errorMessage }),
       /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "[Esc] close" })
     ] });
   }
@@ -1661,12 +1716,12 @@ function DoctorDialog({
   const clampedOffset = Math.min(Math.max(scrollOffset, 0), maxOffset);
   const visibleIssues = issues.slice(clampedOffset, clampedOffset + maxIssues);
   return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width, height, children: [
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Doctor" }),
+    /* @__PURE__ */ jsx3(Text3, { bold: true, color: theme.fg.emphasis, children: "Doctor" }),
     /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: issues.length === 0 ? "No doctor issues found." : `${issues.length} issue(s) found` }),
     issues.length === 0 ? null : /* @__PURE__ */ jsxs3(Fragment, { children: [
       visibleIssues.map((issue) => /* @__PURE__ */ jsxs3(Text3, { children: [
-        /* @__PURE__ */ jsx3(Text3, { color: issue.severity === "error" ? "red" : "yellow", children: "! " }),
-        /* @__PURE__ */ jsxs3(Text3, { children: [
+        /* @__PURE__ */ jsx3(Text3, { color: issue.severity === "error" ? theme.status.error : theme.status.warning, children: "! " }),
+        /* @__PURE__ */ jsxs3(Text3, { color: theme.fg.default, children: [
           issueLabel(issue),
           " - ",
           issue.message,
@@ -1690,26 +1745,18 @@ function DoctorDialog({
 import { Box as Box4, Text as Text4 } from "ink";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function compactPath(value, maxLength) {
-  if (value.length <= maxLength) {
-    return value;
-  }
+  if (value.length <= maxLength) return value;
   const separator = value.includes("\\") ? "\\" : "/";
   const parts = value.split(/[\\/]+/).filter((part) => part.length > 0);
   let suffix = parts.at(-1) ?? value;
   for (let index = parts.length - 2; index >= 0; index -= 1) {
     const candidate = `${parts[index]}${separator}${suffix}`;
-    if (`...${separator}${candidate}`.length > maxLength) {
-      break;
-    }
+    if (`...${separator}${candidate}`.length > maxLength) break;
     suffix = candidate;
   }
   const shortened = `...${separator}${suffix}`;
-  if (shortened.length <= maxLength) {
-    return shortened;
-  }
-  if (maxLength <= 3) {
-    return ".".repeat(maxLength);
-  }
+  if (shortened.length <= maxLength) return shortened;
+  if (maxLength <= 3) return ".".repeat(maxLength);
   return `...${suffix.slice(-(maxLength - 3))}`;
 }
 function detailLines(skill) {
@@ -1757,9 +1804,10 @@ function DetailPane({
   width = 28,
   height = 18
 }) {
+  const theme = useTheme();
   return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", width, height, children: [
-    /* @__PURE__ */ jsx4(Text4, { bold: true, children: "Detail" }),
-    selectedAgent === null ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "Select an agent" }) : /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+    /* @__PURE__ */ jsx4(Text4, { bold: true, color: theme.fg.emphasis, children: "Detail" }),
+    selectedAgent === null ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "Select an agent" }) : /* @__PURE__ */ jsxs4(Text4, { color: theme.fg.muted, children: [
       "Agent: ",
       selectedAgent.name
     ] }),
@@ -1771,11 +1819,12 @@ function DetailPane({
       const valueWidth = Math.max(width - (label.length + 2), 8);
       const renderedValue = compact ? compactPath(value, valueWidth) : value;
       return /* @__PURE__ */ jsxs4(Text4, { children: [
-        /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        /* @__PURE__ */ jsxs4(Text4, { bold: true, color: theme.accent.primary, children: [
           label,
-          ": "
+          ":",
+          " "
         ] }),
-        /* @__PURE__ */ jsx4(Text4, { children: renderedValue })
+        /* @__PURE__ */ jsx4(Text4, { color: theme.fg.default, children: renderedValue })
       ] }, label);
     })
   ] });
@@ -1783,17 +1832,16 @@ function DetailPane({
 
 // src/tui/components/Footer.tsx
 import { Box as Box5, Text as Text5 } from "ink";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var agentLegend = "Agent icons: * ready  yellow * issues  ? missing  ! unsupported";
-var skillLegend = "Skill markers: \u25CF enabled  \u25CB disabled  ? unmanaged  ! issue";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Footer({ actions, search }) {
+  const theme = useTheme();
   const shortcuts = [
     actions.addAgent ? "[n]add agent" : null,
     actions.editAgent ? "[e]edit agent" : null,
     actions.removeAgent ? "[X]remove agent" : null,
     actions.importSkill ? "[i]import" : null,
     actions.doctor ? "[d]doctor" : null,
-    "[Left/Right]focus",
+    "\u2190\u2192 focus",
     actions.toggle ? "[Space]toggle" : null,
     actions.adopt ? "[a]adopt" : null,
     actions.adoptAll ? "[Shift+A]adopt all" : null,
@@ -1802,46 +1850,90 @@ function Footer({ actions, search }) {
     actions.help ? "[?]help" : null,
     "[q]quit"
   ].filter((shortcut) => shortcut !== null);
-  return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", height: 3, children: search === null ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(Text5, { children: shortcuts.join("   ") }),
-    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: agentLegend }),
-    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: skillLegend })
-  ] }) : /* @__PURE__ */ jsxs5(Text5, { children: [
-    /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "/" }),
-    /* @__PURE__ */ jsx5(Text5, { children: search.query }),
-    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "   [Enter]keep   [Esc]cancel" })
-  ] }) });
+  const legendParts = [
+    { symbol: "\u25CF", label: "enabled", color: theme.status.success },
+    { symbol: "\u25CB", label: "disabled", color: theme.fg.muted },
+    { symbol: "?", label: "unmanaged", color: theme.status.warning },
+    { symbol: "!", label: "issue", color: theme.status.error }
+  ];
+  if (search !== null) {
+    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", height: 3, children: [
+      /* @__PURE__ */ jsxs5(Text5, { children: [
+        /* @__PURE__ */ jsx5(Text5, { color: theme.accent.primary, children: "/" }),
+        /* @__PURE__ */ jsx5(Text5, { color: theme.fg.default, children: search.query }),
+        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "   [Enter]keep   [Esc]cancel" })
+      ] }),
+      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: legendParts.map((p, i) => /* @__PURE__ */ jsxs5(Text5, { children: [
+        /* @__PURE__ */ jsxs5(Text5, { color: p.color, children: [
+          p.symbol,
+          " ",
+          p.label
+        ] }),
+        i < legendParts.length - 1 ? "  " : ""
+      ] }, p.label)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", height: 3, children: [
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: shortcuts.join("   ") }),
+    /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+      "SkillMux ",
+      "\xB7",
+      " [j/k]move ",
+      "\xB7",
+      " [g/G]top/bottom ",
+      "\xB7",
+      " [/]search"
+    ] }),
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: legendParts.map((p, i) => /* @__PURE__ */ jsxs5(Text5, { children: [
+      /* @__PURE__ */ jsxs5(Text5, { color: p.color, children: [
+        p.symbol,
+        " ",
+        p.label
+      ] }),
+      i < legendParts.length - 1 ? " \xB7 " : ""
+    ] }, p.label)) })
+  ] });
 }
 
 // src/tui/components/HelpOverlay.tsx
 import { Box as Box6, Text as Text6 } from "ink";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function HelpOverlay() {
+  const theme = useTheme();
   return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", height: 8, children: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Help" }),
-    /* @__PURE__ */ jsxs6(Text6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Navigation" }),
-      /* @__PURE__ */ jsx6(Text6, { children: ": Left/Right switch panels, j/k or Up/Down move, g/G jump." })
-    ] }),
+    /* @__PURE__ */ jsx6(Text6, { bold: true, color: theme.fg.emphasis, children: "Help" }),
     /* @__PURE__ */ jsxs6(Text6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Actions" }),
-      /* @__PURE__ */ jsx6(Text6, { children: ": Space toggles, a adopts, Shift+A current-agent bulk adopt, r removes, s scans, n add agent, e edit selected override, X remove selected override, i import, d doctor." })
+      /* @__PURE__ */ jsx6(Text6, { bold: true, color: theme.accent.primary, children: "Navigation" }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: ": Left/Right switch panels, j/k or Up/Down move, g/G jump." })
     ] }),
     /* @__PURE__ */ jsxs6(Text6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Search" }),
-      /* @__PURE__ */ jsx6(Text6, { children: ": / filters the focused list, Enter keeps the result, Esc cancels." })
+      /* @__PURE__ */ jsx6(Text6, { bold: true, color: theme.accent.primary, children: "Actions" }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: ": Space toggles, a adopts, Shift+A current-agent bulk adopt, r removes, s scans, n add agent, e edit selected override, X remove selected override, i import, d doctor." })
     ] }),
     /* @__PURE__ */ jsxs6(Text6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Agent icons" }),
-      /* @__PURE__ */ jsx6(Text6, { children: ": * ready, yellow * issues, ? missing, ! unsupported." })
+      /* @__PURE__ */ jsx6(Text6, { bold: true, color: theme.accent.primary, children: "Search" }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: ": / filters the focused list, Enter keeps the result, Esc cancels." })
     ] }),
     /* @__PURE__ */ jsxs6(Text6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Skill markers" }),
-      /* @__PURE__ */ jsx6(Text6, { children: ": \u25CF enabled, \u25CB disabled, ? unmanaged, ! issue." })
+      /* @__PURE__ */ jsx6(Text6, { bold: true, color: theme.accent.primary, children: "Skill markers" }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: ": " }),
+      /* @__PURE__ */ jsxs6(Text6, { color: theme.status.success, children: [
+        "\u25CF",
+        " enabled"
+      ] }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: "  " }),
+      /* @__PURE__ */ jsxs6(Text6, { color: theme.fg.muted, children: [
+        "\u25CB",
+        " disabled"
+      ] }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: "  " }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.status.warning, children: "? unmanaged" }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: "  " }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.status.error, children: "! issue" })
     ] }),
     /* @__PURE__ */ jsxs6(Text6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Safety" }),
-      /* @__PURE__ */ jsx6(Text6, { children: ": Toggle, adopt, remove, and scan can update SkillMux state and agent links." })
+      /* @__PURE__ */ jsx6(Text6, { bold: true, color: theme.accent.primary, children: "Safety" }),
+      /* @__PURE__ */ jsx6(Text6, { color: theme.fg.default, children: ": Toggle, adopt, remove, and scan can update SkillMux state and agent links." })
     ] })
   ] });
 }
@@ -1853,36 +1945,60 @@ var platformOptions = ["win32", "linux", "darwin"];
 function checkbox(value) {
   return value ? "[x]" : "[ ]";
 }
-function renderTextField(label, value, active) {
-  return /* @__PURE__ */ jsxs7(Text7, { inverse: active, children: [
-    /* @__PURE__ */ jsxs7(Text7, { bold: true, children: [
+function renderTextField(label, value, active, theme) {
+  if (active) {
+    return /* @__PURE__ */ jsxs7(Text7, { backgroundColor: theme.bg.selection, children: [
+      /* @__PURE__ */ jsxs7(Text7, { bold: true, color: theme.fg.emphasis, children: [
+        label,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx7(Text7, { color: theme.fg.emphasis, children: value.length > 0 ? value : " " })
+    ] }, label);
+  }
+  return /* @__PURE__ */ jsxs7(Text7, { children: [
+    /* @__PURE__ */ jsxs7(Text7, { bold: true, color: theme.accent.primary, children: [
       label,
       ": "
     ] }),
-    /* @__PURE__ */ jsx7(Text7, { children: value.length > 0 ? value : " " })
+    /* @__PURE__ */ jsx7(Text7, { color: theme.fg.default, children: value.length > 0 ? value : " " })
   ] }, label);
 }
-function renderBooleanField(label, value, active) {
-  return /* @__PURE__ */ jsxs7(Text7, { inverse: active, children: [
-    /* @__PURE__ */ jsxs7(Text7, { bold: true, children: [
+function renderBooleanField(label, value, active, theme) {
+  if (active) {
+    return /* @__PURE__ */ jsxs7(Text7, { backgroundColor: theme.bg.selection, children: [
+      /* @__PURE__ */ jsxs7(Text7, { bold: true, color: theme.fg.emphasis, children: [
+        label,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx7(Text7, { color: theme.fg.emphasis, children: checkbox(value) })
+    ] }, label);
+  }
+  return /* @__PURE__ */ jsxs7(Text7, { children: [
+    /* @__PURE__ */ jsxs7(Text7, { bold: true, color: theme.accent.primary, children: [
       label,
       ": "
     ] }),
-    /* @__PURE__ */ jsx7(Text7, { children: checkbox(value) })
+    /* @__PURE__ */ jsx7(Text7, { color: theme.fg.default, children: checkbox(value) })
   ] }, label);
 }
-function renderPlatformField(selectedPlatforms, activePlatformIndex, active) {
+function renderPlatformField(selectedPlatforms, activePlatformIndex, active, theme) {
   return platformOptions.map((platform, index) => {
     const selected = selectedPlatforms.includes(platform);
     const isCurrent = active && index === activePlatformIndex;
-    return /* @__PURE__ */ jsxs7(Text7, { inverse: isCurrent, children: [
-      /* @__PURE__ */ jsx7(Text7, { children: isCurrent ? "> " : "  " }),
-      /* @__PURE__ */ jsxs7(Text7, { children: [
+    if (isCurrent) {
+      return /* @__PURE__ */ jsx7(Text7, { backgroundColor: theme.bg.selection, children: /* @__PURE__ */ jsxs7(Text7, { color: theme.fg.emphasis, children: [
+        "> ",
         checkbox(selected),
-        " "
-      ] }),
-      /* @__PURE__ */ jsx7(Text7, { children: platform })
-    ] }, platform);
+        " ",
+        platform
+      ] }) }, platform);
+    }
+    return /* @__PURE__ */ jsx7(Text7, { children: /* @__PURE__ */ jsxs7(Text7, { color: selected ? theme.status.success : theme.fg.muted, children: [
+      "  ",
+      checkbox(selected),
+      " ",
+      platform
+    ] }) }, platform);
   });
 }
 function FormDialog({
@@ -1892,89 +2008,94 @@ function FormDialog({
   width = 72,
   height = 14
 }) {
+  const theme = useTheme();
   const activeField = fieldIndex;
-  const submitFieldIndex = modal.kind === "import" ? 2 : 6;
   if (modal.kind === "import") {
+    const submitFieldIndex2 = 2;
     return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", width, height, children: [
-      /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Import skill" }),
-      modal.form.error === null ? null : /* @__PURE__ */ jsx7(Text7, { color: "red", children: modal.form.error }),
+      /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.fg.emphasis, children: "Import skill" }),
+      modal.form.error === null ? null : /* @__PURE__ */ jsx7(Text7, { color: theme.status.error, children: modal.form.error }),
       renderTextField(
         "Source path",
         modal.form.values.sourcePath,
-        activeField === 0
+        activeField === 0,
+        theme
       ),
       renderTextField(
         "Skill name",
         modal.form.values.skillName,
-        activeField === 1
+        activeField === 1,
+        theme
       ),
-      /* @__PURE__ */ jsx7(Text7, { inverse: activeField === submitFieldIndex, children: "Submit" }),
+      /* @__PURE__ */ jsx7(Text7, { children: activeField === submitFieldIndex2 ? /* @__PURE__ */ jsx7(Text7, { backgroundColor: theme.bg.selection, children: /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.fg.emphasis, children: "Submit" }) }) : /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.accent.primary, children: "Submit" }) }),
       /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "[Up/Down] move   [Enter] submit selected row   [Esc] cancel" })
     ] });
   }
   const title = modal.kind === "add-agent" ? "Add agent" : `Edit agent ${modal.agentId}`;
   const fields = modal.kind === "add-agent" ? [
-    renderTextField("Agent id", modal.form.values.id, activeField === 0),
-    renderTextField("Root path", modal.form.values.root, activeField === 1),
-    renderTextField("Skills path", modal.form.values.skills, activeField === 2),
-    renderTextField("Display name", modal.form.values.name, activeField === 3)
+    renderTextField("Agent id", modal.form.values.id, activeField === 0, theme),
+    renderTextField("Root path", modal.form.values.root, activeField === 1, theme),
+    renderTextField("Skills path", modal.form.values.skills, activeField === 2, theme),
+    renderTextField("Display name", modal.form.values.name, activeField === 3, theme)
   ] : [
-    renderTextField("Root path", modal.form.values.root, activeField === 0),
-    renderTextField("Skills path", modal.form.values.skills, activeField === 1),
-    renderTextField("Display name", modal.form.values.name, activeField === 2)
+    renderTextField("Root path", modal.form.values.root, activeField === 0, theme),
+    renderTextField("Skills path", modal.form.values.skills, activeField === 1, theme),
+    renderTextField("Display name", modal.form.values.name, activeField === 2, theme)
   ];
   const platformFieldIndex = modal.kind === "add-agent" ? 4 : 3;
   const booleanFieldIndex = modal.kind === "add-agent" ? 5 : 4;
+  const submitFieldIndex = 6;
   const platformLines = renderPlatformField(
     modal.form.values.platforms,
     platformIndex,
-    activeField === platformFieldIndex
+    activeField === platformFieldIndex,
+    theme
   );
   const booleanLabel = modal.kind === "add-agent" ? "Disabled by default" : "Enabled by default";
   const booleanValue = modal.kind === "add-agent" ? modal.form.values.disabledByDefault : modal.form.values.enabledByDefault;
   const secondaryBooleanLabel = modal.kind === "add-agent" ? null : "Disabled by default";
   return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", width, height, children: [
-    /* @__PURE__ */ jsx7(Text7, { bold: true, children: title }),
-    modal.form.error === null ? null : /* @__PURE__ */ jsx7(Text7, { color: "red", children: modal.form.error }),
+    /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.fg.emphasis, children: title }),
+    modal.form.error === null ? null : /* @__PURE__ */ jsx7(Text7, { color: theme.status.error, children: modal.form.error }),
     fields,
-    /* @__PURE__ */ jsx7(Text7, { bold: true, inverse: activeField === platformFieldIndex, children: "Platforms" }),
+    /* @__PURE__ */ jsx7(Text7, { children: activeField === platformFieldIndex ? /* @__PURE__ */ jsx7(Text7, { backgroundColor: theme.bg.selection, children: /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.fg.emphasis, children: "Platforms" }) }) : /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.accent.primary, children: "Platforms" }) }),
     platformLines,
     renderBooleanField(
       booleanLabel,
       booleanValue,
-      activeField === booleanFieldIndex
+      activeField === booleanFieldIndex,
+      theme
     ),
     secondaryBooleanLabel === null ? null : renderBooleanField(
       secondaryBooleanLabel,
       modal.form.values.disabledByDefault,
-      activeField === booleanFieldIndex + 1
+      activeField === booleanFieldIndex + 1,
+      theme
     ),
-    /* @__PURE__ */ jsx7(Text7, { inverse: activeField === submitFieldIndex, children: "Submit" }),
+    /* @__PURE__ */ jsx7(Text7, { children: activeField === submitFieldIndex ? /* @__PURE__ */ jsx7(Text7, { backgroundColor: theme.bg.selection, children: /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.fg.emphasis, children: "Submit" }) }) : /* @__PURE__ */ jsx7(Text7, { bold: true, color: theme.accent.primary, children: "Submit" }) }),
     modal.kind === "edit-agent" ? /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Leaving both defaults unchecked preserves the current setting." }) : null,
-    /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "[Up/Down] move   [Enter] submit selected row   [Esc] cancel" })
+    /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "[Up/Down] move   [Enter] submit   [Esc] cancel" })
   ] });
 }
 
 // src/tui/components/SkillList.tsx
 import { Box as Box8, Text as Text8 } from "ink";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function markerColor(skill) {
-  if (skill.kind === "enabled") {
-    return "green";
-  }
-  if (skill.kind === "issue") {
-    return skill.severity === "error" ? "red" : "yellow";
-  }
-  if (skill.kind === "unmanaged") {
-    return "yellow";
-  }
-  return "gray";
+function statusLabel2(skill) {
+  if (skill.kind === "enabled") return "\u25CF";
+  if (skill.kind === "disabled") return "\u25CB";
+  if (skill.kind === "unmanaged") return "?";
+  if (skill.severity === "error") return "!";
+  return "*";
 }
-function skillLabel(skill) {
-  if (skill.kind === "issue") {
-    return skill.issueCode;
-  }
-  return skill.name;
+function statusColor2(skill, theme) {
+  if (skill.kind === "enabled") return theme.status.success;
+  if (skill.kind === "disabled") return theme.fg.muted;
+  if (skill.kind === "unmanaged") return theme.status.warning;
+  return skill.severity === "error" ? theme.status.error : theme.status.warning;
+}
+function rowLabel(skill) {
+  return skill.kind === "issue" ? skill.issueCode : skill.name;
 }
 function SkillList({
   agentId,
@@ -1986,40 +2107,111 @@ function SkillList({
   width = 28,
   height = 18
 }) {
+  const theme = useTheme();
   const emptyMessage = loadingAgentName !== null ? `Loading skills for ${loadingAgentName}...` : agentId === null ? "Select an agent" : searchQuery !== void 0 && searchQuery.trim().length > 0 ? "No matching skills" : "No skills for this agent";
   return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", width, height, children: [
-    /* @__PURE__ */ jsxs8(Text8, { bold: true, color: focused ? "cyan" : void 0, children: [
+    /* @__PURE__ */ jsxs8(Text8, { bold: true, color: focused ? theme.fg.emphasis : theme.fg.muted, children: [
       "Skills for ",
       agentId ?? "none"
     ] }),
     skills.length === 0 ? /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: emptyMessage }) : skills.map((skill) => {
       const selected = skill.id === selectedSkillId;
-      return /* @__PURE__ */ jsxs8(Text8, { inverse: focused && selected, children: [
-        /* @__PURE__ */ jsx8(Text8, { color: markerColor(skill), children: skill.marker }),
-        /* @__PURE__ */ jsxs8(Text8, { children: [
-          " ",
-          skillLabel(skill)
-        ] })
-      ] }, skill.id);
+      return /* @__PURE__ */ jsx8(Text8, { children: /* @__PURE__ */ jsxs8(
+        Text8,
+        {
+          backgroundColor: focused && selected ? theme.bg.selection : void 0,
+          children: [
+            /* @__PURE__ */ jsx8(Text8, { bold: true, color: statusColor2(skill, theme), children: statusLabel2(skill) }),
+            /* @__PURE__ */ jsxs8(
+              Text8,
+              {
+                color: focused && selected ? theme.fg.emphasis : theme.fg.default,
+                children: [
+                  " ",
+                  rowLabel(skill)
+                ]
+              }
+            )
+          ]
+        }
+      ) }, skill.id);
     })
   ] });
 }
 
 // src/tui/components/StatusLine.tsx
 import { Box as Box9, Text as Text9 } from "ink";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function StatusLine({
-  busy,
-  statusMessage,
-  lastScanAt,
-  issueCount
-}) {
-  const message = statusMessage ?? (busy ? "scanning..." : `Last scan: ${lastScanAt ?? "never"} | issues: ${issueCount}`);
-  return /* @__PURE__ */ jsx9(Box9, { height: 1, children: /* @__PURE__ */ jsx9(Text9, { color: busy ? "cyan" : void 0, children: message }) });
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function StatusLine({ busy, statusMessage, model }) {
+  const theme = useTheme();
+  if (busy) {
+    return /* @__PURE__ */ jsxs9(Box9, { height: 1, children: [
+      /* @__PURE__ */ jsx9(Text9, { bold: true, color: theme.status.info, children: "\u26A1 SkillMux" }),
+      /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \xB7 " }),
+      /* @__PURE__ */ jsx9(Text9, { color: theme.status.info, children: statusMessage ?? "scanning..." })
+    ] });
+  }
+  const agentCount = model.agents.length;
+  let enabled = 0;
+  let disabled = 0;
+  let unmanaged = 0;
+  let issueCount = 0;
+  for (const agent of model.agents) {
+    enabled += agent.enabledCount;
+    disabled += agent.disabledCount;
+    unmanaged += agent.unmanagedCount;
+    issueCount += agent.issueCount;
+  }
+  if (statusMessage !== null) {
+    return /* @__PURE__ */ jsxs9(Box9, { height: 1, children: [
+      /* @__PURE__ */ jsx9(Text9, { bold: true, color: theme.fg.emphasis, children: "\u26A1 SkillMux" }),
+      /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \xB7 " }),
+      /* @__PURE__ */ jsx9(Text9, { color: theme.status.warning, children: statusMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9(Box9, { height: 1, children: [
+    /* @__PURE__ */ jsx9(Text9, { bold: true, color: theme.fg.emphasis, children: "\u26A1 SkillMux" }),
+    /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \xB7 " }),
+    /* @__PURE__ */ jsxs9(Text9, { dimColor: true, children: [
+      agentCount,
+      " agent",
+      agentCount !== 1 ? "s" : ""
+    ] }),
+    /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \u2502 " }),
+    /* @__PURE__ */ jsxs9(Text9, { color: theme.status.success, children: [
+      enabled,
+      " enabled"
+    ] }),
+    /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \u2502 " }),
+    /* @__PURE__ */ jsxs9(Text9, { dimColor: true, children: [
+      disabled,
+      " disabled"
+    ] }),
+    /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \u2502 " }),
+    /* @__PURE__ */ jsxs9(Text9, { color: theme.status.warning, children: [
+      unmanaged,
+      " unmanaged"
+    ] }),
+    issueCount > 0 ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \u2502 " }),
+      /* @__PURE__ */ jsxs9(Text9, { color: theme.status.error, children: [
+        issueCount,
+        " issue",
+        issueCount !== 1 ? "s" : ""
+      ] })
+    ] }) : null,
+    model.lastScanAt ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(Text9, { color: theme.fg.muted, children: " \u2502 " }),
+      /* @__PURE__ */ jsxs9(Text9, { dimColor: true, children: [
+        "Last scan: ",
+        model.lastScanAt
+      ] })
+    ] }) : null
+  ] });
 }
 
 // src/tui/components/Dashboard.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var minimumWidth = 80;
 var minimumHeight = 24;
 var agentRatio = 0.26;
@@ -2030,6 +2222,18 @@ var skillMinimumWidth = 24;
 var detailMinimumWidth = 28;
 var largeModalWidth = 72;
 var largeModalHeight = 14;
+function horizontalBorder(left, mid, right, ...widths) {
+  const h = "\u2500";
+  let result = left;
+  for (let i = 0; i < widths.length; i++) {
+    result += h.repeat(widths[i]);
+    if (i < widths.length - 1) {
+      result += mid;
+    }
+  }
+  result += right;
+  return result;
+}
 function paneWidths(width) {
   const agentWidth = Math.max(agentMinimumWidth, Math.round(width * agentRatio));
   const skillWidth = Math.max(skillMinimumWidth, Math.round(width * skillRatio));
@@ -2053,6 +2257,7 @@ function Dashboard({
   height,
   modalInteraction
 }) {
+  const theme = useTheme();
   const interaction = modalInteraction ?? {
     fieldIndex: 0,
     platformIndex: 0,
@@ -2086,16 +2291,19 @@ function Dashboard({
   const { agentWidth, skillWidth, detailWidth } = paneWidths(width);
   const modalWidth = Math.min(width - 4, largeModalWidth);
   const modalHeight = Math.min(bodyHeight, largeModalHeight);
-  return /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", width, height, children: [
-    /* @__PURE__ */ jsx10(
+  const adjustedDetailWidth = Math.max(0, detailWidth - 2);
+  const contentHeight = Math.max(0, bodyHeight - 2);
+  const separatorBorder1 = state.focus === "agents" ? theme.border.focused : theme.border.default;
+  const separatorBorder2 = state.focus === "skills" ? theme.border.focused : theme.border.default;
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", width, height, children: [
+    /* @__PURE__ */ jsx10(Box10, { height: 1, children: /* @__PURE__ */ jsx10(
       StatusLine,
       {
         busy: state.busy,
         statusMessage: state.statusMessage,
-        lastScanAt: state.model.lastScanAt,
-        issueCount: state.model.issueCount
+        model: state.model
       }
-    ),
+    ) }),
     largeModal ? /* @__PURE__ */ jsx10(
       Box10,
       {
@@ -2123,42 +2331,47 @@ function Dashboard({
           }
         ) : state.modal?.kind === "confirm-remove-agent" ? /* @__PURE__ */ jsx10(ConfirmDialog, { modal: state.modal }) : null })
       }
-    ) : /* @__PURE__ */ jsxs9(Box10, { flexDirection: "row", width, height: bodyHeight, children: [
-      /* @__PURE__ */ jsx10(
-        AgentList,
-        {
-          agents: visibleAgents,
-          selectedAgentId: state.model.selectedAgentId,
-          focused: state.focus === "agents",
-          searchQuery: state.search?.panel === "agents" ? state.search.query : void 0,
-          width: agentWidth,
-          height: bodyHeight
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        SkillList,
-        {
-          agentId: state.model.selectedAgentId,
-          skills: visibleSkills,
-          selectedSkillId: state.model.selectedSkillId,
-          focused: state.focus === "skills",
-          searchQuery: state.search?.panel === "skills" ? state.search.query : void 0,
-          loadingAgentName: loadingAgent?.name ?? null,
-          width: skillWidth,
-          height: bodyHeight
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        DetailPane,
-        {
-          selectedAgent,
-          selectedSkill,
-          focused: state.focus === "detail",
-          loadingAgentName: loadingAgent?.name ?? null,
-          width: detailWidth,
-          height: bodyHeight
-        }
-      )
+    ) : /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx10(Text10, { color: theme.border.default, children: horizontalBorder("\u251C", "\u252C", "\u2524", agentWidth, skillWidth, detailWidth) }),
+      /* @__PURE__ */ jsxs10(Box10, { flexDirection: "row", width, height: contentHeight, children: [
+        /* @__PURE__ */ jsx10(
+          AgentList,
+          {
+            agents: visibleAgents,
+            selectedAgentId: state.model.selectedAgentId,
+            focused: state.focus === "agents",
+            searchQuery: state.search?.panel === "agents" ? state.search.query : void 0,
+            width: agentWidth,
+            height: contentHeight
+          }
+        ),
+        /* @__PURE__ */ jsx10(Text10, { color: separatorBorder1, children: "\u2502" }),
+        /* @__PURE__ */ jsx10(
+          SkillList,
+          {
+            agentId: state.model.selectedAgentId,
+            skills: visibleSkills,
+            selectedSkillId: state.model.selectedSkillId,
+            focused: state.focus === "skills",
+            searchQuery: state.search?.panel === "skills" ? state.search.query : void 0,
+            loadingAgentName: loadingAgent?.name ?? null,
+            width: skillWidth,
+            height: contentHeight
+          }
+        ),
+        /* @__PURE__ */ jsx10(Text10, { color: separatorBorder2, children: "\u2502" }),
+        /* @__PURE__ */ jsx10(
+          DetailPane,
+          {
+            selectedAgent,
+            selectedSkill,
+            focused: state.focus === "detail",
+            loadingAgentName: loadingAgent?.name ?? null,
+            width: adjustedDetailWidth,
+            height: contentHeight
+          }
+        )
+      ] })
     ] }),
     state.modal?.kind === "help" ? /* @__PURE__ */ jsx10(HelpOverlay, {}) : null,
     state.modal?.kind === "confirm-adopt" || state.modal?.kind === "confirm-adopt-all" || state.modal?.kind === "confirm-remove" || state.modal?.kind === "confirm-discard-dirty-form" ? /* @__PURE__ */ jsx10(ConfirmDialog, { modal: state.modal }) : null,
@@ -3100,13 +3313,14 @@ function App({
       setState(updateTuiState(state, { type: "request-scan" }));
     }
   });
+  const theme = useMemo(() => resolveTheme(), []);
   if (loadError !== null) {
     return /* @__PURE__ */ jsx11(Text11, { color: "red", children: loadError });
   }
   if (state === null) {
     return /* @__PURE__ */ jsx11(Text11, { children: "loading dashboard..." });
   }
-  return sizeBridgeEnabled ? /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx11(ThemeProvider, { value: theme, children: sizeBridgeEnabled ? /* @__PURE__ */ jsx11(
     BridgedDashboardViewport,
     {
       state,
@@ -3123,7 +3337,7 @@ function App({
       terminalHeight,
       modalInteraction
     }
-  );
+  ) });
 }
 
 // src/tui/launch-tui.tsx
@@ -3186,4 +3400,4 @@ function sleep(ms) {
 export {
   launchTui
 };
-//# sourceMappingURL=launch-tui-4TJFQA3L.js.map
+//# sourceMappingURL=launch-tui-JD4F62FS.js.map