@geminixiang/mikan 1.0.0-beta.92 → 1.0.0-beta.93

package/CHANGELOG.md

@@ -9,6 +9,12 @@ any release.
 
 ## [Unreleased]
 
+## [1.0.0-beta.93]
+
+### Added
+
+- Skills can be turned off and on per workspace and per conversation with Pi's resource rules: `skills` in the global or conversation settings takes `!glob`, `+path`, and `-path` entries over each skill's directory, every skill stays listed by default, and an excluded skill is left out of the system prompt. The admin portal's Skills pages list every skill the agent loads, including nested ones such as `bundle/vendors/<skill>` that they previously missed, grouped by directory with a filter, and toggle them: the workspace page writes the global entries, and a conversation page cycles a skill between inherited, `+`, and `-` and shows how many skills and characters the prompt lists.
+
 ## [1.0.0-beta.92]
 
 ### Changed

package/dist/adapters/web/admin/client-assets.d.ts

@@ -1,4 +1,4 @@
 export declare const adminViewFunctionsScript: string;
 export declare const adminViewStartupScript = "    initConvSwitcher();\n    initRailNav();\n  ";
-export declare const adminViewStyles = "\n\n  .shell { max-width: 1180px; }\n\n\n\n  .settings-shell {\n    display: grid;\n    grid-template-columns: 216px 1fr;\n    align-items: start;\n    gap: 22px;\n  }\n\n  .settings-rail {\n    position: sticky;\n    top: 28px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rail-scope {\n    display: flex;\n    padding: 3px;\n    border: 1px solid var(--border);\n    border-radius: 11px;\n    background: rgba(0,0,0,0.03);\n    gap: 2px;\n  }\n  .rail-scope-btn {\n    flex: 1;\n    padding: 7px 8px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: var(--muted);\n    font: 600 0.72rem/1.2 'DM Sans', sans-serif;\n    letter-spacing: 0.01em;\n    cursor: pointer;\n    transition: background 140ms, color 140ms;\n  }\n  .rail-scope-btn:hover { color: var(--text); }\n  .rail-scope-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }\n  .rail-scope-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }\n\n  .rail-nav { display: flex; flex-direction: column; gap: 1px; }\n  .rail-nav[hidden] { display: none; }\n  .rail-link {\n    display: flex; align-items: center; gap: 10px;\n    padding: 8px 10px; border: none; border-radius: 9px;\n    background: transparent; color: var(--muted); text-align: left;\n    font: 500 0.86rem/1.2 'DM Sans', sans-serif; cursor: pointer;\n    transition: background 120ms, color 120ms;\n  }\n  .rail-link svg { flex-shrink: 0; opacity: 0.75; }\n  .rail-link:hover { background: rgba(0,0,0,0.045); color: var(--text); }\n  .rail-link:hover svg { opacity: 1; }\n  .rail-link.active {\n    background: var(--text); color: #fafafa; font-weight: 600;\n  }\n  .rail-link.active svg { opacity: 1; }\n  .rail-link:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }\n\n  .settings-panels { min-width: 0; }\n  .tab-panel { display: none; flex-direction: column; gap: 0; }\n  .tab-panel.active { display: flex; }\n\n\n\n  .pane { display: none; padding: 30px 0; border-bottom: 1px solid var(--border); }\n  .pane:last-child { border-bottom: none; }\n  .pane.active { display: block; animation: pane-in 180ms ease; }\n  @keyframes pane-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }\n\n  .pane-head {\n    display: flex; align-items: flex-start; justify-content: space-between;\n    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;\n  }\n  .pane-title {\n    font-family: 'Lora', Georgia, serif; font-size: 1.32rem; font-weight: 600;\n    letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 5px;\n  }\n  .pane-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.55; max-width: 52ch; }\n  .pane-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }\n  .pane-body { display: flex; flex-direction: column; gap: 14px; }\n\n  .card-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 12px; }\n\n  .link-result {\n    margin-top: 12px; padding: 10px 14px; border-radius: 10px;\n    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;\n    font-size: 0.84rem;\n  }\n  .link-result.ok { background: var(--ok-bg); border: 1px solid var(--ok-border); }\n  .link-result.err { background: var(--err-bg); border: 1px solid var(--err-border); color: var(--err-text); }\n  .link-result.loading { background: rgba(0,0,0,0.025); border: 1px solid var(--border); color: var(--muted); }\n  .link-result a {\n    color: var(--ok-text);\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.78rem; word-break: break-all; flex: 1; min-width: 0;\n  }\n  .link-vault { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }\n  .copy-link-btn {\n    padding: 5px 12px; border: 1px solid var(--ok-border); border-radius: 7px;\n    background: rgba(255,255,255,0.7); color: var(--ok-text);\n    font: 500 0.78rem/1.2 'DM Sans', sans-serif;\n    cursor: pointer; flex-shrink: 0;\n  }\n\n  .config-grid {\n    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;\n  }\n  .config-block { display: flex; flex-direction: column; gap: 10px; }\n\n  .config-block .primary-action-btn { align-self: flex-start; min-width: 132px; justify-content: center; }\n  .config-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }\n  .config-row.config-row-stack { grid-template-columns: 1fr; }\n  .config-row label { font-size: 0.82rem; color: var(--muted); }\n  .config-row input, .config-row select, .config-row textarea {\n    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;\n    font-family: inherit; font-size: 0.84rem; width: 100%;\n  }\n  .config-row textarea {\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    resize: vertical;\n  }\n  .toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; }\n\n  .inline-result {\n    padding: 8px 12px; border-radius: 8px; font-size: 0.82rem; margin-top: 4px;\n  }\n  .inline-result.ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }\n  .inline-result.err { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }\n\n  .refresh-btn {\n    flex-shrink: 0; padding: 6px 12px;\n    border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.025); color: var(--muted);\n    font: 500 0.8rem/1.2 'DM Sans', sans-serif; cursor: pointer;\n    transition: background 120ms, color 120ms;\n  }\n  .refresh-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }\n\n\n\n  .workspace-split {\n    display: grid; grid-template-columns: 260px 1fr; gap: 14px;\n    min-height: 360px;\n  }\n  .workspace-tree {\n    border: 1px solid var(--border); border-radius: 12px; padding: 10px;\n    background: rgba(0,0,0,0.02); overflow: auto; max-height: 480px;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.78rem;\n  }\n  .workspace-tree ul { list-style: none; padding-left: 12px; margin: 0; }\n  .workspace-tree .tree-root { padding-left: 0; }\n  .workspace-tree details { margin: 1px 0; }\n  .workspace-tree summary { cursor: pointer; padding: 2px 4px; border-radius: 4px; }\n  .workspace-tree summary:hover { background: rgba(0,0,0,0.05); }\n  .tree-dir { color: var(--text); font-weight: 600; }\n  .tree-dir.empty { color: var(--subtle); font-weight: 400; }\n  .tree-file {\n    display: block; width: 100%; text-align: left;\n    background: transparent; border: none; cursor: pointer;\n    padding: 2px 4px; border-radius: 4px;\n    font-family: inherit; font-size: inherit; color: var(--muted);\n  }\n  .tree-file:hover { background: rgba(0,0,0,0.05); color: var(--text); }\n\n  .workspace-preview {\n    border: 1px solid var(--border); border-radius: 12px;\n    background: #fff; padding: 12px; overflow: auto; max-height: 480px;\n  }\n  .preview-meta {\n    font-size: 0.74rem; color: var(--subtle);\n    margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border);\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n  }\n  .preview-body {\n    margin: 0; white-space: pre-wrap; word-break: break-word;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.78rem; color: var(--text);\n  }\n  .placeholder-msg { color: var(--subtle); font-size: 0.86rem; padding: 24px 8px; text-align: center; }\n\n\n\n  .skills-list { display: flex; flex-direction: column; gap: 8px; }\n  .skill-row {\n    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.02);\n    display: flex; flex-direction: column; align-items: stretch; gap: 6px;\n  }\n  .skill-row-btn {\n    flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer; font-family: inherit;\n    background: transparent; border: none; padding: 0;\n  }\n  .skill-row-btn:hover .skill-name { color: var(--accent); }\n  .skill-row-actions { display: flex; gap: 6px; flex-shrink: 0; justify-content: flex-end; }\n  .skill-name {\n    font-weight: 650; font-size: 0.9rem; color: var(--text);\n    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;\n  }\n  .skill-source {\n    padding: 1px 8px; border-radius: 999px; font-size: 0.7rem;\n    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;\n  }\n  .skill-source-global { background: rgba(59,130,246,0.1); color: #1d4ed8; }\n  .skill-source-conversation { background: rgba(217,119,6,0.1); color: var(--accent); }\n  .skill-desc { color: var(--muted); font-size: 0.82rem; margin-top: 4px; line-height: 1.5; }\n\n\n\n  .form-input {\n    flex: 1 1 240px; min-width: 0; padding: 8px 10px;\n    border: 1px solid var(--border); border-radius: 8px; background: var(--card);\n    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8rem; color: var(--text);\n  }\n  .status-msg {\n    padding: 8px 12px; border-radius: 8px; margin-bottom: 12px;\n    font-size: 0.82rem; line-height: 1.5; word-break: break-word;\n  }\n  .status-msg-ok { background: rgba(22,163,74,0.1); color: #15803d; }\n  .status-msg-err { background: rgba(220,38,38,0.1); color: #b91c1c; }\n  .status-msg-busy { background: rgba(0,0,0,0.05); color: var(--muted); }\n  .mcp-btn {\n    padding: 4px 10px; border: 1px solid var(--border); border-radius: 7px;\n    background: var(--card); color: var(--text); font-size: 0.76rem; cursor: pointer;\n  }\n  .mcp-btn:hover { background: rgba(0,0,0,0.05); }\n  .mcp-btn-danger { color: #b91c1c; }\n  .mcp-badge {\n    padding: 1px 8px; border-radius: 999px; font-size: 0.7rem;\n    font-weight: 600; letter-spacing: 0.03em;\n  }\n  .mcp-badge-ok { background: rgba(22,163,74,0.1); color: #15803d; }\n  .mcp-badge-warn { background: rgba(217,119,6,0.12); color: var(--accent); }\n\n  .mcp-market-head {\n    display: flex; align-items: end; justify-content: space-between; gap: 16px;\n    margin-bottom: 12px;\n  }\n  .mcp-market-head h3 { margin: 0; font-size: 1rem; }\n  .mcp-market-head p { margin: 3px 0 0; color: var(--muted); font-size: 0.8rem; }\n  .mcp-market-head > span {\n    color: var(--subtle); font: 500 0.72rem/1.2 'JetBrains Mono', ui-monospace, monospace;\n  }\n  .mcp-preset-grid {\n    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;\n  }\n  .mcp-preset {\n    min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px;\n    background:\n      linear-gradient(145deg, rgba(255,255,255,0.85), rgba(247,245,238,0.72)),\n      var(--card);\n    display: flex; flex-direction: column; min-height: 190px;\n  }\n  .mcp-preset-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n  .mcp-preset-category {\n    color: var(--accent); font-size: 0.66rem; font-weight: 700;\n    letter-spacing: 0.09em; text-transform: uppercase;\n  }\n  .mcp-preset h3 { margin: 14px 0 5px; font-size: 1.06rem; letter-spacing: -0.02em; }\n  .mcp-preset p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }\n  .mcp-preset-meta {\n    margin-top: 12px; color: var(--subtle); font-size: 0.72rem;\n  }\n  .mcp-preset-meta code { color: var(--text); background: transparent; }\n  .mcp-preset-actions {\n    margin-top: auto; padding-top: 16px; display: flex; align-items: center;\n    justify-content: space-between; gap: 10px;\n  }\n  .mcp-preset-actions a, .mcp-setup-link {\n    color: var(--muted); font-size: 0.76rem; text-decoration: none;\n  }\n  .mcp-preset-actions a:hover, .mcp-setup-link:hover { color: var(--text); text-decoration: underline; }\n  .mcp-preset-actions .primary-action-btn { padding: 6px 12px; }\n  .mcp-installed {\n    margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px;\n  }\n  .mcp-installed > summary {\n    cursor: pointer; color: var(--muted); font-size: 0.8rem; font-weight: 600;\n    margin-bottom: 10px;\n  }\n  .mcp-installed-card { min-height: 150px; }\n  .mcp-installed-transport {\n    font-family: 'JetBrains Mono', ui-monospace, monospace; word-break: break-all;\n  }\n  .mcp-add-card {\n    min-width: 0; min-height: 190px; border: 1.5px dashed var(--border); border-radius: 12px;\n    background: transparent; color: var(--muted); font-size: 0.86rem; font-weight: 600;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 8px; cursor: pointer;\n  }\n  .mcp-add-card:hover { background: rgba(0,0,0,0.03); color: var(--text); border-color: var(--text); }\n  .mcp-add-card-plus { font-size: 1.8rem; line-height: 1; font-weight: 400; }\n  .mcp-manual-hint { color: var(--muted); font-size: 0.8rem; margin: 0 0 10px; line-height: 1.5; }\n  .mcp-add-mode { display: flex; gap: 8px; margin: 0 0 12px; }\n  .mcp-mode-btn {\n    padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;\n    background: var(--card); font-size: 0.8rem; cursor: pointer; color: var(--muted);\n  }\n  .mcp-mode-btn.active { background: var(--text); color: #fafafa; border-color: var(--text); }\n  .mcp-guided-grid { display: grid; gap: 12px; }\n  .mcp-field { display: grid; gap: 5px; }\n  .mcp-field span { font-size: 0.78rem; font-weight: 650; color: var(--muted); }\n  .mcp-transport-toggle { display: flex; gap: 16px; font-size: 0.85rem; align-items: center; }\n  .mcp-transport-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }\n  .mcp-transport-fields { display: grid; gap: 12px; }\n  .mcp-kv-block { display: grid; gap: 8px; }\n  .mcp-kv-head { display: flex; align-items: center; justify-content: space-between; }\n  .mcp-kv-head span { font-size: 0.78rem; font-weight: 650; color: var(--muted); }\n  .mcp-kv-rows { display: grid; gap: 6px; }\n  .mcp-kv-row { display: flex; gap: 8px; }\n  .mcp-kv-row .form-input { flex: 1 1 auto; }\n  .mcp-json {\n    width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.8rem; line-height: 1.45; resize: vertical;\n  }\n  .mcp-verify { margin-top: 10px; display: grid; gap: 6px; }\n  .mcp-verify .inline-result { word-break: break-word; }\n\n  .mcp-dialog {\n    width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 40px);\n    border: 1px solid var(--border); border-radius: 18px; padding: 22px;\n    color: var(--text); background: #fbfaf6; box-shadow: 0 28px 90px rgba(18,18,16,0.24);\n\n    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;\n  }\n  .mcp-dialog::backdrop { background: rgba(20,20,18,0.5); backdrop-filter: blur(3px); }\n  .mcp-dialog-head {\n    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;\n    padding-bottom: 14px; border-bottom: 1px solid var(--border);\n  }\n  .mcp-dialog-head .card-title { margin: 4px 0 0; }\n  .mcp-dialog-close {\n    border: 0; background: transparent; color: var(--muted); cursor: pointer;\n    font-size: 1.6rem; line-height: 1; padding: 2px 5px;\n  }\n  .mcp-dialog-desc { color: var(--muted); line-height: 1.55; font-size: 0.88rem; }\n  .mcp-install-preview {\n    display: grid; gap: 6px; padding: 12px; border-radius: 10px;\n    background: #1d211f; color: #f5f2e9;\n  }\n  .mcp-install-preview span {\n    color: #aeb8b1; font-size: 0.66rem; font-weight: 700;\n    letter-spacing: 0.08em; text-transform: uppercase;\n  }\n  .mcp-install-preview code {\n    color: #f5f2e9; background: transparent; word-break: break-all; font-size: 0.78rem;\n  }\n  .mcp-security-note, .mcp-replace-note {\n    margin-top: 12px; padding: 10px 12px; border-radius: 9px;\n    font-size: 0.78rem; line-height: 1.5;\n  }\n  .mcp-security-note.local {\n    background: rgba(220,38,38,0.08); border: 1px solid rgba(185,28,28,0.18); color: #991b1b;\n  }\n  .mcp-security-note.remote {\n    background: rgba(59,130,246,0.08); border: 1px solid rgba(29,78,216,0.16); color: #1e40af;\n  }\n  .mcp-replace-note { background: rgba(217,119,6,0.1); color: #92400e; }\n  .mcp-credential { display: grid; gap: 5px; margin-top: 14px; }\n  .mcp-credential span { font-size: 0.78rem; font-weight: 650; }\n  .mcp-credential input {\n    width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;\n    background: #fff; color: var(--text); font: 0.8rem/1.3 'JetBrains Mono', ui-monospace, monospace;\n  }\n  .mcp-credential small, .mcp-secret-note, .mcp-no-credentials {\n    color: var(--subtle); font-size: 0.72rem; line-height: 1.45;\n  }\n  .mcp-secret-note { margin: 14px 0 8px; }\n  .mcp-no-credentials { margin: 14px 0 0; }\n  #mcp-dialog-error, #mcp-custom-dialog-error { margin-top: 14px; }\n  .mcp-dialog-actions {\n    display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;\n    padding-top: 14px; border-top: 1px solid var(--border);\n  }\n\n\n\n  .events-list { display: flex; flex-direction: column; gap: 8px; }\n  .event-row {\n    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.02);\n  }\n  .event-row-top {\n    display: flex; align-items: center; justify-content: space-between;\n    gap: 10px;\n  }\n  .event-name { min-width: 0; flex: 1; word-break: break-all; }\n  .event-name code { font-size: 0.82rem; background: transparent; padding: 0; }\n  .event-meta { font-size: 0.74rem; color: var(--muted); margin-top: 3px; }\n  .event-text {\n    font-size: 0.82rem; color: var(--text); margin-top: 6px;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    white-space: pre-wrap; word-break: break-word;\n  }\n  .event-delete-btn {\n    flex-shrink: 0; padding: 4px 10px;\n    border-radius: 7px; border: 1px solid rgba(185, 28, 28, 0.18);\n    background: rgba(0,0,0,0.03); color: var(--err-text);\n    font: 500 0.76rem/1.2 'DM Sans', sans-serif; cursor: pointer;\n  }\n  .event-delete-btn:hover:not(:disabled) {\n    background: var(--err-bg); border-color: rgba(185, 28, 28, 0.28);\n  }\n  .event-delete-btn:disabled { opacity: 0.5; cursor: wait; }\n\n\n\n  .conv-list { display: flex; flex-direction: column; gap: 6px; }\n  .conv-row-btn {\n    display: flex; align-items: center; gap: 12px;\n    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.02); cursor: pointer; text-align: left;\n    transition: background 120ms, border-color 120ms;\n  }\n  .conv-row-btn:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.14); }\n  .conv-id { flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.84rem; }\n  .conv-last { color: var(--subtle); font-size: 0.78rem; }\n\n  .usage-table-wrap { overflow-x: auto; }\n  .usage-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }\n  .usage-table th, .usage-table td {\n    padding: 8px 10px; border-bottom: 1px solid var(--border);\n    text-align: left; white-space: nowrap;\n  }\n  .usage-table th {\n    color: var(--subtle); font-size: 0.68rem;\n    text-transform: uppercase; letter-spacing: 0.08em;\n  }\n  .usage-table code { font-size: 0.72rem; }\n\n  .timeline-controls {\n    display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 16px;\n  }\n  .timeline-controls label {\n    display: flex; align-items: center; gap: 8px;\n    font-size: 0.76rem; color: var(--muted);\n  }\n  .timeline-controls select {\n    padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;\n    background: #fff; color: var(--text); font-size: 0.8rem; max-width: 240px;\n  }\n  .tl-note { margin-top: 8px; font-size: 0.72rem; color: var(--subtle); }\n  .tl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }\n  .tl-card { background: rgba(0,0,0,0.025); border-radius: 10px; padding: 10px 12px; }\n  .tl-card-label { font-size: 0.73rem; color: var(--muted); margin-bottom: 4px; }\n  .tl-card-value { font-size: 1.35rem; font-weight: 600; color: var(--text); }\n  .tl-legend { display: flex; gap: 16px; font-size: 0.73rem; color: var(--muted); margin-bottom: 10px; }\n  .tl-legend span { display: inline-flex; align-items: center; gap: 6px; }\n  .tl-legend-item { cursor: pointer; transition: opacity 100ms; }\n  .tl-legend-item:hover { text-decoration: underline; }\n  .tl-legend-item.active { color: var(--text); font-weight: 600; text-decoration: underline; }\n  .tl-legend-item.dim { opacity: 0.4; }\n  .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }\n  .sw-cache-read { background: rgba(0,0,0,0.18); }\n  .sw-cache-write { background: #3b6fb0; }\n  .sw-input { background: var(--accent); }\n  .sw-output { background: var(--ok-text); }\n  .tl-chart {\n    position: relative;\n    display: flex; align-items: flex-end; gap: 6px;\n    height: 216px; border-bottom: 1px solid var(--border);\n  }\n  .tl-peak {\n    position: absolute; left: 0; right: 0; height: 0;\n    border-top: 1px dashed var(--accent); pointer-events: none;\n  }\n  .tl-peak-label {\n    position: absolute; left: 0; top: -15px;\n    font-size: 0.7rem; color: var(--accent); white-space: nowrap;\n  }\n  .tl-bar {\n    position: relative; flex: 1; min-width: 0; height: 180px;\n    display: flex; flex-direction: column; justify-content: flex-end;\n    border-radius: 6px 6px 0 0; transition: background 80ms ease;\n  }\n  .tl-bar:hover { background: rgba(0,0,0,0.06); }\n  .tl-bar:hover .tl-seg { opacity: 0.55; }\n  .tl-fill {\n    display: flex; flex-direction: column; justify-content: flex-end;\n    border-radius: 3px 3px 0 0; overflow: hidden;\n  }\n  .tl-tip {\n    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n    margin-bottom: 6px; padding: 5px 9px; border-radius: 6px;\n    background: var(--text); color: #fafafa; font-size: 0.7rem; line-height: 1.35;\n    white-space: nowrap; opacity: 0; pointer-events: none; z-index: 5;\n  }\n  .tl-bar:hover .tl-tip { opacity: 1; }\n  .tl-seg { display: block; width: 100%; }\n  .tl-seg.tl-output { background: var(--ok-text); }\n  .tl-seg.tl-input { background: var(--accent); }\n  .tl-seg.tl-cache-write { background: #3b6fb0; }\n  .tl-seg.tl-cache-read { background: rgba(0,0,0,0.18); }\n  .tl-empty { display: block; width: 100%; height: 3px; background: var(--border); }\n  .tl-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.7rem; color: var(--subtle); }\n\n  .status-pill {\n    display: inline-flex; padding: 2px 9px; border-radius: 999px;\n    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;\n  }\n  .status-pill.running { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }\n\n  @media (max-width: 860px) {\n    .settings-shell { grid-template-columns: 1fr; }\n    .settings-rail { position: static; }\n\n    .rail-nav {\n      flex-direction: row; flex-wrap: nowrap; gap: 6px;\n      overflow-x: auto; padding-bottom: 6px;\n\n      min-width: 0; max-width: 100%;\n      scrollbar-width: thin; -webkit-overflow-scrolling: touch;\n    }\n    .settings-rail { min-width: 0; }\n    .rail-nav[hidden] { display: none; }\n    .rail-link { flex: 0 0 auto; padding: 7px 11px; }\n    .rail-link span { white-space: nowrap; }\n  }\n\n  @media (max-width: 640px) {\n    .config-grid { grid-template-columns: 1fr; }\n    .config-row { grid-template-columns: 1fr; gap: 4px; }\n    .workspace-split { grid-template-columns: 1fr; }\n    .workspace-tree, .workspace-preview { max-height: 260px; }\n    .mcp-preset-grid { grid-template-columns: 1fr; }\n    .mcp-dialog { padding: 18px; }\n  }\n";
+export declare const adminViewStyles = "\n\n  .shell { max-width: 1180px; }\n\n\n\n  .settings-shell {\n    display: grid;\n    grid-template-columns: 216px 1fr;\n    align-items: start;\n    gap: 22px;\n  }\n\n  .settings-rail {\n    position: sticky;\n    top: 28px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .rail-scope {\n    display: flex;\n    padding: 3px;\n    border: 1px solid var(--border);\n    border-radius: 11px;\n    background: rgba(0,0,0,0.03);\n    gap: 2px;\n  }\n  .rail-scope-btn {\n    flex: 1;\n    padding: 7px 8px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: var(--muted);\n    font: 600 0.72rem/1.2 'DM Sans', sans-serif;\n    letter-spacing: 0.01em;\n    cursor: pointer;\n    transition: background 140ms, color 140ms;\n  }\n  .rail-scope-btn:hover { color: var(--text); }\n  .rail-scope-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }\n  .rail-scope-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }\n\n  .rail-nav { display: flex; flex-direction: column; gap: 1px; }\n  .rail-nav[hidden] { display: none; }\n  .rail-link {\n    display: flex; align-items: center; gap: 10px;\n    padding: 8px 10px; border: none; border-radius: 9px;\n    background: transparent; color: var(--muted); text-align: left;\n    font: 500 0.86rem/1.2 'DM Sans', sans-serif; cursor: pointer;\n    transition: background 120ms, color 120ms;\n  }\n  .rail-link svg { flex-shrink: 0; opacity: 0.75; }\n  .rail-link:hover { background: rgba(0,0,0,0.045); color: var(--text); }\n  .rail-link:hover svg { opacity: 1; }\n  .rail-link.active {\n    background: var(--text); color: #fafafa; font-weight: 600;\n  }\n  .rail-link.active svg { opacity: 1; }\n  .rail-link:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }\n\n  .settings-panels { min-width: 0; }\n  .tab-panel { display: none; flex-direction: column; gap: 0; }\n  .tab-panel.active { display: flex; }\n\n\n\n  .pane { display: none; padding: 30px 0; border-bottom: 1px solid var(--border); }\n  .pane:last-child { border-bottom: none; }\n  .pane.active { display: block; animation: pane-in 180ms ease; }\n  @keyframes pane-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }\n\n  .pane-head {\n    display: flex; align-items: flex-start; justify-content: space-between;\n    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;\n  }\n  .pane-title {\n    font-family: 'Lora', Georgia, serif; font-size: 1.32rem; font-weight: 600;\n    letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 5px;\n  }\n  .pane-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.55; max-width: 52ch; }\n  .pane-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }\n  .pane-body { display: flex; flex-direction: column; gap: 14px; }\n\n  .card-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 12px; }\n\n  .link-result {\n    margin-top: 12px; padding: 10px 14px; border-radius: 10px;\n    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;\n    font-size: 0.84rem;\n  }\n  .link-result.ok { background: var(--ok-bg); border: 1px solid var(--ok-border); }\n  .link-result.err { background: var(--err-bg); border: 1px solid var(--err-border); color: var(--err-text); }\n  .link-result.loading { background: rgba(0,0,0,0.025); border: 1px solid var(--border); color: var(--muted); }\n  .link-result a {\n    color: var(--ok-text);\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.78rem; word-break: break-all; flex: 1; min-width: 0;\n  }\n  .link-vault { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }\n  .copy-link-btn {\n    padding: 5px 12px; border: 1px solid var(--ok-border); border-radius: 7px;\n    background: rgba(255,255,255,0.7); color: var(--ok-text);\n    font: 500 0.78rem/1.2 'DM Sans', sans-serif;\n    cursor: pointer; flex-shrink: 0;\n  }\n\n  .config-grid {\n    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;\n  }\n  .config-block { display: flex; flex-direction: column; gap: 10px; }\n\n  .config-block .primary-action-btn { align-self: flex-start; min-width: 132px; justify-content: center; }\n  .config-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }\n  .config-row.config-row-stack { grid-template-columns: 1fr; }\n  .config-row label { font-size: 0.82rem; color: var(--muted); }\n  .config-row input, .config-row select, .config-row textarea {\n    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;\n    font-family: inherit; font-size: 0.84rem; width: 100%;\n  }\n  .config-row textarea {\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    resize: vertical;\n  }\n  .toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; }\n\n  .inline-result {\n    padding: 8px 12px; border-radius: 8px; font-size: 0.82rem; margin-top: 4px;\n  }\n  .inline-result.ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }\n  .inline-result.err { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }\n\n  .refresh-btn {\n    flex-shrink: 0; padding: 6px 12px;\n    border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.025); color: var(--muted);\n    font: 500 0.8rem/1.2 'DM Sans', sans-serif; cursor: pointer;\n    transition: background 120ms, color 120ms;\n  }\n  .refresh-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }\n\n\n\n  .workspace-split {\n    display: grid; grid-template-columns: 260px 1fr; gap: 14px;\n    min-height: 360px;\n  }\n  .workspace-tree {\n    border: 1px solid var(--border); border-radius: 12px; padding: 10px;\n    background: rgba(0,0,0,0.02); overflow: auto; max-height: 480px;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.78rem;\n  }\n  .workspace-tree ul { list-style: none; padding-left: 12px; margin: 0; }\n  .workspace-tree .tree-root { padding-left: 0; }\n  .workspace-tree details { margin: 1px 0; }\n  .workspace-tree summary { cursor: pointer; padding: 2px 4px; border-radius: 4px; }\n  .workspace-tree summary:hover { background: rgba(0,0,0,0.05); }\n  .tree-dir { color: var(--text); font-weight: 600; }\n  .tree-dir.empty { color: var(--subtle); font-weight: 400; }\n  .tree-file {\n    display: block; width: 100%; text-align: left;\n    background: transparent; border: none; cursor: pointer;\n    padding: 2px 4px; border-radius: 4px;\n    font-family: inherit; font-size: inherit; color: var(--muted);\n  }\n  .tree-file:hover { background: rgba(0,0,0,0.05); color: var(--text); }\n\n  .workspace-preview {\n    border: 1px solid var(--border); border-radius: 12px;\n    background: #fff; padding: 12px; overflow: auto; max-height: 480px;\n  }\n  .preview-meta {\n    font-size: 0.74rem; color: var(--subtle);\n    margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border);\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n  }\n  .preview-body {\n    margin: 0; white-space: pre-wrap; word-break: break-word;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.78rem; color: var(--text);\n  }\n  .placeholder-msg { color: var(--subtle); font-size: 0.86rem; padding: 24px 8px; text-align: center; }\n\n\n\n  .skills-list { display: flex; flex-direction: column; gap: 8px; }\n  .skill-row {\n    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.02);\n    display: flex; flex-direction: row; align-items: flex-start; gap: 10px;\n  }\n  .skill-row-dim { opacity: 0.6; }\n  .skill-toggle {\n    flex-shrink: 0; cursor: pointer; border: none; background: transparent; padding: 0;\n    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85rem; color: var(--text);\n  }\n  .skill-group {\n    margin-top: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace;\n    font-size: 0.75rem; color: var(--subtle);\n  }\n  .skill-state { font-size: 0.72rem; font-weight: 500; color: var(--subtle); }\n  .skills-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }\n  .skills-filter {\n    flex: 0 1 260px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;\n    background: var(--card); font-size: 0.82rem; color: var(--text);\n  }\n  .skills-summary { font-size: 0.8rem; color: var(--muted); }\n  .skill-row-btn {\n    flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer; font-family: inherit;\n    background: transparent; border: none; padding: 0;\n  }\n  .skill-row-btn:hover .skill-name { color: var(--accent); }\n  .skill-row-actions { display: flex; gap: 6px; flex-shrink: 0; justify-content: flex-end; }\n  .skill-name {\n    font-weight: 650; font-size: 0.9rem; color: var(--text);\n    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;\n  }\n  .skill-source {\n    padding: 1px 8px; border-radius: 999px; font-size: 0.7rem;\n    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;\n  }\n  .skill-source-global { background: rgba(59,130,246,0.1); color: #1d4ed8; }\n  .skill-source-conversation { background: rgba(217,119,6,0.1); color: var(--accent); }\n  .skill-desc { color: var(--muted); font-size: 0.82rem; margin-top: 4px; line-height: 1.5; }\n\n\n\n  .form-input {\n    flex: 1 1 240px; min-width: 0; padding: 8px 10px;\n    border: 1px solid var(--border); border-radius: 8px; background: var(--card);\n    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8rem; color: var(--text);\n  }\n  .status-msg {\n    padding: 8px 12px; border-radius: 8px; margin-bottom: 12px;\n    font-size: 0.82rem; line-height: 1.5; word-break: break-word;\n  }\n  .status-msg-ok { background: rgba(22,163,74,0.1); color: #15803d; }\n  .status-msg-err { background: rgba(220,38,38,0.1); color: #b91c1c; }\n  .status-msg-busy { background: rgba(0,0,0,0.05); color: var(--muted); }\n  .mcp-btn {\n    padding: 4px 10px; border: 1px solid var(--border); border-radius: 7px;\n    background: var(--card); color: var(--text); font-size: 0.76rem; cursor: pointer;\n  }\n  .mcp-btn:hover { background: rgba(0,0,0,0.05); }\n  .mcp-btn-danger { color: #b91c1c; }\n  .mcp-badge {\n    padding: 1px 8px; border-radius: 999px; font-size: 0.7rem;\n    font-weight: 600; letter-spacing: 0.03em;\n  }\n  .mcp-badge-ok { background: rgba(22,163,74,0.1); color: #15803d; }\n  .mcp-badge-warn { background: rgba(217,119,6,0.12); color: var(--accent); }\n\n  .mcp-market-head {\n    display: flex; align-items: end; justify-content: space-between; gap: 16px;\n    margin-bottom: 12px;\n  }\n  .mcp-market-head h3 { margin: 0; font-size: 1rem; }\n  .mcp-market-head p { margin: 3px 0 0; color: var(--muted); font-size: 0.8rem; }\n  .mcp-market-head > span {\n    color: var(--subtle); font: 500 0.72rem/1.2 'JetBrains Mono', ui-monospace, monospace;\n  }\n  .mcp-preset-grid {\n    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;\n  }\n  .mcp-preset {\n    min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px;\n    background:\n      linear-gradient(145deg, rgba(255,255,255,0.85), rgba(247,245,238,0.72)),\n      var(--card);\n    display: flex; flex-direction: column; min-height: 190px;\n  }\n  .mcp-preset-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n  .mcp-preset-category {\n    color: var(--accent); font-size: 0.66rem; font-weight: 700;\n    letter-spacing: 0.09em; text-transform: uppercase;\n  }\n  .mcp-preset h3 { margin: 14px 0 5px; font-size: 1.06rem; letter-spacing: -0.02em; }\n  .mcp-preset p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }\n  .mcp-preset-meta {\n    margin-top: 12px; color: var(--subtle); font-size: 0.72rem;\n  }\n  .mcp-preset-meta code { color: var(--text); background: transparent; }\n  .mcp-preset-actions {\n    margin-top: auto; padding-top: 16px; display: flex; align-items: center;\n    justify-content: space-between; gap: 10px;\n  }\n  .mcp-preset-actions a, .mcp-setup-link {\n    color: var(--muted); font-size: 0.76rem; text-decoration: none;\n  }\n  .mcp-preset-actions a:hover, .mcp-setup-link:hover { color: var(--text); text-decoration: underline; }\n  .mcp-preset-actions .primary-action-btn { padding: 6px 12px; }\n  .mcp-installed {\n    margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px;\n  }\n  .mcp-installed > summary {\n    cursor: pointer; color: var(--muted); font-size: 0.8rem; font-weight: 600;\n    margin-bottom: 10px;\n  }\n  .mcp-installed-card { min-height: 150px; }\n  .mcp-installed-transport {\n    font-family: 'JetBrains Mono', ui-monospace, monospace; word-break: break-all;\n  }\n  .mcp-add-card {\n    min-width: 0; min-height: 190px; border: 1.5px dashed var(--border); border-radius: 12px;\n    background: transparent; color: var(--muted); font-size: 0.86rem; font-weight: 600;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 8px; cursor: pointer;\n  }\n  .mcp-add-card:hover { background: rgba(0,0,0,0.03); color: var(--text); border-color: var(--text); }\n  .mcp-add-card-plus { font-size: 1.8rem; line-height: 1; font-weight: 400; }\n  .mcp-manual-hint { color: var(--muted); font-size: 0.8rem; margin: 0 0 10px; line-height: 1.5; }\n  .mcp-add-mode { display: flex; gap: 8px; margin: 0 0 12px; }\n  .mcp-mode-btn {\n    padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;\n    background: var(--card); font-size: 0.8rem; cursor: pointer; color: var(--muted);\n  }\n  .mcp-mode-btn.active { background: var(--text); color: #fafafa; border-color: var(--text); }\n  .mcp-guided-grid { display: grid; gap: 12px; }\n  .mcp-field { display: grid; gap: 5px; }\n  .mcp-field span { font-size: 0.78rem; font-weight: 650; color: var(--muted); }\n  .mcp-transport-toggle { display: flex; gap: 16px; font-size: 0.85rem; align-items: center; }\n  .mcp-transport-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }\n  .mcp-transport-fields { display: grid; gap: 12px; }\n  .mcp-kv-block { display: grid; gap: 8px; }\n  .mcp-kv-head { display: flex; align-items: center; justify-content: space-between; }\n  .mcp-kv-head span { font-size: 0.78rem; font-weight: 650; color: var(--muted); }\n  .mcp-kv-rows { display: grid; gap: 6px; }\n  .mcp-kv-row { display: flex; gap: 8px; }\n  .mcp-kv-row .form-input { flex: 1 1 auto; }\n  .mcp-json {\n    width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.8rem; line-height: 1.45; resize: vertical;\n  }\n  .mcp-verify { margin-top: 10px; display: grid; gap: 6px; }\n  .mcp-verify .inline-result { word-break: break-word; }\n\n  .mcp-dialog {\n    width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 40px);\n    border: 1px solid var(--border); border-radius: 18px; padding: 22px;\n    color: var(--text); background: #fbfaf6; box-shadow: 0 28px 90px rgba(18,18,16,0.24);\n\n    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;\n  }\n  .mcp-dialog::backdrop { background: rgba(20,20,18,0.5); backdrop-filter: blur(3px); }\n  .mcp-dialog-head {\n    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;\n    padding-bottom: 14px; border-bottom: 1px solid var(--border);\n  }\n  .mcp-dialog-head .card-title { margin: 4px 0 0; }\n  .mcp-dialog-close {\n    border: 0; background: transparent; color: var(--muted); cursor: pointer;\n    font-size: 1.6rem; line-height: 1; padding: 2px 5px;\n  }\n  .mcp-dialog-desc { color: var(--muted); line-height: 1.55; font-size: 0.88rem; }\n  .mcp-install-preview {\n    display: grid; gap: 6px; padding: 12px; border-radius: 10px;\n    background: #1d211f; color: #f5f2e9;\n  }\n  .mcp-install-preview span {\n    color: #aeb8b1; font-size: 0.66rem; font-weight: 700;\n    letter-spacing: 0.08em; text-transform: uppercase;\n  }\n  .mcp-install-preview code {\n    color: #f5f2e9; background: transparent; word-break: break-all; font-size: 0.78rem;\n  }\n  .mcp-security-note, .mcp-replace-note {\n    margin-top: 12px; padding: 10px 12px; border-radius: 9px;\n    font-size: 0.78rem; line-height: 1.5;\n  }\n  .mcp-security-note.local {\n    background: rgba(220,38,38,0.08); border: 1px solid rgba(185,28,28,0.18); color: #991b1b;\n  }\n  .mcp-security-note.remote {\n    background: rgba(59,130,246,0.08); border: 1px solid rgba(29,78,216,0.16); color: #1e40af;\n  }\n  .mcp-replace-note { background: rgba(217,119,6,0.1); color: #92400e; }\n  .mcp-credential { display: grid; gap: 5px; margin-top: 14px; }\n  .mcp-credential span { font-size: 0.78rem; font-weight: 650; }\n  .mcp-credential input {\n    width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;\n    background: #fff; color: var(--text); font: 0.8rem/1.3 'JetBrains Mono', ui-monospace, monospace;\n  }\n  .mcp-credential small, .mcp-secret-note, .mcp-no-credentials {\n    color: var(--subtle); font-size: 0.72rem; line-height: 1.45;\n  }\n  .mcp-secret-note { margin: 14px 0 8px; }\n  .mcp-no-credentials { margin: 14px 0 0; }\n  #mcp-dialog-error, #mcp-custom-dialog-error { margin-top: 14px; }\n  .mcp-dialog-actions {\n    display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;\n    padding-top: 14px; border-top: 1px solid var(--border);\n  }\n\n\n\n  .events-list { display: flex; flex-direction: column; gap: 8px; }\n  .event-row {\n    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.02);\n  }\n  .event-row-top {\n    display: flex; align-items: center; justify-content: space-between;\n    gap: 10px;\n  }\n  .event-name { min-width: 0; flex: 1; word-break: break-all; }\n  .event-name code { font-size: 0.82rem; background: transparent; padding: 0; }\n  .event-meta { font-size: 0.74rem; color: var(--muted); margin-top: 3px; }\n  .event-text {\n    font-size: 0.82rem; color: var(--text); margin-top: 6px;\n    font-family: 'JetBrains Mono', ui-monospace, monospace;\n    white-space: pre-wrap; word-break: break-word;\n  }\n  .event-delete-btn {\n    flex-shrink: 0; padding: 4px 10px;\n    border-radius: 7px; border: 1px solid rgba(185, 28, 28, 0.18);\n    background: rgba(0,0,0,0.03); color: var(--err-text);\n    font: 500 0.76rem/1.2 'DM Sans', sans-serif; cursor: pointer;\n  }\n  .event-delete-btn:hover:not(:disabled) {\n    background: var(--err-bg); border-color: rgba(185, 28, 28, 0.28);\n  }\n  .event-delete-btn:disabled { opacity: 0.5; cursor: wait; }\n\n\n\n  .conv-list { display: flex; flex-direction: column; gap: 6px; }\n  .conv-row-btn {\n    display: flex; align-items: center; gap: 12px;\n    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;\n    background: rgba(0,0,0,0.02); cursor: pointer; text-align: left;\n    transition: background 120ms, border-color 120ms;\n  }\n  .conv-row-btn:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.14); }\n  .conv-id { flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.84rem; }\n  .conv-last { color: var(--subtle); font-size: 0.78rem; }\n\n  .usage-table-wrap { overflow-x: auto; }\n  .usage-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }\n  .usage-table th, .usage-table td {\n    padding: 8px 10px; border-bottom: 1px solid var(--border);\n    text-align: left; white-space: nowrap;\n  }\n  .usage-table th {\n    color: var(--subtle); font-size: 0.68rem;\n    text-transform: uppercase; letter-spacing: 0.08em;\n  }\n  .usage-table code { font-size: 0.72rem; }\n\n  .timeline-controls {\n    display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 16px;\n  }\n  .timeline-controls label {\n    display: flex; align-items: center; gap: 8px;\n    font-size: 0.76rem; color: var(--muted);\n  }\n  .timeline-controls select {\n    padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;\n    background: #fff; color: var(--text); font-size: 0.8rem; max-width: 240px;\n  }\n  .tl-note { margin-top: 8px; font-size: 0.72rem; color: var(--subtle); }\n  .tl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }\n  .tl-card { background: rgba(0,0,0,0.025); border-radius: 10px; padding: 10px 12px; }\n  .tl-card-label { font-size: 0.73rem; color: var(--muted); margin-bottom: 4px; }\n  .tl-card-value { font-size: 1.35rem; font-weight: 600; color: var(--text); }\n  .tl-legend { display: flex; gap: 16px; font-size: 0.73rem; color: var(--muted); margin-bottom: 10px; }\n  .tl-legend span { display: inline-flex; align-items: center; gap: 6px; }\n  .tl-legend-item { cursor: pointer; transition: opacity 100ms; }\n  .tl-legend-item:hover { text-decoration: underline; }\n  .tl-legend-item.active { color: var(--text); font-weight: 600; text-decoration: underline; }\n  .tl-legend-item.dim { opacity: 0.4; }\n  .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }\n  .sw-cache-read { background: rgba(0,0,0,0.18); }\n  .sw-cache-write { background: #3b6fb0; }\n  .sw-input { background: var(--accent); }\n  .sw-output { background: var(--ok-text); }\n  .tl-chart {\n    position: relative;\n    display: flex; align-items: flex-end; gap: 6px;\n    height: 216px; border-bottom: 1px solid var(--border);\n  }\n  .tl-peak {\n    position: absolute; left: 0; right: 0; height: 0;\n    border-top: 1px dashed var(--accent); pointer-events: none;\n  }\n  .tl-peak-label {\n    position: absolute; left: 0; top: -15px;\n    font-size: 0.7rem; color: var(--accent); white-space: nowrap;\n  }\n  .tl-bar {\n    position: relative; flex: 1; min-width: 0; height: 180px;\n    display: flex; flex-direction: column; justify-content: flex-end;\n    border-radius: 6px 6px 0 0; transition: background 80ms ease;\n  }\n  .tl-bar:hover { background: rgba(0,0,0,0.06); }\n  .tl-bar:hover .tl-seg { opacity: 0.55; }\n  .tl-fill {\n    display: flex; flex-direction: column; justify-content: flex-end;\n    border-radius: 3px 3px 0 0; overflow: hidden;\n  }\n  .tl-tip {\n    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n    margin-bottom: 6px; padding: 5px 9px; border-radius: 6px;\n    background: var(--text); color: #fafafa; font-size: 0.7rem; line-height: 1.35;\n    white-space: nowrap; opacity: 0; pointer-events: none; z-index: 5;\n  }\n  .tl-bar:hover .tl-tip { opacity: 1; }\n  .tl-seg { display: block; width: 100%; }\n  .tl-seg.tl-output { background: var(--ok-text); }\n  .tl-seg.tl-input { background: var(--accent); }\n  .tl-seg.tl-cache-write { background: #3b6fb0; }\n  .tl-seg.tl-cache-read { background: rgba(0,0,0,0.18); }\n  .tl-empty { display: block; width: 100%; height: 3px; background: var(--border); }\n  .tl-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.7rem; color: var(--subtle); }\n\n  .status-pill {\n    display: inline-flex; padding: 2px 9px; border-radius: 999px;\n    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;\n  }\n  .status-pill.running { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }\n\n  @media (max-width: 860px) {\n    .settings-shell { grid-template-columns: 1fr; }\n    .settings-rail { position: static; }\n\n    .rail-nav {\n      flex-direction: row; flex-wrap: nowrap; gap: 6px;\n      overflow-x: auto; padding-bottom: 6px;\n\n      min-width: 0; max-width: 100%;\n      scrollbar-width: thin; -webkit-overflow-scrolling: touch;\n    }\n    .settings-rail { min-width: 0; }\n    .rail-nav[hidden] { display: none; }\n    .rail-link { flex: 0 0 auto; padding: 7px 11px; }\n    .rail-link span { white-space: nowrap; }\n  }\n\n  @media (max-width: 640px) {\n    .config-grid { grid-template-columns: 1fr; }\n    .config-row { grid-template-columns: 1fr; gap: 4px; }\n    .workspace-split { grid-template-columns: 1fr; }\n    .workspace-tree, .workspace-preview { max-height: 260px; }\n    .mcp-preset-grid { grid-template-columns: 1fr; }\n    .mcp-dialog { padding: 18px; }\n  }\n";
 //# sourceMappingURL=client-assets.d.ts.map

package/dist/adapters/web/admin/client-assets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-assets.d.ts","sourceRoot":"","sources":["../../../../src/adapters/web/admin/client-assets.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,QA2sClC,CAAC;AAEJ,eAAO,MAAM,sBAAsB,oDAEhC,CAAC;AAEJ,eAAO,MAAM,eAAe,28tBAohB3B,CAAC"}
+{"version":3,"file":"client-assets.d.ts","sourceRoot":"","sources":["../../../../src/adapters/web/admin/client-assets.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,QAmxClC,CAAC;AAEJ,eAAO,MAAM,sBAAsB,oDAEhC,CAAC;AAEJ,eAAO,MAAM,eAAe,iwvBAoiB3B,CAAC"}

package/dist/adapters/web/admin/client-assets.js

@@ -749,45 +749,112 @@ export const adminViewFunctionsScript = `    let activeConversationKey = default
     });
 
     let skillsCache = [];
+    let skillsPrompt = null;
 
-    function renderSkillsInto(containerId, skills, allowedSource) {
+    function skillGroup(directory) {
+      const slash = directory.lastIndexOf('/');
+      return slash < 0 ? '' : directory.slice(0, slash);
+    }
+
+    function skillCheckbox(s, scope) {
+      if (scope === 'global') return s.globalEnabled ? '[x]' : '[ ]';
+      if (s.conversationRule === '+') return '[+]';
+      if (s.conversationRule === '-') return '[-]';
+      return s.enabled ? '[x]' : '[ ]';
+    }
+
+    function skillSuffix(s, scope) {
+      if (scope === 'global') return s.globalRule === '!' ? 'excluded by pattern' : '';
+      if (s.conversationRule === '+') return 'conversation load';
+      if (s.conversationRule === '-') return 'conversation unload';
+      if (s.conversationRule === '!') return 'excluded by pattern';
+      return s.source === 'global' ? 'inherited global' : '';
+    }
+
+    function nextSkillState(s, scope) {
+      if (scope === 'global') return s.globalEnabled ? 'unload' : 'load';
+      if (s.conversationRule === '+') return 'unload';
+      if (s.conversationRule === '-') return 'inherit';
+      return 'load';
+    }
+
+    function renderSkillsInto(containerId, skills, scope) {
       const container = document.getElementById(containerId);
       if (!container) return;
-      const filtered = allowedSource ? skills.filter((s) => s.source === allowedSource) : skills;
+      const filterEl = document.getElementById(scope === 'global' ? 'global-skills-filter' : 'skills-filter');
+      const query = filterEl ? filterEl.value.trim().toLowerCase() : '';
+      const scoped = scope === 'global' ? skills.filter((s) => s.source === 'global') : skills;
+      const filtered = query
+        ? scoped.filter((s) => (s.name + ' ' + s.directory + ' ' + s.description).toLowerCase().includes(query))
+        : scoped;
+      const summaryEl = document.getElementById(scope === 'global' ? 'global-skills-summary' : 'skills-summary');
+      if (summaryEl) {
+        summaryEl.textContent = scope === 'global'
+          ? 'Enabled globally: ' + scoped.filter((s) => s.globalEnabled).length + ' / ' + scoped.length
+          : skillsPrompt ? 'In prompt: ' + skillsPrompt.listed + ' / ' + skillsPrompt.total + ' skills · ' + skillsPrompt.chars.toLocaleString() + ' chars' : '';
+      }
       if (filtered.length === 0) {
         container.innerHTML = '<div class="empty-state">No skills available</div>';
         return;
       }
+      const groups = new Map();
+      for (const s of filtered) {
+        const key = (s.source === 'conversation' ? 'conversation:' : '') + skillGroup(s.directory);
+        groups.set(key, [...(groups.get(key) || []), s]);
+      }
       container.innerHTML = '<div class="skills-list">' +
-        filtered.map((s) =>
-          '<div class="skill-row">' +
-            '<button class="skill-row-btn" data-skill-source="' + escAttr(s.source) + '" data-skill-directory="' + escAttr(s.directory) + '" data-skill-name="' + escAttr(s.name) + '">' +
-              '<div class="skill-name">' + escHtml(s.name) + '<span class="skill-source skill-source-' + s.source + '">' + s.source + '</span></div>' +
-              (s.description ? '<div class="skill-desc">' + escHtml(s.description) + '</div>' : '') +
-            '</button>' +
-            '<div class="skill-row-actions">' +
-              '<button class="mcp-btn" data-skill-edit-source="' + escAttr(s.source) + '" data-skill-edit-directory="' + escAttr(s.directory) + '">Edit</button>' +
-              '<button class="mcp-btn mcp-btn-danger" data-skill-delete-source="' + escAttr(s.source) + '" data-skill-delete-directory="' + escAttr(s.directory) + '" data-skill-delete-name="' + escAttr(s.name) + '">Delete</button>' +
-            '</div>' +
-          '</div>'
+        [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0])).map(([key, items]) =>
+          '<div class="skill-group">' + escHtml(key.startsWith('conversation:') ? 'This conversation' + (key.length > 13 ? ' · ' + key.slice(13) : '') : key || 'skills/') + '</div>' +
+          items.map((s) => {
+            const suffix = skillSuffix(s, scope);
+            const dimmed = scope === 'conversation' && s.source === 'global' && !s.conversationRule;
+            return '<div class="skill-row' + (dimmed ? ' skill-row-dim' : '') + '">' +
+              '<button class="skill-toggle" title="' + (scope === 'global' ? 'Toggle for every conversation' : 'Cycle inherit / + / -') + '" data-skill-toggle-scope="' + scope + '" data-skill-toggle-source="' + escAttr(s.source) + '" data-skill-toggle-directory="' + escAttr(s.directory) + '" data-skill-toggle-state="' + nextSkillState(s, scope) + '">' + skillCheckbox(s, scope) + '</button>' +
+              '<button class="skill-row-btn" data-skill-source="' + escAttr(s.source) + '" data-skill-directory="' + escAttr(s.directory) + '" data-skill-name="' + escAttr(s.name) + '">' +
+                '<div class="skill-name">' + escHtml(s.name) + '<span class="skill-source skill-source-' + s.source + '">' + s.source + '</span>' + (suffix ? '<span class="skill-state">' + escHtml(suffix) + '</span>' : '') + '</div>' +
+                (s.description ? '<div class="skill-desc">' + escHtml(s.description) + '</div>' : '') +
+              '</button>' +
+              (s.editable ?
+                '<div class="skill-row-actions">' +
+                  '<button class="mcp-btn" data-skill-edit-source="' + escAttr(s.source) + '" data-skill-edit-directory="' + escAttr(s.directory) + '">Edit</button>' +
+                  '<button class="mcp-btn mcp-btn-danger" data-skill-delete-source="' + escAttr(s.source) + '" data-skill-delete-directory="' + escAttr(s.directory) + '" data-skill-delete-name="' + escAttr(s.name) + '">Delete</button>' +
+                '</div>' : '') +
+            '</div>';
+          }).join('')
         ).join('') + '</div>';
     }
 
+    function renderAllSkills() {
+      renderSkillsInto('skills-content', skillsCache, 'conversation');
+      renderSkillsInto('global-skills-content', skillsCache, 'global');
+    }
+
+    function applySkillsData(data) {
+      skillsCache = Array.isArray(data.skills) ? data.skills : [];
+      skillsPrompt = data.prompt || null;
+      renderAllSkills();
+    }
+
     async function loadSkills() {
       const container = document.getElementById('skills-content');
       const previewEl = document.getElementById('skills-preview');
       container.innerHTML = '<div class="loading-msg">Loading…</div>';
       if (previewEl) previewEl.innerHTML = '<div class="placeholder-msg">Click a skill to preview SKILL.md</div>';
       try {
-        const data = await apiGet('/admin/api/skills?' + scopeQuery());
-        skillsCache = Array.isArray(data.skills) ? data.skills : [];
-        renderSkillsInto('skills-content', skillsCache);
-        renderSkillsInto('global-skills-content', skillsCache, 'global');
+        applySkillsData(await apiGet('/admin/api/skills?' + scopeQuery()));
       } catch (err) {
         container.innerHTML = '<div class="err-msg">' + escHtml(err.message) + '</div>';
       }
     }
 
+    async function toggleSkill(scope, source, directory, state) {
+      try {
+        applySkillsData(await apiPost('/admin/api/skills/toggle', { scope: scope, source: source, directory: directory, state: state, ...scopeBody() }));
+      } catch (err) {
+        alert(err.message);
+      }
+    }
+
     const loadGlobalSkills = loadSkills;
 
     async function previewSkillInto(previewId, source, directory, name) {
@@ -820,6 +887,11 @@ export const adminViewFunctionsScript = `    let activeConversationKey = default
       const el = document.getElementById(containerId);
       if (!el) return;
       el.addEventListener('click', (event) => {
+        const toggleBtn = event.target.closest('[data-skill-toggle-scope]');
+        if (toggleBtn) {
+          void toggleSkill(toggleBtn.dataset.skillToggleScope, toggleBtn.dataset.skillToggleSource, toggleBtn.dataset.skillToggleDirectory, toggleBtn.dataset.skillToggleState);
+          return;
+        }
         const previewBtn = event.target.closest('[data-skill-source]');
         if (previewBtn) {
           previewSkillInto(previewId, previewBtn.dataset.skillSource, previewBtn.dataset.skillDirectory, previewBtn.dataset.skillName);
@@ -1422,8 +1494,24 @@ export const adminViewStyles = `
   .skill-row {
     padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
     background: rgba(0,0,0,0.02);
-    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
+    display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
+  }
+  .skill-row-dim { opacity: 0.6; }
+  .skill-toggle {
+    flex-shrink: 0; cursor: pointer; border: none; background: transparent; padding: 0;
+    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85rem; color: var(--text);
+  }
+  .skill-group {
+    margin-top: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 0.75rem; color: var(--subtle);
+  }
+  .skill-state { font-size: 0.72rem; font-weight: 500; color: var(--subtle); }
+  .skills-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+  .skills-filter {
+    flex: 0 1 260px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
+    background: var(--card); font-size: 0.82rem; color: var(--text);
   }
+  .skills-summary { font-size: 0.8rem; color: var(--muted); }
   .skill-row-btn {
     flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer; font-family: inherit;
     background: transparent; border: none; padding: 0;