openclacky 1.5.11 → 1.5.13

data/lib/clacky/web/app.css

@@ -802,7 +802,17 @@ body {
 #sidebar-list.is-scrolling::-webkit-scrollbar-thumb {
   background: var(--color-border-secondary);
 }
-#session-list { padding: 4px 0 0; min-height: 6.75rem; }
+
+/* Windows/classic scrollbars occupy 4px of layout width. Keep them always
+   visible there instead of the show-on-scroll behaviour, so the occupied
+   gutter reads as an intentional scrollbar rather than empty space. */
+.no-overlay-scrollbar #sidebar-list {
+  scrollbar-color: var(--color-border-secondary) transparent;
+}
+.no-overlay-scrollbar #sidebar-list::-webkit-scrollbar-thumb {
+  background: var(--color-border-secondary);
+}
+#session-list { padding: 4px 0 0; }
 
 /* ── Extension nav slots (top / mid / bottom) ───────────────────────────── */
 [id^="ext-slot-sidebar-nav"] { display: block; }
@@ -1260,15 +1270,8 @@ body {
 .search-select {
   flex: 0 0 5rem;
   min-width: 0;
-  padding: 0 2px 0 0.25rem;
   height: 100%;
-  font-size: 0.6875rem;
-  border: none;
   border-right: 1px solid var(--color-border-primary);
-  background: transparent;
-  color: var(--color-text-secondary);
-  outline: none;
-  cursor: pointer;
 }
 
 /* date wrapper: half width, position:relative for the icon overlay */
@@ -1308,7 +1311,6 @@ body {
 }
 
 /* Active filter highlight */
-.search-select[data-active="true"],
 .search-date[data-active="true"] {
   color: var(--color-accent-primary);
   font-weight: 500;
@@ -1494,10 +1496,9 @@ body {
 /* ── Session empty placeholder ───────────────────────────────────────────── */
 .session-empty {
   margin: 0;
-  padding: 2rem 0.75rem;
+  padding: 0.375rem 0.65rem;
   font-size: 0.75rem;
   color: var(--color-text-muted);
-  text-align: center;
 }
 
 /* ── Session List ────────────────────────────────────────────────────────── */
@@ -1766,6 +1767,9 @@ body {
 .session-actions-submenu-item:hover .session-actions-submenu-icon {
   color: var(--color-text-primary);
 }
+.session-actions-submenu-item.selected {
+  background: var(--color-bg-hover);
+}
 .session-actions-submenu-divider {
   height: 1px;
   background: var(--color-border-secondary);
@@ -2517,8 +2521,17 @@ body {
   max-height: 12.5rem;
   overflow-y: auto;
   scrollbar-width: none;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  min-height: calc(1.55em + 8px);
 }
 .new-session-textarea::-webkit-scrollbar { display: none; }
+.new-session-textarea:empty::before {
+  content: attr(data-placeholder);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
 .new-session-advanced-wrap {
   display: flex;
   flex-direction: column;
@@ -2948,56 +2961,129 @@ body {
   flex: none;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: 6px;
+  padding: 6px 8px;
   border-bottom: 1px solid var(--color-border-secondary);
 }
-.wt-bar-hint { font-size: 11px; color: var(--color-text-tertiary); }
-.wt-bar-btn {
-  flex: none;
-  padding: 3px 10px;
+.wt-search {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 4px 0 8px;
+  background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary);
+  transition: border-color var(--transition-base);
+}
+.wt-search:focus-within { border-color: var(--color-accent-primary); }
+.wt-search-icon { display: inline-flex; color: var(--color-text-muted); flex-shrink: 0; }
+.wt-search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 12px;
+  color: var(--color-text-primary);
+  padding: 0;
+}
+.wt-search-input::placeholder { color: var(--color-text-muted); }
+.wt-search-clear {
+  flex: none;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.wt-search-clear:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+.wt-search-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 6px 8px;
+  font-size: 0.8125rem;
+}
+.wt-search-row { gap: 6px; }
+.wt-search-dir {
+  margin-left: auto;
+  padding-left: 0.5rem;
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+}
+.wt-mark {
+  background: var(--color-accent-soft);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+.wt-bar-btn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-xs);
+  background: transparent;
   color: var(--color-text-secondary);
-  font-size: 11px;
   cursor: pointer;
 }
-.wt-bar-btn:hover { background: var(--color-bg-hover); }
+.wt-bar-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
 .wt-tree {
   flex: 1;
   overflow-y: auto;
-  padding: 6px 8px;
+  padding: 4px 6px 8px;
   font-size: 0.8125rem;
-  font-family: var(--font-mono);
 }
 .wt-node { user-select: none; }
 .wt-row {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.1875rem 0.375rem;
-  border-radius: var(--radius-sm);
+  gap: 5px;
+  height: 24px;
+  padding: 0 8px 0 5px;
+  border-radius: var(--radius-xs);
   cursor: pointer;
   color: var(--color-text-primary);
   white-space: nowrap;
   overflow: hidden;
 }
 .wt-row:hover { background: var(--color-bg-hover); }
+.wt-row.active { background: var(--color-accent-soft); }
 .wt-caret {
   display: inline-flex;
-  width: 0.875rem;
+  width: 0.75rem;
   flex-shrink: 0;
-  color: var(--color-text-secondary);
+  color: var(--color-text-muted);
   transition: transform var(--transition-base);
 }
 .wt-caret.open { transform: rotate(90deg); }
 .wt-caret.leaf { visibility: hidden; }
 .wt-icon { display: inline-flex; flex-shrink: 0; color: var(--color-text-secondary); }
+.wt-icon svg { display: block; }
 .wt-name { overflow: hidden; text-overflow: ellipsis; }
-.wt-size { margin-left: auto; padding-left: 0.5rem; font-size: 0.6875rem; color: var(--color-text-tertiary, var(--color-text-secondary)); flex-shrink: 0; }
-.wt-children { margin-left: 0.75rem; }
+.wt-size { margin-left: auto; padding-left: 0.5rem; font-size: 0.6875rem; color: var(--color-text-muted); opacity: 0; transition: opacity var(--transition-base); flex-shrink: 0; }
+.wt-row:hover .wt-size, .wt-row.active .wt-size { opacity: 1; }
+.wt-children {
+  margin-left: 11px;
+  border-left: 1px solid transparent;
+}
+.wt-children.guide-on { border-left-color: color-mix(in srgb, var(--color-text-primary) 20%, transparent); }
 .wt-empty, .wt-loading, .wt-error {
   padding: 0.375rem 0.625rem;
   font-size: 0.75rem;
@@ -3005,6 +3091,147 @@ body {
 }
 .wt-error { color: var(--color-danger, #d23); }
 
+/* ── Workspace viewer (file tree + tabbed preview, inside the Files tab) ── */
+.wv-root { flex: 1; min-height: 0; display: flex; }
+.wv-tree-pane {
+  flex: 0 0 auto;
+  width: var(--wv-tree-width, 38%);
+  min-width: 168px;
+  max-width: 460px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.wv-tree-resize {
+  flex: none;
+  width: 6px;
+  cursor: col-resize;
+  position: relative;
+  z-index: 2;
+  background: transparent;
+  display: none;
+}
+.wv-root.has-open-files .wv-tree-resize { display: block; }
+.wv-tree-resize::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 2px;
+  width: 1px;
+  background: var(--color-border-primary);
+}
+.wv-viewer { flex: 1; min-width: 0; display: none; flex-direction: column; min-height: 0; }
+.wv-root.has-open-files .wv-viewer { display: flex; }
+.wv-root:not(.has-open-files) .wv-tree-pane { flex: 1 1 auto; max-width: none; }
+
+.wv-tabbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px 4px 8px;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+.wv-tabs {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.wv-tabs::-webkit-scrollbar { display: none; }
+.wv-tab {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 150px;
+  padding: 3px 4px 3px 9px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: none;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.wv-tab:hover { color: var(--color-text-secondary); background: var(--color-bg-hover); }
+.wv-tab.active {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-secondary);
+  font-weight: 500;
+}
+.wv-tab-label { overflow: hidden; text-overflow: ellipsis; }
+.wv-tab-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-accent-primary);
+}
+.wv-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+}
+.wv-tab-close:hover { background: var(--color-border-primary); color: var(--color-text-primary); }
+
+.wv-actions { flex: none; display: flex; align-items: center; gap: 2px; }
+.wv-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+}
+.wv-action:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+.wv-action.active { background: var(--color-bg-hover); color: var(--color-accent-primary); }
+.wv-action.dirty { color: var(--color-accent-primary); }
+
+.wv-content { flex: 1; min-height: 0; position: relative; }
+.wv-pane { position: absolute; inset: 0; display: none; }
+.wv-pane.active { display: flex; }
+.wv-pane--text { flex-direction: column; }
+.wv-pane[data-mode="edit"] .wv-md-preview { display: none; }
+.wv-pane[data-mode="preview"] .wv-code { display: none; }
+.wv-code { flex: 1; min-height: 0; overflow: hidden; }
+.wv-code .cm-editor {
+  height: 100%;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  background: transparent;
+}
+.wv-code .cm-editor .cm-content { background: transparent; }
+.wv-code .cm-editor.cm-focused { outline: none; }
+.wv-code .cm-scroller { overflow: auto; font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace); }
+.wv-code .cm-gutters {
+  background: transparent;
+  border-right: 1px solid var(--color-border-primary);
+  color: var(--color-text-tertiary);
+}
+.wv-code .cm-activeLineGutter { background: var(--color-bg-hover); }
+.wv-pane--image {
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-primary);
+}
+.wv-pane--image img { max-width: 100%; max-height: 100%; object-fit: contain; }
+
+
 /* Mobile-only floating back button — replaces the old in-header back button.
    Hidden on desktop; mobile media query enables it. Positioned absolutely so
    it doesn't take layout space or add visual chrome on desktop. */
@@ -4655,7 +4882,7 @@ body {
   position: fixed;
   /* Position will be calculated dynamically via JavaScript */
   min-width: 12.5rem;
-  max-width: min(17.5rem, calc(100vw - 1.5rem));
+  max-width: min(20rem, calc(100vw - 1.5rem));
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
@@ -4714,25 +4941,33 @@ body {
 
 .sib-submodel-toggle {
   margin-left: 0.375rem;
-  width: 1.125rem;
-  height: 1.125rem;
+  width: 1.25rem;
+  height: 1.25rem;
   padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 5px;
+  background: var(--color-bg-primary);
   color: var(--color-text-secondary);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 .sib-submodel-toggle:hover {
   background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 45%, transparent);
   color: var(--color-accent-primary);
 }
 .sib-submodel-toggle[aria-expanded="true"] {
   background: color-mix(in srgb, var(--color-accent-primary) 18%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 50%, transparent);
+  color: var(--color-accent-primary);
+}
+/* Keep the chevron visible when its row is hovered or selected. */
+.sib-model-option:hover .sib-submodel-toggle,
+.sib-model-option.current .sib-submodel-toggle {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 45%, transparent);
   color: var(--color-accent-primary);
 }
 .sib-submodel-toggle[aria-expanded="true"] svg {
@@ -4748,8 +4983,8 @@ body {
 
 .sib-submodel-panel {
   position: fixed;
-  min-width: 11rem;
-  max-width: 16rem;
+  min-width: 12rem;
+  max-width: 18rem;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
@@ -4760,6 +4995,9 @@ body {
   padding: 0.25rem 0;
 }
 .sib-submodel-panel-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
   padding: 0.375rem 0.875rem 0.4375rem;
   font-size: 0.625rem;
   text-transform: uppercase;
@@ -4768,6 +5006,17 @@ body {
   border-bottom: 1px solid var(--color-border-primary);
   margin-bottom: 0.25rem;
 }
+.sib-submodel-panel-model {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.625rem;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
 .sib-submodel-row {
   padding: 0.5rem 0.875rem;
   font-size: 0.7rem;
@@ -4790,6 +5039,13 @@ body {
   color: var(--color-accent-primary);
 }
 .sib-submodel-row-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  overflow: hidden;
+  min-width: 0;
+}
+.sib-submodel-row-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4857,7 +5113,6 @@ body {
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
-  margin-left: 0.375rem;
   padding: 1px 0.375rem;
   font-size: 0.5625rem;
   line-height: 1.4;
@@ -4953,15 +5208,58 @@ body {
 .sib-model-option .sib-model-name.has-sub {
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.125rem;
+  gap: 0.325rem;
 }
 .sib-model-option .sib-model-name-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  overflow: hidden;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.sib-model-option .sib-model-name-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 0 1 auto;
   min-width: 0;
 }
+.sib-model-option.current .sib-model-name-text {
+  color: var(--color-accent-primary);
+}
+.sib-model-check {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  color: var(--color-success, #2da44e);
+}
+
+/* Brand-colored tile (provider initial) shown before each model name.
+   Solid brand color + white letter stays legible in both light and dark
+   themes; the neutral hairline keeps dark tiles from melting into the bg. */
+.sib-vendor-badge {
+  flex: 0 0 auto;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.5625rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  color: #fff;
+  background: var(--vendor-color, #7A8B99);
+  border: 1px solid rgba(127, 127, 127, 0.25);
+  user-select: none;
+}
+.sib-vendor-badge svg {
+  width: 0.6875rem;
+  height: 0.6875rem;
+  fill: currentColor;
+  display: block;
+}
 .sib-model-option .sib-model-name-sub {
   font-size: 0.6875rem;
   color: var(--color-text-secondary);
@@ -5485,6 +5783,193 @@ body {
   background: var(--color-accent-soft);
 }
 
+/* ── @ mention menu (Files & Folders / Past Chats) ────────────────────── */
+.mention-autocomplete {
+  position: absolute;
+  bottom: 100%;
+  left: 24px;
+  right: 24px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 13px;
+  box-shadow: var(--shadow-card);
+  margin-bottom: 8px;
+  max-height: 18.75rem;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.375rem;
+}
+#ns-mention-autocomplete {
+  bottom: calc(100% - 3rem);
+}
+.mention-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+  margin-right: -0.375rem;
+  padding-right: 0.375rem;
+}
+.mention-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.375rem 0.5rem;
+  margin-bottom: 0.125rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+.mention-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.175rem 0.375rem;
+  border-radius: 0.375rem;
+}
+.mention-back:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.mention-title {
+  font-size: 0.6875rem;
+  color: var(--color-text-tertiary);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mention-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0.625rem;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  transition: background 0.1s;
+  user-select: none;
+}
+.mention-item.active {
+  background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
+}
+.mention-item-main {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex: 1;
+  min-width: 0;
+}
+.mention-ico {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-secondary);
+}
+.mention-name {
+  font-size: 0.8125rem;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.mention-size {
+  font-size: 0.6875rem;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+.mention-chevron {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-tertiary);
+  margin-left: 0.375rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  transition: background 0.1s, color 0.1s;
+}
+.mention-chevron:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.mention-empty {
+  padding: 0.875rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-tertiary);
+}
+.mention-load-more {
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.5rem;
+  text-align: center;
+  transition: background 0.1s, color 0.1s;
+}
+.mention-load-more:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.mention-load-more.active {
+  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
+}
+.mention-load-more:disabled {
+  color: var(--color-text-tertiary);
+  cursor: default;
+}
+
+/* ── Mention chips inside the contenteditable composer ─────────────────── */
+.mention-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.375rem;
+  margin: 0 0.125rem;
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  vertical-align: baseline;
+  user-select: none;
+  cursor: default;
+}
+.mention-chip-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-secondary);
+}
+
+/* ── Mention badge inside user message bubbles ─────────────────────────── */
+.msg-mention-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
+  font-size: 0.75rem;
+  margin: 0 0.25rem 0.25rem 0;
+}
+.msg-mention-badge-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 #user-input {
   flex: 1;
   background: transparent !important;
@@ -5500,8 +5985,17 @@ body {
   overflow-y: auto;
   scrollbar-width: none;
   margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  min-height: calc(1.55em + 8px);
 }
 #user-input::-webkit-scrollbar { display: none; }
+#user-input:empty::before {
+  content: attr(data-placeholder);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
 
 #btn-send, #btn-interrupt {
   border: none;
@@ -5664,11 +6158,13 @@ body {
   align-items: center;
   justify-content: space-between;
   font-size: 1.125rem;
-  font-weight: 700;
   color: var(--color-text-primary);
   letter-spacing: -0.3px;
   padding-bottom: 0.5rem;
 }
+.settings-section-title > span {
+  font-weight: 700;
+}
 .btn-settings-add {
   display: flex;
   align-items: center;
@@ -6072,6 +6568,7 @@ body {
   cursor: pointer;
   display: flex;
   align-items: center;
+  gap: 0.375rem;
   justify-content: space-between;
   transition: border-color 0.15s ease;
 }
@@ -6092,6 +6589,24 @@ body {
 .custom-select-trigger .placeholder {
   color: var(--color-text-secondary);
 }
+.custom-select-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.custom-select-trigger--bare {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  padding: 0 0.25rem;
+  font-size: 0.6875rem;
+  height: 100%;
+  color: var(--color-text-secondary);
+}
+.custom-select-trigger--bare .custom-select-value:not(.placeholder) {
+  color: var(--color-accent-primary);
+  font-weight: 500;
+}
 .custom-select-arrow {
   width: 0.75rem;
   height: 0.75rem;
@@ -6099,6 +6614,9 @@ body {
   transition: transform 0.2s ease;
   flex-shrink: 0;
 }
+.custom-select-arrow path {
+  stroke-width: 2.5;
+}
 .custom-select-trigger.open .custom-select-arrow {
   transform: rotate(180deg);
 }
@@ -6106,7 +6624,9 @@ body {
   position: absolute;
   top: calc(100% + 0.25rem);
   left: 0;
-  right: 0;
+  min-width: 100%;
+  width: max-content;
+  max-width: 24rem;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
@@ -6115,16 +6635,22 @@ body {
   overflow-y: auto;
   z-index: 1000;
   display: none;
+  padding: 0.375rem 0;
 }
 .custom-select-dropdown.open {
   display: block;
 }
 .custom-select-option {
   padding: 0.5rem 0.75rem;
+  margin: 0 0.375rem;
   font-size: 0.8125rem;
   color: var(--color-text-primary);
   cursor: pointer;
+  border-radius: 6px;
   transition: background-color 0.15s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .custom-select-option:hover {
   background: var(--color-bg-hover);
@@ -6133,6 +6659,55 @@ body {
   background: var(--color-bg-hover);
   color: var(--color-accent-primary);
 }
+/* "Custom" entry lives in a fixed footer area outside the panel's own
+   scroll region, so it stays visible without ever scrolling with the list. */
+.custom-select-dropdown--footer {
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0.375rem 0 0;
+}
+.custom-select-dropdown--footer.open {
+  display: flex;
+}
+.custom-select-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+.custom-select-option-custom {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  /* Override .custom-select-option's overflow:hidden (ellipsis) so the
+     ::before divider can extend above this row. */
+  overflow: visible;
+  margin: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+}
+.custom-select-option-custom::before {
+  content: "";
+  position: absolute;
+  top: -0.1875rem;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--color-border-primary);
+}
+.custom-select-option-custom:hover {
+  color: var(--color-text-primary);
+}
+.custom-select-option-custom svg {
+  flex-shrink: 0;
+}
+.custom-select-option-custom:hover {
+  color: var(--color-text-primary);
+}
 
 /* Provider recommended badge (inside dropdown option) */
 .provider-badge-recommended {
@@ -6236,25 +6811,13 @@ body {
   color: var(--color-text-tertiary);
 }
 .model-provider-filter {
-  height: 2.25rem;
-  padding: 0 1.75rem 0 0.625rem;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary);
-  font-size: 0.8125rem;
-  outline: none;
-  cursor: pointer;
-  transition: border-color 0.15s;
+  width: auto;
   max-width: 12rem;
   min-width: 0;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.625rem center;
+  height: 2.25rem;
 }
-.model-provider-filter:focus {
-  border-color: var(--color-accent-primary);
+.model-provider-filter .custom-select-trigger {
+  height: 100%;
 }
 
 /* ── Grid Model Card ────────────────────────────────────────────────────────── */
@@ -6392,20 +6955,23 @@ body {
 .model-card-grid-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  font-size: 0.6875rem;
-  color: var(--color-text-tertiary);
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
   text-decoration: none;
-  padding: 0.125rem 0.25rem;
-  border-radius: 4px;
-  transition: color 0.15s;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  background: var(--color-bg-tertiary);
+  transition: all 0.15s;
 }
 .model-card-grid-link:hover {
+  border-color: var(--color-accent-primary);
   color: var(--color-accent-primary);
-  text-decoration: underline;
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
 }
 .model-card-grid-link svg {
-  opacity: 0.7;
   flex-shrink: 0;
 }
 
@@ -6594,16 +7160,122 @@ body {
 }
 /* ── Dir Picker — Finder-style ────────────────────────────────────── */
 .dp-modal {
-  max-width: 680px;
-  width: 680px;
-  max-height: 85vh;
+  max-width: 820px;
+  width: 820px;
+  height: min(640px, calc(100vh - 2rem));
+  max-height: none;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   padding: 0;
   overflow: hidden;
   border-radius: 10px;
 }
 
+/* Sidebar — quick-access places (favorites + locations) */
+.dp-sidebar {
+  width: 184px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  padding: 0.8rem 0.5rem 0.5rem 0.5rem;
+  border-right: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+}
+.dp-sidebar-label {
+  padding: 0.25rem 0.5rem 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-tertiary);
+}
+.dp-sidebar-label:not(:first-child) {
+  margin-top: 0.5rem;
+}
+.dp-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.08s;
+}
+.dp-sidebar-item:hover {
+  background: var(--color-bg-hover);
+}
+.dp-sidebar-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+.dp-sidebar-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dp-sidebar-favorite {
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  transition: background 0.08s;
+}
+.dp-sidebar-favorite:hover,
+.dp-sidebar-favorite:focus-within {
+  background: var(--color-bg-hover);
+}
+.dp-sidebar-favorite-open {
+  min-width: 0;
+  padding-right: 0.25rem;
+}
+.dp-sidebar-favorite-open:hover {
+  background: transparent;
+}
+.dp-sidebar-favorite-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 2px;
+  padding: 0;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s, background 0.1s, color 0.1s;
+}
+.dp-sidebar-favorite:hover .dp-sidebar-favorite-remove,
+.dp-sidebar-favorite:focus-within .dp-sidebar-favorite-remove {
+  opacity: 1;
+  pointer-events: auto;
+}
+.dp-sidebar-favorite-remove:hover {
+  background: var(--color-bg-active);
+  color: var(--color-text-primary);
+}
+
+/* Main column — toolbar + list + footer */
+.dp-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
 /* Toolbar */
 .dp-toolbar {
   display: flex;
@@ -6622,74 +7294,175 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  border: 1px solid rgba(0,0,0,0.18);
+  border: 0;
   border-radius: 5px;
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary);
+  background: transparent;
+  color: var(--color-text-secondary);
   cursor: pointer;
-  transition: background 0.1s;
+  transition: background 0.1s, color 0.1s;
 }
 .dp-nav-btn:hover:not(:disabled) {
   background: var(--color-bg-hover);
+  color: var(--color-text-primary);
 }
 .dp-nav-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
+.dp-favorite-btn {
+  flex-shrink: 0;
+}
+.dp-favorite-btn.active {
+  color: var(--color-accent-primary);
+}
 /* Breadcrumb */
 .dp-breadcrumb {
   display: flex;
   align-items: center;
   gap: 0;
   flex: 1;
+  height: 28px;
   min-width: 0;
+  padding: 1px 4px;
   overflow-x: auto;
   overflow-y: hidden;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: var(--color-bg-primary);
+  cursor: text;
+  transition: border-color 0.12s, background 0.12s;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE */
-  /* Left fade mask when content overflows */
-  -webkit-mask-image: linear-gradient(to right, transparent 0px, black 32px);
-  mask-image: linear-gradient(to right, transparent 0px, black 32px);
+}
+.dp-breadcrumb.editing {
+  padding: 0;
+  overflow: hidden;
+  border-color: var(--color-accent-primary);
+  background: var(--color-bg-secondary);
 }
 .dp-breadcrumb::-webkit-scrollbar {
   display: none;
 }
 .dp-bc-seg {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
   font-size: 0.8125rem;
+  font-family: inherit;
   color: var(--color-text-secondary);
   cursor: pointer;
   white-space: nowrap;
   padding: 3px 6px;
+  border: 0;
   border-radius: 4px;
+  background: transparent;
   transition: background 0.1s, color 0.1s;
 }
 .dp-bc-seg:hover {
-  background: rgba(0,0,0,0.07);
+  background: var(--color-bg-hover);
   color: var(--color-text-primary);
 }
 .dp-bc-current {
   color: var(--color-text-primary);
   font-weight: 500;
-  cursor: default;
-}
-.dp-bc-current:hover {
-  background: transparent;
 }
 .dp-bc-sep {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
   color: var(--color-text-tertiary);
+  cursor: pointer;
   flex-shrink: 0;
 }
-.dp-bc-folder-icon {
-  display: inline-flex;
+.dp-bc-sep svg {
+  width: 12px;
+  height: 12px;
+  transform-origin: center;
+  transition: transform 0.16s ease;
+}
+.dp-bc-sep.open svg {
+  transform: rotate(90deg);
+}
+.dp-bc-sep:hover,
+.dp-bc-sep.open {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+@media (prefers-reduced-motion: reduce) {
+  .dp-bc-sep svg {
+    transition: none;
+  }
+}
+.dp-address-input {
+  width: 100%;
+  height: 100%;
+  padding: 0 8px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+}
+.dp-address-input.invalid {
+  box-shadow: inset 0 0 0 1px var(--color-text-danger, #ef4444);
+}
+.dp-bc-menu {
+  position: fixed;
+  z-index: 1100;
+  min-width: 180px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: 280px;
+  padding: 4px;
+  overflow-y: auto;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 7px;
+  background: var(--color-bg-primary);
+  box-shadow: var(--shadow-lg);
+}
+.dp-bc-menu-item {
+  display: flex;
   align-items: center;
-  color: var(--color-text-secondary);
-  margin-right: 3px;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 0.5rem;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+.dp-bc-menu-item:hover {
+  background: var(--color-bg-hover);
+}
+.dp-bc-menu-icon {
+  display: inline-flex;
   flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+.dp-bc-menu-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dp-bc-menu-state {
+  padding: 0.6rem 0.75rem;
+  color: var(--color-text-tertiary);
+  font-size: 0.8125rem;
+}
+.dp-bc-menu-error {
+  color: var(--color-text-danger, #ef4444);
 }
 
 /* Column header */
@@ -6729,7 +7502,7 @@ body {
 .dp-list {
   flex: 1;
   overflow-y: auto;
-  min-height: 320px;
+  min-height: 0;
   padding-top: 0.35rem;
   background: var(--color-bg-primary);
 }
@@ -8248,29 +9021,14 @@ body {
   flex: 1;
   min-width: 15rem;
   font-size: 0.8125rem;
-  padding: 0.4375rem 0.75rem;
-  border-radius: 6px;
-  border: 1px solid var(--color-border-primary);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-}
-.extensions-sort {
-  flex-shrink: 0;
-  font-size: 0.8125rem;
-  padding: 0.4375rem 2rem 0.4375rem 0.75rem;
+  padding: 0.5375rem 0.75rem;
   border-radius: 6px;
   border: 1px solid var(--color-border-primary);
   background: var(--color-bg-secondary);
   color: var(--color-text-primary);
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.625rem center;
 }
-.extensions-sort:focus {
-  outline: none;
-  border-color: var(--color-accent, #6366f1);
+.extensions-select {
+  width: auto;
 }
 #extensions-list {
   display: flex;
@@ -11823,6 +12581,7 @@ body.setup-mode[data-theme="dark"] {
 }
 /* Project filter dropdown */
 .trash-filter-project-wrap {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
@@ -11842,16 +12601,12 @@ body.setup-mode[data-theme="dark"] {
   flex-shrink: 0;
   pointer-events: none;
 }
-.trash-filter-project-select {
-  font-size: 0.6875rem;
-  color: inherit;
-  background: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  padding: 0;
+.trash-filter-project-wrap .custom-select-wrapper {
+  /* dropdown anchors to the wrap (icon + trigger) instead, so the panel
+     aligns with the whole control's left edge rather than the icon's right */
+  position: static;
+  min-width: 0;
   max-width: 130px;
-  appearance: auto;
 }
 .trash-actions {
   display: flex;
@@ -12105,25 +12860,29 @@ body.setup-mode[data-theme="dark"] {
 }
 .billing-top-bar {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: stretch;
   gap: 1rem;
 }
 .billing-title-row {
   display: flex;
   align-items: baseline;
+  flex-wrap: wrap;
   gap: 0.75rem;
+  min-width: 0;
 }
 .billing-title-row h2 {
   font-size: 1.5rem;
   font-weight: 500;
   color: var(--color-text-primary);
   margin: 0;
+  flex-shrink: 0;
 }
 .billing-subtitle {
   font-size: 0.875rem;
   color: var(--color-text-secondary);
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 .billing-controls {
   display: flex;
@@ -12131,6 +12890,14 @@ body.setup-mode[data-theme="dark"] {
   gap: 0.625rem;
   flex-wrap: wrap;
 }
+.billing-controls .segmented-control {
+  flex: 0 0 auto;
+}
+.billing-controls .segmented-control,
+.billing-model-filter,
+.billing-share-btn {
+  height: 2rem;
+}
 
 /* ── Disclaimer notice ──────────────────────────────────────────────── */
 .billing-disclaimer {
@@ -12147,34 +12914,20 @@ body.setup-mode[data-theme="dark"] {
 
 /* ── Model Filter ────────────────────────────────────────────────────── */
 .billing-model-filter {
-  padding: 0.5375rem 1.75rem 0.5375rem 0.75rem;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-  font-size: 0.8125rem;
-  cursor: pointer;
-  min-width: 130px;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.625rem center;
-  transition: border-color 0.15s ease;
-}
-.billing-model-filter:focus {
-  outline: none;
-  border-color: var(--color-accent-primary);
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
+  width: 16rem;
+  flex: 0 0 16rem;
+  min-width: 0;
 }
-.billing-model-filter option {
-  background: var(--color-bg-secondary);
-  color: var(--color-text-primary);
+.billing-model-filter .custom-select-trigger {
+  height: 100%;
 }
 
 /* ── Action Buttons ──────────────────────────────────────────────────── */
 .billing-share-btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  margin-left: auto;
   gap: 0.375rem;
   padding: 0.4375rem 0.75rem;
   border: 1px solid var(--color-border-primary);
@@ -14278,6 +15031,26 @@ body.setup-mode[data-theme="dark"] {
   #billing-body { padding: 1rem 1rem 1rem; }
   #trash-body   { padding: 1rem 1rem 1rem; }
 
+  .billing-controls .segmented-control {
+    flex: 1 0 100%;
+  }
+  .billing-controls .segmented-control__btn {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .billing-model-filter {
+    width: auto;
+    flex: 1 1 0;
+  }
+  @media (max-width: 500px) {
+    .billing-controls .segmented-control {
+      overflow-x: auto;
+    }
+    .billing-controls .segmented-control__btn {
+      flex: 1 0 auto;
+      padding-inline: 0.5rem;
+    }
+  }
   .billing-heatmap-row { grid-template-columns: 1fr; }
 
   /* ── MCP page ── */