openclacky 1.5.4 → 1.5.6

data/lib/clacky/web/app.css

@@ -322,6 +322,8 @@ html { font-size: 16px; }
 
 /* ── Reset & Base ────────────────────────────────────────────────────────── */
 * { box-sizing: border-box; margin: 0; padding: 0; }
+select:hover { border-color: var(--color-border-strong); }
+input:focus, select:focus { outline: none; border-color: var(--color-accent-primary); }
 
 /* ── Global Tooltip ──────────────────────────────────────────────────────
    JS-driven: Tooltip.init() in utils.js mounts a single <div id="tooltip">
@@ -378,7 +380,9 @@ html { font-size: 16px; }
   100% { background-position: -200% 0; }
 }
 .skel {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 6px;
   background: linear-gradient(90deg,
     #e8e8e8 25%,
@@ -534,7 +538,7 @@ body {
 }
 .header-logo {
   font-family: "Geist Sans", "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-weight: 750;
+  font-weight: 650;
   font-size: 0.9375rem;
   color: var(--color-text-primary);
   letter-spacing: -0.02em;
@@ -548,7 +552,7 @@ body {
 #header-brand.has-logo .header-logo {
   font-family: "Geist Sans", "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 0.9375rem;
-  font-weight: 750;
+  font-weight: 650;
   color: var(--color-text-primary);
   letter-spacing: -0.02em;
   -webkit-font-smoothing: antialiased;
@@ -563,7 +567,7 @@ body {
 }
 
 .header-logo-img {
-  height: 2rem;
+  height: 2.2rem;
   object-fit: contain;
   display: block;
   flex-shrink: 0;
@@ -987,10 +991,12 @@ body {
    in subtle hue so they don't compete with each other.
    Critical: all colors are neutrals — no hue bleeds onto the brand accent. */
 .session-badge {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-family: var(--font-mono);
   font-size: 0.5625rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1;
   padding: 2px 0.3125rem;
   border-radius: var(--radius-xs);
@@ -1309,7 +1315,7 @@ body {
   margin-bottom: 0.5rem;
 }
 .dp-title {
-  font-weight: 600;
+  font-weight: 500;
   font-size: 0.8125rem;
 }
 .dp-nav {
@@ -1354,7 +1360,7 @@ body {
 .dp-day--selected {
   background: var(--color-accent-primary);
   color: var(--color-text-inverse) !important;
-  font-weight: 600;
+  font-weight: 500;
 }
 .dp-day--selected:hover { background: var(--color-accent-primary); opacity: 0.88; }
 .dp-footer {
@@ -1404,17 +1410,19 @@ body {
   display: block;
   width: 100%;
   margin: 0.375rem 0 0.25rem;
-  padding: 0.1875rem 0;
+  padding: 0.375rem 0.625rem;
   background: transparent;
   border: none;
+  border-radius: var(--radius-sm);
   color: var(--color-text-muted);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   cursor: pointer;
-  text-align: center;
-  transition: color 0.15s;
+  text-align: left;
+  transition: background var(--transition-fast), color var(--transition-fast);
 }
 .btn-load-more-sessions:hover {
-  color: var(--color-accent-primary);
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
 }
 .btn-load-more-sessions:disabled {
   cursor: default;
@@ -1424,7 +1432,7 @@ body {
 .session-search-group {
   padding: 0.5rem 0.75rem 0.25rem;
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-muted);
   text-transform: none;
   letter-spacing: 0.02em;
@@ -1448,7 +1456,7 @@ body {
   color: var(--color-text-primary);
   padding: 0 2px;
   border-radius: 2px;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .session-name__text mark {
@@ -1722,7 +1730,9 @@ body {
   margin-top: 2px;
 }
 .session-meta-sep {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 0.125rem;
   height: 0.125rem;
   border-radius: 50%;
@@ -1736,7 +1746,9 @@ body {
 
 .session-dot {
   flex-shrink: 0;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 50%;
@@ -1891,7 +1903,7 @@ body {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  padding: 2rem 2rem 1.5rem;
+  padding: 1.75rem 2.25rem;
   gap: 1.25rem;
 }
 
@@ -1923,7 +1935,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.5rem 1rem;
+  padding: 0.375rem 0.75rem;
   background: var(--color-button-primary);
   color: #fff;
   border: none;
@@ -2024,7 +2036,7 @@ body {
 }
 .task-card-name {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .task-card-cron {
@@ -2039,7 +2051,7 @@ body {
 }
 .task-card-badge {
   font-size: 0.625rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 2px 0.4375rem;
   border-radius: 10px;
   letter-spacing: 0.3px;
@@ -2180,7 +2192,7 @@ body {
   flex-direction: column;
   gap: 1.25rem;
   width: 100%;
-  padding: 6rem max(1.5rem, calc(50% - 30rem)) 1rem;
+  padding: 5.5rem max(1.5rem, calc(50% - 30rem)) 1rem;
 }
 .new-session-composer {
   position: relative;
@@ -2207,14 +2219,6 @@ body {
   grid-auto-rows: 1fr;
   gap: 0.75rem;
 }
-.new-session-agent-panels {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.375rem;
-  margin-top: -0.625rem;
-  padding-left: 0.125rem;
-}
 
 /* ── Starter Prompts ── */
 .ns-starter-label {
@@ -2246,30 +2250,6 @@ body {
   background: var(--color-bg-hover);
   color: var(--color-text-primary);
 }
-.ns-panels-label {
-  width: 100%;
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-  margin-bottom: 0.0625rem;
-}
-.ns-panel-chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.1875rem 0.5rem;
-  border-radius: 0.375rem;
-  font-size: 0.78125rem;
-  font-weight: 500;
-  line-height: 1.3;
-}
-.ns-panel-chip--panel {
-  background: var(--color-accent-soft);
-  color: var(--color-accent-primary);
-}
-.ns-panel-chip--skill {
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border-primary);
-}
 .agent-card {
   position: relative;
   padding: 0.9375rem 1rem;
@@ -2353,13 +2333,12 @@ body {
   top: 0.5rem;
   right: 0.5rem;
   font-size: 0.65rem;
-  font-weight: 600;
-  padding: 1px 5px;
+  font-weight: 500;
+  padding: 2px 6px;
   border-radius: 4px;
   background: var(--color-bg-hover);
   color: var(--color-text-secondary);
   letter-spacing: 0.02em;
-  text-transform: uppercase;
 }
 .agent-card-badge--custom {
   background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
@@ -2374,17 +2353,10 @@ body {
 .new-session-input-bar {
   margin: 0;
   padding: 10px 12px;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 13px;
-  background: var(--color-bg-primary);
+  background: transparent;
   display: flex;
   align-items: center;
   gap: 8px;
-  box-shadow: var(--shadow-card);
-  transition: border-color .14s;
-}
-.new-session-input-bar:focus-within {
-  border-color: color-mix(in srgb, var(--color-accent-primary) 50%, var(--color-border-primary));
 }
 .new-session-composer-btn {
   flex: none;
@@ -2486,6 +2458,140 @@ body {
   background: color-mix(in srgb, var(--color-accent-primary) 85%, #fff);
 }
 
+
+/* ── Composer frame: two stacked cards, offset like Codex ───────────────── */
+.ns-composer-frame {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+/* Context bar card — narrower on both sides, no gap below */
+/* ── New Session: context bar (chips above composer input) ─────────────── */
+.ns-context-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-self: flex-start;
+  width: calc(100% - 2rem);
+  gap: 0.25rem;
+  padding: 0.3rem 0.75rem;
+  margin: 0 1rem;
+  border: none;
+  border-radius: 10px 10px 0 0;
+  background: var(--color-bg-primary);
+  box-shadow: var(--shadow-card);
+}
+.ns-context-bar:empty {
+  display: none;
+}
+
+/* Input bar card — full width, slightly brighter background */
+.ns-input-bar-card {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 13px;
+  background: var(--color-bg-secondary);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  transition: border-color .14s;
+}
+.ns-input-bar-card:focus-within {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 50%, var(--color-border-primary));
+}
+.ns-ctx-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  padding: 0.1875rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+  white-space: nowrap;
+  max-width: 16rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ns-ctx-chip:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.ns-ctx-chip--muted {
+  color: var(--color-text-tertiary);
+  opacity: 0.8;
+}
+.ns-ctx-chip--active,
+.ns-ctx-chip--active:hover {
+  color: var(--color-accent-primary) !important;
+  background: var(--color-accent-soft) !important;
+}
+.ns-ctx-chip-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+.ns-ctx-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Context bar popover */
+.ns-ctx-popover {
+  z-index: 9999;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-popover, 0 4px 16px rgba(0,0,0,.12));
+  padding: 0.25rem;
+  min-width: 11rem;
+  max-width: 22rem;
+  max-height: 18rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.ns-ctx-popover-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.375rem 0.625rem;
+  border: none;
+  border-radius: 0.3125rem;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ns-ctx-popover-item:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.ns-ctx-popover-item.active {
+  color: var(--color-accent-primary);
+  font-weight: 500;
+}
+.ns-ctx-popover-empty {
+  padding: 0.5rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-tertiary);
+}
+
+/* Dir popover layout */
+
 .new-session-advanced {
   display: flex;
   flex-direction: column;
@@ -2667,7 +2773,7 @@ body {
   border-bottom: 2px solid transparent;
 }
 .aside-tab:hover { color: var(--color-text-secondary); }
-.aside-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-primary); font-weight: 600; }
+.aside-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-primary); font-weight: 500; }
 .aside-tab-badge {
   font-size: 10px;
   min-width: 16px;
@@ -2712,6 +2818,8 @@ body {
 .session-composer {
   flex-shrink: 0;
   display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
   padding-inline: 24px;
 }
 .session-composer > * {
@@ -2799,6 +2907,116 @@ body {
   gap: 0.75rem;
 }
 
+/* ── Chat navigator (right-edge minimap) ───────────────────────────────────
+   Absolutely positioned inside #chat-main, vertically synced to #messages
+   via JS (ResizeObserver). Bars are evenly distributed; the active one
+   (matching current scroll position) is highlighted. Hover opens a popup
+   listing every message preview; click scrolls to that message. */
+.chat-navigator {
+  position: absolute;
+  right: 0;
+  width: 1.5rem;
+  z-index: 10;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+}
+.chat-nav-track {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.625rem 0.375rem;
+  pointer-events: none;
+  overflow: hidden;
+}
+.chat-nav-bar {
+  height: 0.1875rem;
+  flex-shrink: 0;
+  border-radius: 0.125rem;
+  background: var(--color-border-secondary);
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 0.45;
+  transition: opacity 0.15s ease, background 0.15s ease, transform 0.12s ease;
+}
+.chat-nav-bar:hover {
+  opacity: 0.85;
+  background: var(--color-text-muted);
+  transform: scaleX(1.6);
+}
+.chat-nav-bar.hovered {
+  opacity: 0.85;
+  background: var(--color-text-muted);
+  transform: scaleX(1.6);
+}
+.chat-nav-bar.active {
+  opacity: 1;
+  background: var(--color-accent-primary);
+}
+
+/* ── Hover popup ─────────────────────────────────────────────────────────── */
+.chat-nav-popup {
+  position: absolute;
+  right: 100%;
+  top: 0;
+  width: 17rem;
+  max-width: 60vw;
+  max-height: 100%;
+  margin-right: 0.25rem;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+}
+.chat-nav-popup-header {
+  flex-shrink: 0;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.chat-nav-popup-list {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+}
+.chat-nav-popup-item {
+  padding: 0.4375rem 0.625rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.chat-nav-popup-item:hover,
+.chat-nav-popup-item.highlighted {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.chat-nav-popup-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
 /* Empty-state hint: shown inside #messages when a session has no messages yet.
    Designed to be quiet and low-contrast so it guides without distracting. */
 .chat-empty-hint {
@@ -2861,7 +3079,7 @@ body {
   padding: 0.625rem 1.25rem;
   border-radius: 24px;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   z-index: 100;
   box-shadow: var(--shadow-md);
@@ -3134,7 +3352,7 @@ body {
 .msg-assistant h1, .msg-assistant h2, .msg-assistant h3,
 .msg-assistant h4, .msg-assistant h5, .msg-assistant h6 {
   margin: 0.8em 0 0.4em;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.3;
   color: var(--color-text-primary);
 }
@@ -3249,7 +3467,7 @@ body {
 }
 .msg-assistant th {
   background: var(--color-bg-tertiary);
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .msg-assistant tr:nth-child(even) { background: var(--color-bg-tertiary); }
@@ -3264,7 +3482,7 @@ body {
   margin: 0.8em 0;
 }
 .msg-assistant img { max-width: 100%; height: auto; border-radius: 0.25rem; }
-.msg-assistant strong { font-weight: 600; color: var(--color-text-primary); }
+.msg-assistant strong { font-weight: 500; color: var(--color-text-primary); }
 .msg-assistant em { font-style: italic; color: var(--color-text-secondary); }
 .msg-tool      { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); font-family: monospace; font-size: 0.75rem; color: var(--color-text-secondary); align-self: flex-start; }
 .msg-info      { color: var(--color-text-secondary); font-size: 0.75rem; align-self: center; font-style: italic; }
@@ -3388,7 +3606,7 @@ body {
 }
 .msg-error a {
   color: var(--color-error);
-  font-weight: 600;
+  font-weight: 500;
   text-decoration: underline;
 }
 .msg-error a:hover {
@@ -3416,7 +3634,9 @@ body {
 .error-raw-detail summary::-webkit-details-marker { display: none; }
 .error-raw-detail summary::before {
   content: "";
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 0;
   height: 0;
   border-top: 4px solid transparent;
@@ -3471,9 +3691,69 @@ body {
 .btn-ext-refresh:disabled {
   cursor: default;
 }
-.tool-name     { color: var(--color-warning); font-weight: 600; }
+.tool-name     { color: var(--color-warning); font-weight: 500; }
 .progress-msg  { color: var(--color-accent-primary); font-size: 0.75rem; align-self: center; }
 
+/* ── Todo / task list panel ────────────────────────────────────────────────
+   Fixed panel above the composer, driven by `todo_update` WS events.
+   Mirrors the CLI TodoArea: shows progress count + each task with a
+   done/pending marker. Hidden automatically when no todos are active. */
+.todo-panel {
+  max-height: 12rem;
+  overflow-y: auto;
+  padding: 0.625rem 24px 0.625rem;
+  background: transparent;
+  font-size: 0.8125rem;
+}
+.todo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--color-text-tertiary);
+  font-weight: 500;
+  font-size: 0.75rem;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+.todo-header:hover { color: var(--color-text-secondary); }
+.todo-toggle {
+  width: 0.7rem;
+  height: 0.7rem;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+.todo-panel.collapsed .todo-list { display: none; }
+.todo-panel.collapsed .todo-toggle { transform: rotate(-90deg); }
+.todo-panel.collapsed .todo-header { margin-bottom: 0; }
+.todo-count {
+  font-weight: 500;
+  color: var(--color-text-muted, var(--color-text-tertiary));
+}
+.todo-list { display: flex; flex-direction: column; gap: 1px; }
+.todo-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: var(--radius-sm, 6px);
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+  transition: background 0.12s ease;
+}
+.todo-item:hover { background: var(--color-bg-hover, rgba(128,128,128,0.04)); }
+/* Completed state: dim text color only — no strikethrough, no global opacity (Things3/Linear style) */
+.todo-item.done { color: var(--color-text-muted, var(--color-text-tertiary)); }
+.todo-icon {
+  width: 1em; height: 1em;
+  flex-shrink: 0;
+  color: var(--color-accent-primary);
+}
+.todo-item:not(.done) .todo-icon {
+  color: var(--color-border-strong, #d4d4ce);
+}
+.todo-text { flex: 1; word-break: break-word; }
+
 /* ── Token usage line ────────────────────────────────────────────────────── */
 .token-usage-line {
   align-self: flex-start;
@@ -3491,10 +3771,10 @@ body {
   transition: opacity 0.15s ease;
 }
 .token-usage-line:hover { opacity: 1; }
-.token-usage-line b { font-weight: 600; color: var(--color-text-secondary); }
-.tu-label { color: var(--color-text-tertiary); font-weight: 600; }
+.token-usage-line b { font-weight: 500; color: var(--color-text-secondary); }
+.tu-label { color: var(--color-text-tertiary); font-weight: 500; }
 .tu-sep   { color: var(--color-text-muted); opacity: 0.45; padding: 0 1px; }
-.tu-cache { color: var(--color-text-tertiary); font-weight: 600; }   /* [*] cache hit — neutral, not brand */
+.tu-cache { color: var(--color-text-tertiary); font-weight: 500; }   /* [*] cache hit — neutral, not brand */
 .tu-field { color: var(--color-text-muted); }
 .tu-cost  { color: var(--color-text-tertiary); }
 .tu-delta       { font-weight: 700; }
@@ -3545,7 +3825,9 @@ body {
 .tool-group-arrow {
   font-size: 0.625rem;
   transition: transform 0.2s;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   color: var(--color-text-tertiary);
 }
 .tool-group.expanded .tool-group-arrow { transform: rotate(90deg); }
@@ -3572,7 +3854,7 @@ body {
   align-items: baseline;
   gap: 0.375rem;
 }
-.tool-item-name { color: var(--color-text-primary); font-weight: 600; }
+.tool-item-name { color: var(--color-text-primary); font-weight: 500; }
 .tool-item-arg  { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
 .tool-item-header.tool-item-expandable { cursor: pointer; user-select: none; }
 .tool-item-header.tool-item-expandable:hover .tool-item-name,
@@ -3691,7 +3973,9 @@ body {
   color: inherit;
   transition: transform 0.2s;
   line-height: 1;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .thinking-block[open] .thinking-chevron { transform: rotate(90deg); }
 
@@ -4015,7 +4299,9 @@ body {
   height: 0.6875rem;
 }
 .sib-signal-clickable .sig-bars i {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 2px;
   background: var(--color-text-secondary);
   opacity: 0.25;                           /* dim "off" bar */
@@ -4093,7 +4379,7 @@ body {
 }
 .sib-reasoning-heading {
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .sib-reasoning-hint {
@@ -4116,7 +4402,7 @@ body {
 }
 .sib-reasoning-option.current {
   background: var(--color-bg-hover);
-  font-weight: 600;
+  font-weight: 500;
 }
 .sib-model-dropdown {
   position: fixed;
@@ -4151,7 +4437,7 @@ body {
 }
 .sib-model-option.current {
   background: var(--color-bg-hover);
-  font-weight: 600;
+  font-weight: 500;
 }
 .sib-model-option .model-badge {
   font-size: 0.5625rem;
@@ -4253,7 +4539,7 @@ body {
 }
 .sib-submodel-row.current {
   background: var(--color-bg-hover);
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-accent-primary);
 }
 .sib-submodel-row-name {
@@ -4441,7 +4727,7 @@ body {
 .sib-model-option .sib-model-name-override {
   font-size: 0.6875rem;
   color: var(--color-accent-primary);
-  font-weight: 600;
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4688,7 +4974,7 @@ body {
 .skill-ac-name {
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-accent-primary);
   white-space: nowrap;
   flex-shrink: 0;
@@ -4700,7 +4986,7 @@ body {
 .skill-ac-name-zh {
   font-family: inherit;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-accent-primary);
 }
 
@@ -4733,7 +5019,7 @@ body {
   color: var(--color-text-tertiary);
   text-transform: uppercase;
   letter-spacing: .06em;
-  font-weight: 600;
+  font-weight: 500;
   border-bottom: 1px solid var(--color-border-secondary);
   margin-bottom: 2px;
 }
@@ -4757,7 +5043,7 @@ body {
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: .06em;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1rem;
 }
 
@@ -4779,7 +5065,9 @@ body {
 
 .skill-ac-toggle-track {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 1.75rem;
   height: 1rem;
   background: var(--color-border-primary);
@@ -5029,7 +5317,7 @@ body {
   padding: 1rem 1.25rem;
   border-bottom: 1px solid var(--color-border-primary);
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   flex-shrink: 0;
 }
@@ -5284,7 +5572,9 @@ body {
 }
 .toggle-switch {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 2.25rem;
   height: 1.25rem;
   cursor: pointer;
@@ -5339,7 +5629,7 @@ body {
 .model-card-badges { display: flex; gap: 0.375rem; }
 .badge {
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 2px 0.5rem;
   border-radius: 20px;
   letter-spacing: 0.3px;
@@ -5552,9 +5842,11 @@ body {
 
 /* Provider recommended badge (inside dropdown option) */
 .provider-badge-recommended {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.625rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 1px 0.375rem;
   margin-left: 0.375rem;
   border-radius: 4px;
@@ -5581,7 +5873,7 @@ body {
 }
 .provider-promo-hint .promo-title {
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-secondary);
   margin-bottom: 0.1875rem;
 }
@@ -5646,7 +5938,7 @@ body {
 }
 .model-card-grid-name {
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   line-height: 1.4;
   word-break: break-word;
@@ -5661,7 +5953,7 @@ body {
   font-family: var(--font-mono, monospace);
   background: var(--color-bg-tertiary);
   border-radius: 4px;
-  display: inline-block;
+  display: inline-flex;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5874,7 +6166,7 @@ body {
 .modal-content .modal-header h3 {
   margin: 0;
   font-size: 1.0625rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .modal-close {
@@ -5939,7 +6231,7 @@ body {
   padding: 1rem 1.25rem;
   border-bottom: 1px solid var(--color-border-primary);
   font-size: 1.0625rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .modal-buttons {
@@ -6062,7 +6354,7 @@ body {
 .dp-col-name {
   flex: 1;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -6401,7 +6693,7 @@ body {
 }
 .modal-box.sm { max-width: 30rem; }
 .modal-box.lg { max-width: 42.5rem; }
-.modal-box .modal-title { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); }
+.modal-box .modal-title { font-size: 1rem; font-weight: 500; color: var(--color-text-primary); }
 .modal-confirm-message {
   font-size: 0.9375rem;
   line-height: 1.6;
@@ -6415,7 +6707,7 @@ body {
   justify-content: flex-end;
   margin-top: 1rem;
 }
-.btn-primary            { background: var(--color-button-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.5rem 1.25rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-xs); transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
+.btn-primary            { background: var(--color-button-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.5rem 1.25rem; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-xs); transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
 .btn-primary:hover      { background: var(--color-button-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
 .btn-primary:active     { transform: translateY(0); box-shadow: var(--shadow-xs); }
 .btn-secondary          { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 0.5rem 1.25rem; font-weight: 500; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
@@ -6473,7 +6765,9 @@ body {
 .toast-body { flex: 1; min-width: 0; }
 .toast-message { white-space: pre-wrap; word-break: break-word; }
 .toast-action {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin-top: 0.25rem;
   padding: 0;
   background: none;
@@ -6698,7 +6992,7 @@ body {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  padding: 2rem 2rem 1.5rem;
+  padding: 1.75rem 2.25rem;
   gap: 1.25rem;
 }
 
@@ -6919,10 +7213,6 @@ body {
   width: 12rem;
 }
 .skills-search::placeholder { color: var(--color-text-tertiary); }
-.skills-search:focus {
-  outline: none;
-  border-color: var(--color-accent, #6366f1);
-}
 .skills-search-empty {
   padding: 2rem 1rem;
   text-align: center;
@@ -7111,7 +7401,7 @@ body {
 }
 .skill-name {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .skill-card-desc {
@@ -7126,7 +7416,7 @@ body {
 /* ── Skill Badges ────────────────────────────────────────────────────────── */
 .skill-badge {
   font-size: 0.625rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 2px 0.4375rem;
   border-radius: 10px;
   letter-spacing: 0.3px;
@@ -7202,7 +7492,9 @@ body {
   position: absolute;
 }
 .skill-toggle-track {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 2.25rem;
   height: 1.25rem;
   background: var(--color-border-primary);
@@ -7385,7 +7677,7 @@ body {
 .store-card-body { flex: 1; min-width: 0; }
 .store-card-title {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin-bottom: 0.25rem;
 }
@@ -7402,7 +7694,7 @@ body {
   color: var(--color-accent-primary);
   padding: 0.375rem 0.875rem;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: background .15s, border-color .15s;
 }
@@ -7413,7 +7705,7 @@ body {
 .store-badge-installed {
   font-size: 0.75rem;
   color: var(--color-success);
-  font-weight: 600;
+  font-weight: 500;
 }
 
 /* ── Brand Skills tab ────────────────────────────────────────────────────── */
@@ -7579,10 +7871,6 @@ body {
   background: var(--color-bg-secondary);
   color: var(--color-text-primary);
 }
-.extensions-search:focus {
-  outline: none;
-  border-color: var(--color-accent, #6366f1);
-}
 .extensions-sort {
   flex-shrink: 0;
   font-size: 0.8125rem;
@@ -7653,7 +7941,7 @@ body {
 }
 .extension-name {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .extension-version {
@@ -7717,7 +8005,7 @@ body {
 }
 .extension-homepage {
   font-size: 0.6875rem;
-  color: var(--color-accent, #6366f1);
+  color: var(--color-accent-primary);
   text-decoration: none;
 }
 .extension-homepage:hover { text-decoration: underline; }
@@ -7725,6 +8013,35 @@ body {
 /* Clickable catalog card + detail view */
 .extension-card-clickable { cursor: pointer; }
 
+/* System extension card toggle switch */
+.ext-card-toggle {
+  flex-shrink: 0;
+  position: relative;
+  width: 2.25rem;
+  height: 1.25rem;
+  border-radius: 999px;
+  border: none;
+  background: var(--color-border-primary);
+  cursor: pointer;
+  transition: background 0.2s;
+  padding: 0;
+  margin-left: auto;
+  align-self: center;
+}
+.ext-card-toggle-on { background: var(--color-accent-primary); }
+.ext-card-toggle-thumb {
+  position: absolute;
+  top: 0.125rem;
+  left: 0.125rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.2s;
+  display: block;
+}
+.ext-card-toggle-on .ext-card-toggle-thumb { transform: translateX(1rem); }
+
 .extension-detail {
   flex: 1;
   overflow-y: auto;
@@ -7767,7 +8084,7 @@ body {
 .extension-detail-block { margin-top: 1.5rem; }
 .extension-detail-block-title {
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin: 0 0 0.75rem;
@@ -7781,7 +8098,7 @@ body {
 }
 .extension-readme-body h1,
 .extension-readme-body h2,
-.extension-readme-body h3 { margin: 1em 0 0.4em; font-weight: 600; }
+.extension-readme-body h3 { margin: 1em 0 0.4em; font-weight: 500; }
 .extension-readme-body h1 { font-size: 1.2em; }
 .extension-readme-body h2 { font-size: 1.05em; }
 .extension-readme-body h3 { font-size: 0.95em; }
@@ -7807,7 +8124,7 @@ body {
 .extension-detail-section { margin-bottom: 0.875rem; }
 .extension-detail-section-title {
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--color-text-muted);
@@ -7888,7 +8205,7 @@ body {
 .extension-version-notes h2,
 .extension-version-notes h3 {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0.75rem 0 0.25rem;
 }
@@ -7978,6 +8295,11 @@ body {
   background: var(--color-error-bg);
   border-color: var(--color-error);
 }
+.extension-install-error {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--color-error);
+}
 
 /* Brand Skill card */
 .brand-skill-card {
@@ -8002,7 +8324,7 @@ body {
 }
 .brand-skill-name {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .brand-skill-desc {
@@ -8030,7 +8352,7 @@ body {
 /* Version chips */
 .brand-skill-version {
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 2px 0.5rem;
   border-radius: 10px;
   white-space: nowrap;
@@ -8109,7 +8431,7 @@ body {
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.3125rem 0.75rem;
   transition: background .15s;
 }
@@ -8141,7 +8463,7 @@ body {
   color: var(--color-success);
   cursor: pointer;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.3125rem 0.75rem;
   transition: background .15s;
   white-space: nowrap;
@@ -8210,7 +8532,7 @@ body {
 .code-editor-header h3 {
   margin: 0;
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
   color: var(--color-text-primary);
 }
@@ -8353,7 +8675,7 @@ body {
 .code-editor-markdown-preview h4 {
   margin-top: 1.25em;
   margin-bottom: 0.5em;
-  font-weight: 600;
+  font-weight: 500;
 }
 .code-editor-markdown-preview h1:first-child,
 .code-editor-markdown-preview h2:first-child,
@@ -8420,7 +8742,7 @@ body {
 }
 .code-editor-markdown-preview th {
   background: rgba(128, 128, 128, 0.15);
-  font-weight: 600;
+  font-weight: 500;
 }
 
 /* ── Skills sidebar section ──────────────────────────────────────────────── */
@@ -8571,7 +8893,7 @@ body.setup-mode[data-theme="dark"] {
 /* Phase label */
 .setup-phase-label {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-secondary);
   text-align: center;
   margin: 0;
@@ -8598,7 +8920,7 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 8px;
   color: var(--color-text-primary);
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.5rem 0;
   cursor: pointer;
   transition: border-color .15s, background .15s, color .15s;
@@ -8620,7 +8942,7 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 8px;
   padding: 0.5625rem 0;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: background .15s, opacity .15s;
 }
@@ -8640,7 +8962,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .setup-label {
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-tertiary);
   text-transform: uppercase;
   letter-spacing: .06em;
@@ -8699,7 +9021,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .setup-device-card-badge {
   font-size: 0.625rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 1px 0.375rem;
   border-radius: 4px;
   background: var(--color-accent-primary);
@@ -8709,7 +9031,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .setup-device-card-lead {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0 0 0.625rem;
   line-height: 1.5;
@@ -8765,7 +9087,9 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-text-primary);
 }
 .setup-device-reopen {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.75rem;
   color: var(--color-accent, var(--accent, #6366f1));
   text-decoration: none;
@@ -8820,7 +9144,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .setup-device-success-points li strong {
   color: var(--color-text-primary);
-  font-weight: 600;
+  font-weight: 500;
   margin-right: 0.25rem;
 }
 .setup-device-success-points li.setup-device-success-note {
@@ -8901,7 +9225,7 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 8px;
   padding: 0.5625rem 0.875rem;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   white-space: nowrap;
   transition: border-color .15s, color .15s;
@@ -8920,7 +9244,7 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 8px;
   padding: 0.625rem 0;
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: background .15s, opacity .15s;
 }
@@ -9033,7 +9357,7 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 8px;
   color: var(--color-text-primary);
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.75rem 2rem;
   cursor: pointer;
   transition: border-color .15s, background .15s, color .15s;
@@ -9061,7 +9385,7 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 6px;
   color: var(--color-text-primary);
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.375rem 1.125rem;
   cursor: pointer;
   transition: border-color .15s, background .15s, color .15s;
@@ -9088,7 +9412,7 @@ body.setup-mode[data-theme="dark"] {
 
 .onboard-phase-title {
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   text-align: center;
 }
@@ -9109,7 +9433,7 @@ body.setup-mode[data-theme="dark"] {
 
 .onboard-label {
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: .04em;
@@ -9172,7 +9496,7 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 6px;
   padding: 0.625rem 1.75rem;
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: background .15s;
 }
@@ -9445,7 +9769,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .qr-lightbox-label {
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0;
   text-align: center;
@@ -9563,7 +9887,7 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-warning);
   cursor: pointer;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.2rem 0.6rem;
   opacity: 0.9;
   flex-shrink: 0;
@@ -9598,7 +9922,7 @@ body.setup-mode[data-theme="dark"] {
   color: #fff;
   cursor: pointer;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.25rem 0.75rem;
   white-space: nowrap;
   transition: opacity 0.15s;
@@ -9661,7 +9985,7 @@ body.setup-mode[data-theme="dark"] {
 
 .settings-theme-label {
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   transition: color 0.3s ease;
 }
@@ -9729,11 +10053,18 @@ body.setup-mode[data-theme="dark"] {
 }
 
 .channels-page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
   margin-bottom: 0.25rem;
 }
+.channels-page-header-main {
+  min-width: 0;
+}
 
 .channels-page-title {
-  font-size: 1.375rem;
+  font-size: 1.5rem;
   font-weight: 700;
   color: var(--color-text-primary);
   margin: 0 0 0.375rem;
@@ -9853,7 +10184,7 @@ body.setup-mode[data-theme="dark"] {
 
 .channel-card-name {
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin-bottom: 2px;
 }
@@ -9979,7 +10310,7 @@ body.setup-mode[data-theme="dark"] {
 
 .channel-section-header {
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-text-tertiary);
@@ -10173,7 +10504,7 @@ body.setup-mode[data-theme="dark"] {
   font-family: monospace;
   color: var(--color-text-primary);
   margin: 0 0 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
 }
 .vup-arrow {
   color: var(--color-accent-primary);
@@ -10191,7 +10522,7 @@ body.setup-mode[data-theme="dark"] {
   border: none;
   border-radius: 6px;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: background .15s, transform .1s;
 }
@@ -10229,7 +10560,9 @@ body.setup-mode[data-theme="dark"] {
 .vup-installing-dot::after,
 .vup-installing-dot b {
   content: "";
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 0.3125rem;
   height: 0.3125rem;
   border-radius: 50%;
@@ -10309,7 +10642,7 @@ body.setup-mode[data-theme="dark"] {
   border: none;
   border-radius: 6px;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: background .15s, transform .1s;
   letter-spacing: .02em;
@@ -10351,7 +10684,7 @@ body.setup-mode[data-theme="dark"] {
 .vup-restart-failed-title {
   margin: 0 0 0.375rem;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-error, #ef4444);
 }
 .vup-restart-failed-desc {
@@ -10458,7 +10791,7 @@ body.setup-mode[data-theme="dark"] {
 
 .profile-section-title {
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0;
 }
@@ -10587,7 +10920,7 @@ body.setup-mode[data-theme="dark"] {
 .profile-markdown h2,
 .profile-markdown h3 {
   margin: 0.875rem 0 0.5rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 
@@ -10617,7 +10950,7 @@ body.setup-mode[data-theme="dark"] {
   font-size: 0.75rem;
 }
 
-.profile-markdown strong { font-weight: 600; }
+.profile-markdown strong { font-weight: 500; }
 .profile-markdown em     { font-style: italic; }
 
 /* ── Memories list (cards) ───────────────────────────────────────────── */
@@ -10676,7 +11009,7 @@ body.setup-mode[data-theme="dark"] {
 
 .memory-card-title {
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin-bottom: 0.1875rem;
   overflow: hidden;
@@ -10771,7 +11104,7 @@ body.setup-mode[data-theme="dark"] {
 .memory-card-body h2,
 .memory-card-body h3 {
   margin: 0.625rem 0 0.375rem;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .memory-card-body p  { margin: 0.375rem 0; }
@@ -10866,7 +11199,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .trash-session-card-name {
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -11092,9 +11425,8 @@ body.setup-mode[data-theme="dark"] {
   min-width: 0;
 }
 .trash-card-title {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -11102,7 +11434,6 @@ body.setup-mode[data-theme="dark"] {
   margin-bottom: 0.25rem;
 }
 .trash-card-path {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   font-size: 0.6875rem;
   color: var(--color-text-muted);
   white-space: nowrap;
@@ -11270,7 +11601,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-title-row h2 {
   font-size: 1.5rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0;
 }
@@ -11344,9 +11675,6 @@ body.setup-mode[data-theme="dark"] {
   background-position: right 0.625rem center;
   transition: border-color 0.15s ease;
 }
-.billing-model-filter:hover {
-  border-color: var(--color-border-strong);
-}
 .billing-model-filter:focus {
   outline: none;
   border-color: var(--color-accent-primary);
@@ -11568,7 +11896,7 @@ body.setup-mode[data-theme="dark"] {
 /* ── Cost Trend Line Chart ───────────────────────────────────────────── */
 .billing-trend-total {
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-accent-primary);
 }
 .billing-trend-chart {
@@ -11637,7 +11965,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-chart-header h4 {
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0;
 }
@@ -11762,14 +12090,14 @@ body.setup-mode[data-theme="dark"] {
   border-bottom: 1px solid var(--color-border-primary);
 }
 .tooltip-date {
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   white-space: nowrap;
 }
 .tooltip-total-value {
   font-size: 0.875rem;
   color: var(--color-accent);
-  font-weight: 600;
+  font-weight: 500;
   white-space: nowrap;
   margin-left: 0.75rem;
 }
@@ -11814,7 +12142,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-section h3 {
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0 0 1rem 0;
 }
@@ -11841,7 +12169,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-token-bar-value {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
 }
 .billing-token-bar-track {
@@ -11916,7 +12244,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-model-cost {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   font-family: var(--font-mono);
   color: var(--color-text-primary);
   text-align: right;
@@ -12043,7 +12371,9 @@ body.setup-mode[data-theme="dark"] {
   cursor: not-allowed;
 }
 .mcp-chip {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.6875rem;
   font-weight: 500;
   padding: 0.25rem 0.5rem;
@@ -12061,7 +12391,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .mcp-cmd-label {
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -12114,7 +12444,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .mcp-tools-header {
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-secondary);
   margin-bottom: 0.5rem;
   letter-spacing: 0.01em;
@@ -12140,7 +12470,7 @@ body.setup-mode[data-theme="dark"] {
 .mcp-tool-name {
   font-family: var(--font-mono);
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary, var(--color-text));
 }
 .mcp-tool-desc {
@@ -12165,7 +12495,7 @@ body.setup-mode[data-theme="dark"] {
 .mcp-cta-text h3 {
   margin: 0 0 0.25rem;
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary, var(--color-text));
   letter-spacing: -0.2px;
 }
@@ -12268,7 +12598,7 @@ body.setup-mode[data-theme="dark"] {
   background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-secondary));
   color: var(--color-accent-primary);
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
@@ -12451,7 +12781,7 @@ body.setup-mode[data-theme="dark"] {
 
 .settings-bg-theme-card.active .bg-card-label {
   color: var(--color-accent-primary);
-  font-weight: 600;
+  font-weight: 500;
 }
 
 /* ── Sessions List ───────────────────────────────────────────────────── */
@@ -12468,7 +12798,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-sessions-section h3 {
   font-size: 0.9375rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   margin: 0 0 1rem 0;
 }
@@ -12486,7 +12816,7 @@ body.setup-mode[data-theme="dark"] {
   background: var(--color-bg-tertiary);
   border-radius: 8px;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -12567,9 +12897,12 @@ body.setup-mode[data-theme="dark"] {
 .billing-cell-miss {
   color: #f59e0b;
 }
+.billing-cell-output {
+  color: #34d399;
+}
 .billing-cell-cost {
   font-family: var(--font-mono);
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   text-align: right;
 }
@@ -12609,7 +12942,7 @@ body.setup-mode[data-theme="dark"] {
 }
 .media-row-title {
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   min-width: 3rem;
 }
@@ -12980,7 +13313,7 @@ body.setup-mode[data-theme="dark"] {
 
 .share-row-label {
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--color-text-muted);
@@ -13055,7 +13388,7 @@ body.setup-mode[data-theme="dark"] {
   background: transparent;
   color: var(--color-text-secondary);
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: background .12s ease, color .12s ease;
 }
@@ -13078,7 +13411,7 @@ body.setup-mode[data-theme="dark"] {
   background: var(--color-bg-primary);
   color: var(--color-text-secondary);
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -13113,7 +13446,7 @@ body.setup-mode[data-theme="dark"] {
   background: none;
   color: var(--color-button-primary);
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   padding: 2px 4px;
   border-radius: 4px;
@@ -13172,7 +13505,7 @@ body.setup-mode[data-theme="dark"] {
   padding: 9px 8px;
   border-radius: var(--radius-sm, 6px);
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   border: 1px solid var(--color-border-primary);
   background: var(--color-bg-primary);
@@ -13622,7 +13955,7 @@ body.setup-mode[data-theme="dark"] {
     margin-top: 0.125rem;
   }
   .billing-session-numbers-row .billing-cell-cost {
-    font-weight: 600;
+    font-weight: 500;
     color: var(--color-text-primary);
   }
   .billing-session-numbers-row .billing-cell-time {
@@ -13848,7 +14181,7 @@ body.setup-mode[data-theme="dark"] {
   flex: 1;
   min-width: 0;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;