openclacky 1.5.2 → 1.5.4

data/lib/clacky/web/app.css

@@ -803,7 +803,7 @@ body {
   margin-bottom: 6px;
   border-bottom: 1px solid var(--color-border-secondary);
 }
-#ext-slot-sidebar-nav      { padding: 6px 0 4px; }
+#ext-slot-sidebar-nav      { padding: 10px 0 0px; }
 #ext-slot-sidebar-nav-bottom {
   padding: 8px 0 10px;
   margin-top: 6px;
@@ -842,12 +842,46 @@ body {
 .sidebar-divider:has(.sidebar-divider-actions) {
   justify-content: space-between;
 }
+/* Sessions divider: suppress the rule line (buttons fill the right side) */
+.sidebar-divider--no-rule::after {
+  display: none;
+}
 .sidebar-divider-actions {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
+/* ── Chat section collapse ───────────────────────────────────────────────── */
+#chat-section-header {
+  cursor: pointer;
+  z-index: 20;
+}
+.chat-section-title {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+.chat-section-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+  margin-left: 1px;
+}
+#chat-section-header:hover .chat-section-chevron {
+  opacity: 1;
+}
+.chat-header-collapsed .chat-section-chevron {
+  opacity: 1;
+  transform: rotate(-90deg);
+}
+.chat-section-collapsed {
+  display: none;
+}
+
 /* ── New Session button ──────────────────────────────────────────────────── */
 .btn-split-wrap {
   display: flex;
@@ -1503,21 +1537,29 @@ body {
 /* Actions button (⋯) on session list items — visible only on hover */
 .session-actions-btn {
   flex-shrink: 0;
-  display: none;
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
+  width: 0;
   height: 1.5rem;
+  overflow: hidden;
   background: transparent;
   border: none;
   border-radius: 4px;
   color: var(--color-text-muted);
   cursor: pointer;
   padding: 0;
-  transition: background .15s, color .15s;
+  opacity: 0;
+  pointer-events: none;
+  transition: background .15s, color .15s, width .15s, opacity .15s;
   align-self: center;
 }
-.session-item:hover .session-actions-btn { display: flex; }
+.session-item:hover .session-actions-btn,
+.session-item.active .session-actions-btn {
+  width: 1.5rem;
+  opacity: 1;
+  pointer-events: auto;
+}
 .session-actions-btn:hover {
   background: var(--color-border-primary);
   color: var(--color-text-primary);
@@ -2175,9 +2217,6 @@ body {
 }
 
 /* ── Starter Prompts ── */
-.new-session-starter-prompts {
-  margin-top: 0.25rem;
-}
 .ns-starter-label {
   font-size: 0.75rem;
   color: var(--color-text-tertiary);
@@ -2580,19 +2619,20 @@ body {
 
 .session-aside-collapse {
   position: absolute;
-  top: 7px;
-  right: 8px;
+  top: 4px;
+  right: 0.5rem;
   z-index: 11;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.625rem;
-  height: 1.625rem;
-  border: none;
-  background: transparent;
-  color: var(--color-text-tertiary);
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
   border-radius: var(--radius-sm);
   cursor: pointer;
+  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
   transition: background-color var(--transition-base), color var(--transition-base);
 }
 .session-aside-collapse:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
@@ -3405,6 +3445,32 @@ body {
   color: var(--color-text-secondary);
 }
 .msg-success   { color: var(--color-success); align-self: flex-start; font-size: 0.8125rem; }
+
+/* ── Ext-developer reload hint ─────────────────────────────────────────────── */
+.msg-ext-refresh-hint {
+  align-self: flex-start;
+  margin: 0 -1rem;
+}
+.btn-ext-refresh {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-accent-primary);
+  background: transparent;
+  border: 1px solid var(--color-accent-primary);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+.btn-ext-refresh:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
+}
+.btn-ext-refresh:disabled {
+  cursor: default;
+}
 .tool-name     { color: var(--color-warning); font-weight: 600; }
 .progress-msg  { color: var(--color-accent-primary); font-size: 0.75rem; align-self: center; }
 
@@ -5376,7 +5442,7 @@ body {
 }
 .field-input-row .field-input { flex: 1; }
 .btn-toggle-key {
-  background: var(--color-border-secondary);
+  background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: 6px;
   color: var(--color-text-secondary);
@@ -5384,8 +5450,19 @@ body {
   padding: 0.25rem 0.5rem;
   cursor: pointer;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn-toggle-key:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.btn-toggle-key:active {
+  background: var(--color-bg-hover);
+  filter: brightness(0.94);
+  transform: scale(0.95);
 }
-.btn-toggle-key:hover { color: var(--color-text-primary); }
 .field-checkbox {
   width: 1rem;
   height: 1rem;
@@ -5778,14 +5855,15 @@ body {
   max-height: 90vh;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  /* Do NOT use overflow:hidden here — it clips absolutely-positioned dropdowns
+     inside the modal (e.g. the provider custom-select). Border-radius still
+     applies because there is no overflow to clip. */
+  overflow: visible;
 }
 .model-edit-modal-content {
   max-width: 500px;
 }
-.model-edit-modal-content .modal-body {
-  overflow-y: auto;
-}
+/* overflow override for model-edit modal is applied after .modal-content .modal-body below */
 .modal-content .modal-header {
   display: flex;
   align-items: center;
@@ -5823,6 +5901,12 @@ body {
   gap: 0.875rem;
   padding: 1.25rem;
 }
+/* model-edit modal: allow absolutely-positioned dropdowns to escape the body.
+   Must come after .modal-content .modal-body to win the cascade. */
+.modal-content.model-edit-modal-content .modal-body {
+  overflow: visible;
+  padding-bottom: 0;
+}
 .modal-content .modal-footer {
   display: flex;
   align-items: center;
@@ -5866,187 +5950,232 @@ body {
   padding: 1rem 1.25rem;
   border-top: 1px solid var(--color-border-primary);
 }
-.dir-picker-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
+/* ── Dir Picker — Finder-style ────────────────────────────────────── */
+.dp-modal {
+  max-width: 680px;
+  width: 680px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+/* Toolbar */
+.dp-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  border-bottom: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  flex-shrink: 0;
+}
+.dp-nav-btns {
+  display: flex;
+  gap: 2px;
+}
+.dp-nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid rgba(0,0,0,0.18);
+  border-radius: 5px;
   background: var(--color-bg-primary);
   color: var(--color-text-primary);
-  font-size: 0.875rem;
-  font-family: var(--font-mono, monospace);
-  transition: border-color 0.15s;
-  box-sizing: border-box;
-}.dir-picker-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
+  cursor: pointer;
+  transition: background 0.1s;
 }
-.dir-picker-input::placeholder {
-  color: var(--color-text-tertiary);
+.dp-nav-btn:hover:not(:disabled) {
+  background: var(--color-bg-hover);
 }
-.dp-hidden-toggle {
+.dp-nav-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+/* Breadcrumb */
+.dp-breadcrumb {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  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::-webkit-scrollbar {
+  display: none;
+}
+.dp-bc-seg {
   font-size: 0.8125rem;
   color: var(--color-text-secondary);
   cursor: pointer;
-  user-select: none;
+  white-space: nowrap;
+  padding: 3px 6px;
+  border-radius: 4px;
+  transition: background 0.1s, color 0.1s;
 }
-.dp-hidden-toggle input {
-  cursor: pointer;
-  margin: 0;
+.dp-bc-seg:hover {
+  background: rgba(0,0,0,0.07);
+  color: var(--color-text-primary);
 }
-/* Preset buttons row */
-.dp-presets {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
+.dp-bc-current {
+  color: var(--color-text-primary);
+  font-weight: 500;
+  cursor: default;
 }
-.dp-presets .btn-sm {
-  padding: 0.25rem 0.625rem;
-  font-size: 0.75rem;
+.dp-bc-current:hover {
+  background: transparent;
 }
-.dp-up-btn {
+.dp-bc-sep {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-}
-.dp-up-btn svg { flex-shrink: 0; }
-.dp-up-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
 }
-/* Path input container */
-.dp-path-container {
+.dp-bc-folder-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-secondary);
+  margin-right: 3px;
   flex-shrink: 0;
-  position: relative;
-}/* Autocomplete dropdown */
-.dp-autocomplete {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  max-height: 200px;
-  overflow-y: auto;
-  background: var(--color-bg-primary);
-  border: 1px solid var(--color-border-primary);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
-.dp-ac-item {
+
+/* Column header */
+.dp-col-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.4rem 0.75rem;
-  cursor: pointer;
-  font-size: 0.8125rem;
-  color: var(--color-text-primary);
-  transition: background 0.1s;
+  padding: 0.3rem 1rem;
+  border-bottom: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  flex-shrink: 0;
 }
-.dp-ac-item:hover,
-.dp-ac-item.active {
-  background: var(--color-bg-hover);
+.dp-col-name {
+  flex: 1;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
-.dp-ac-icon {
-  display: inline-flex;
+
+/* Hidden-files toggle (in header) */
+.dp-hidden-toggle {
+  display: flex;
   align-items: center;
-  flex-shrink: 0;
-  color: var(--color-text-secondary);
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  user-select: none;
 }
-.dp-ac-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.dp-hidden-toggle input {
+  cursor: pointer;
+  margin: 0;
 }
-/* Tree container */
-.dp-tree {
-  border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
-  background: var(--color-bg-secondary);
-  min-height: 200px;
-  max-height: 340px;
-  overflow: auto;
-  font-size: 0.8125rem;
+
+/* List area */
+.dp-list {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 320px;
+  padding-top: 0.35rem;
+  background: var(--color-bg-primary);
 }
-/* Tree node */
 .dp-node {
   user-select: none;
 }
 .dp-row {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  margin: 0 0.5rem;
+  border-radius: 6px;
   cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.1s;
+  transition: background 0.08s;
 }
 .dp-row:hover {
   background: var(--color-bg-hover);
 }
 .dp-row.selected {
-  background: var(--color-accent-subtle, rgba(59, 130, 246, 0.12));
+  background: var(--color-accent, #3b82f6);
 }
 .dp-row.selected .dp-name {
-  color: var(--color-accent);
+  color: #fff;
   font-weight: 500;
 }
-/* Caret */
-.dp-caret {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--color-text-tertiary);
-  transition: transform 0.15s;
-}
-.dp-caret.open {
-  transform: rotate(90deg);
+.dp-row.selected .dp-icon {
+  color: rgba(255,255,255,0.85);
 }
-/* Folder icon */
 .dp-icon {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
   color: var(--color-text-secondary);
 }
-.dp-row.selected .dp-icon {
-  color: var(--color-accent);
-}
-/* Name */
 .dp-name {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--color-text-primary);
+  font-size: 0.875rem;
+}
+.dp-name-input {
+  flex: 1;
+  border: 1px solid var(--color-accent, #3b82f6);
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-size: 0.875rem;
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  outline: none;
 }
-/* Children container */
-.dp-children {
-  display: flex;
-  flex-direction: column;
-}/* Loading / empty / error states */
 .dp-loading,
 .dp-empty,
 .dp-error {
-  padding: 0.5rem 1rem;
+  padding: 2rem 1rem;
+  text-align: center;
   color: var(--color-text-tertiary);
-  font-size: 0.75rem;
-  font-style: italic;
-}
-.dp-error {
-  color: var(--color-text-danger, #ef4444);
+  font-size: 0.8125rem;
 }
-/* Model name combobox */
-.model-name-combobox {
-  position: relative;
+.dp-error { color: var(--color-text-danger, #ef4444); }
+
+/* Footer */
+.dp-footer {
   display: flex;
-  gap: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  flex-shrink: 0;
+}
+.dp-footer-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.dp-newfolder-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8125rem;
+}
+/* Model name combobox */
+.model-name-combobox {
+  position: relative;
+  display: flex;
+  gap: 0;
   border: 1px solid var(--color-border-primary);
   border-radius: 7px;
   transition: border-color .15s, box-shadow .15s;
@@ -6206,6 +6335,9 @@ body {
   font-size: 0.75rem;
   flex: 1;
 }
+.model-test-result:empty {
+  display: none;
+}
 .result-ok      { color: var(--color-success); }
 .result-fail    { color: var(--color-error); }
 .result-testing { color: var(--color-text-secondary); }
@@ -7435,7 +7567,7 @@ body {
 }
 .extensions-filter-tab-active {
   color: var(--color-text-primary);
-  border-bottom-color: var(--color-accent, #6366f1);
+  border-bottom-color: var(--color-accent-primary);
 }
 .extensions-search {
   flex: 1;
@@ -8170,6 +8302,127 @@ body {
   border-radius: 4px;
 }
 
+/* ── Markdown split-pane layout ─────────────────────────────────────────── */
+.code-editor-modal--md {
+  max-width: 1280px;
+  width: 98%;
+  height: 90vh;
+  max-height: 960px;
+}
+.code-editor-body--split {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+.code-editor-split-left {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+}
+.code-editor-split-left .cm-editor {
+  height: 100%;
+  flex: 1;
+}
+.code-editor-split-left > .cm-editor {
+  height: 100%;
+}
+.code-editor-split-divider {
+  display: none;
+}
+.code-editor-split-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.code-editor-markdown-preview {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--color-text-primary);
+}
+.code-editor-markdown-preview h1,
+.code-editor-markdown-preview h2,
+.code-editor-markdown-preview h3,
+.code-editor-markdown-preview h4 {
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+.code-editor-markdown-preview h1:first-child,
+.code-editor-markdown-preview h2:first-child,
+.code-editor-markdown-preview h3:first-child { margin-top: 0; }
+.code-editor-markdown-preview h1 { font-size: 1.375rem; }
+.code-editor-markdown-preview h2 { font-size: 1.125rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.25em; }
+.code-editor-markdown-preview h3 { font-size: 1rem; }
+.code-editor-markdown-preview p  { margin: 0.5em 0; }
+.code-editor-markdown-preview ul,
+.code-editor-markdown-preview ol { padding-left: 1.5em; margin: 0.5em 0; }
+.code-editor-markdown-preview li { margin: 0.2em 0; }
+.code-editor-markdown-preview code {
+  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+  font-size: 0.8125em;
+  background: rgba(128, 128, 128, 0.15);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+}
+.code-editor-markdown-preview pre {
+  background: rgba(128, 128, 128, 0.15);
+  border-radius: 8px;
+  padding: 0.875em;
+  overflow-x: auto;
+  margin: 0.625em 0;
+}
+.code-editor-markdown-preview pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.8125rem;
+}
+.code-editor-markdown-preview blockquote {
+  border-left: 3px solid var(--color-accent-primary, #7c3aed);
+  margin: 0.75em 0;
+  padding: 0.25em 1em;
+  color: var(--color-text-secondary);
+}
+.code-editor-markdown-preview a {
+  color: var(--color-accent-primary);
+  text-decoration: none;
+}
+.code-editor-markdown-preview a:hover { text-decoration: underline; }
+.code-editor-markdown-preview img {
+  display: inline;
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+.code-editor-markdown-preview hr {
+  border: none;
+  border-top: 1px solid var(--color-border-primary);
+  margin: 1.25em 0;
+}
+.code-editor-markdown-preview table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.8125rem;
+}
+.code-editor-markdown-preview th,
+.code-editor-markdown-preview td {
+  border: 1px solid var(--color-border-primary);
+  padding: 0.375em 0.75em;
+  text-align: left;
+}
+.code-editor-markdown-preview th {
+  background: rgba(128, 128, 128, 0.15);
+  font-weight: 600;
+}
+
 /* ── Skills sidebar section ──────────────────────────────────────────────── */
 #skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
 
@@ -8959,6 +9212,42 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Brand & License settings section ───────────────────────────────────── */
+.platform-source-card {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+  padding: 1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.platform-source-desc {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+.platform-source-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.platform-source-label {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+.platform-source-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.platform-source-row .field-input {
+  flex: 1;
+  min-width: 12rem;
+  font-family: var(--font-mono, monospace);
+}
+
 .brand-status-card {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
@@ -10600,6 +10889,28 @@ body.setup-mode[data-theme="dark"] {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
 }
+.trash-session-project-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.4rem;
+  border-radius: 4px;
+  background: var(--color-bg-tertiary, var(--color-bg-primary));
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-secondary);
+  font-size: 0.625rem;
+  white-space: nowrap;
+  max-width: 8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.trash-session-project-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-text-muted);
+  flex-shrink: 0;
+}
 .trash-session-card-actions {
   display: flex;
   align-items: center;
@@ -10697,6 +11008,38 @@ body.setup-mode[data-theme="dark"] {
   border-color: var(--color-accent-primary);
   color: #fff;
 }
+/* Project filter dropdown */
+.trash-filter-project-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.45rem 0.2rem 0.55rem;
+  border-radius: 5px;
+  border: 1px solid var(--color-border-primary);
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: border-color 0.14s, color 0.14s;
+}
+.trash-filter-project-wrap:focus-within {
+  border-color: var(--color-accent-primary);
+  color: var(--color-text-primary);
+}
+.trash-filter-project-icon {
+  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;
+  max-width: 130px;
+  appearance: auto;
+}
 .trash-actions {
   display: flex;
   align-items: center;
@@ -11055,7 +11398,7 @@ body.setup-mode[data-theme="dark"] {
 .billing-share-btn:hover {
   background: var(--color-bg-tertiary);
   color: var(--color-text-primary);
-  border-color: var(--color-text-secondary);
+  border-color: var(--color-accent-primary);
 }
 .billing-clear-popup {
   position: absolute;
@@ -12858,7 +13201,7 @@ body.setup-mode[data-theme="dark"] {
     margin-left: 0 !important;
   }
   /* active session: always show ⋯ button (no hover on touch) */
-  .session-item.active .session-actions-btn { display: flex; }
+  .session-item.active .session-actions-btn { width: 1.5rem; opacity: 1; pointer-events: auto; }
   #sidebar.hidden {
     transform: translateX(-100%);
     margin-left: 0 !important;
@@ -13354,3 +13697,570 @@ body.setup-mode[data-theme="dark"] {
     background: var(--color-bg-primary);
   }
 }
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   Projects sidebar section
+   ══════════════════════════════════════════════════════════════════════════════ */
+
+/* ── Empty hint ────────────────────────────────────────────────────────────── */
+.project-empty-hint {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* ── Section-level collapse ────────────────────────────────────────────────── */
+.projects-section-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+}
+.projects-section-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+  margin-left: 1px;
+}
+#projects-section-header:hover .projects-section-chevron {
+  opacity: 1;
+}
+.projects-section-collapsed .projects-section-chevron {
+  opacity: 1;
+  transform: rotate(-90deg);
+}
+.project-list-collapsed {
+  display: none;
+}
+
+/* ── Project group header row ──────────────────────────────────────────────── */
+.project-group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.3125rem 0.625rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--transition-fast);
+}
+.project-group-header:hover {
+  background: var(--color-bg-hover);
+}
+
+.project-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  color: var(--color-text-primary);
+}
+
+/* Actions button (⋯) — shown only on hover */
+.project-actions-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  height: 1.375rem;
+  overflow: hidden;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), width var(--transition-fast);
+}
+.project-group-header:hover .project-actions-btn {
+  width: 1.375rem;
+  opacity: 1;
+  pointer-events: auto;
+}
+.project-actions-btn:hover {
+  background: var(--color-border-primary);
+  color: var(--color-text-primary);
+}
+
+/* ── Session group (indented children) ────────────────────────────────────── */
+.project-session-group {
+  padding-left: 0.875rem;
+  margin-top: 0.08rem;
+}
+
+.project-sessions-empty {
+  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* ── Project hover tooltip ─────────────────────────────────────────────────── */
+.project-tooltip {
+  position: fixed;
+  z-index: 1200;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
+  padding: 0.75rem 0.875rem 0.75rem 1.125rem; /* extra left padding = visual gap */
+  min-width: 13rem;
+  max-width: 18rem;
+  animation: fadeIn 0.12s ease;
+}
+/* Transparent bridge on the left side fills the gap between sidebar and tooltip */
+.project-tooltip::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -8px;
+  width: 8px;
+  height: 100%;
+}
+[data-theme="dark"] .project-tooltip {
+  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
+}
+
+.project-tooltip-header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.75rem;
+}
+.project-tooltip-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  line-height: 0;
+}
+.project-tooltip-icon svg {
+  display: block;
+  flex-shrink: 0;
+}
+.project-tooltip-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-tooltip-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.project-tooltip-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  min-width: 0;
+}
+.project-tooltip-row--clickable {
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 0 -0.25rem;
+  padding: 0.15rem 0.25rem;
+  transition: background var(--transition-fast);
+}
+.project-tooltip-row--clickable:hover {
+  background: var(--color-bg-hover);
+}
+
+.project-tooltip-divider {
+  height: 1px;
+  background: var(--color-border-primary);
+  margin: 0.25rem 0;
+}
+
+.project-tooltip-row-icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  line-height: 0;
+}
+.project-tooltip-row-icon svg {
+  display: block;
+  flex-shrink: 0;
+}
+.project-tooltip-row-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+/* ── Project context menu (rename / delete) ────────────────────────────────── */
+.project-actions-menu {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
+  padding: 0.25rem;
+  min-width: 9rem;
+  z-index: 1000;
+  animation: fadeIn 0.15s ease;
+}
+[data-theme="dark"] .project-actions-menu {
+  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
+}
+.project-actions-menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.625rem;
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  text-align: left;
+  transition: background .12s ease, color .12s ease;
+}
+.project-actions-menu-item:hover {
+  background: var(--color-bg-hover);
+}
+.project-actions-menu-item.danger {
+  color: var(--color-error);
+  margin-top: 0.25rem;
+  position: relative;
+}
+.project-actions-menu-item.danger::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -0.1875rem;
+  height: 1px;
+  background: var(--color-border-secondary);
+}
+.project-actions-menu-item.danger:hover {
+  background: var(--color-error-bg);
+}
+
+/* ── Organize menu (view-mode toggle) ──────────────────────────────────────── */
+.project-organize-menu {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
+  padding: 0.25rem;
+  min-width: 10rem;
+  z-index: 1000;
+  animation: fadeIn 0.15s ease;
+}
+[data-theme="dark"] .project-organize-menu {
+  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
+}
+.project-organize-divider {
+  height: 1px;
+  background: var(--color-border-primary);
+  margin: 0.25rem 0.375rem;
+}
+.project-organize-section-label {
+  padding: 0.25rem 0.625rem 0.125rem;
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+.project-organize-item {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.625rem;
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  text-align: left;
+  transition: background .12s ease, color .12s ease;
+}
+.project-organize-item:hover {
+  background: var(--color-bg-hover);
+}
+.project-organize-item.active {
+  color: var(--color-accent-primary);
+  font-weight: 500;
+}
+
+/* ── Flat mode ─────────────────────────────────────────────────────────────── */
+.project-session-tag {
+  padding: 0 0.625rem 0.1rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--project-color, var(--color-accent-primary));
+  opacity: 0.85;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Project icon badge (sidebar header) ─────────────────────────────────── */
+.project-icon-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+.project-icon-badge svg {
+  display: block;
+}
+
+/* ── Create-project modal: input row (trigger + name input) ──────────────── */
+.create-project-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Trigger button (icon preview) */
+.project-icon-trigger {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-primary);
+  background: transparent;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
+}
+.project-icon-trigger:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-secondary);
+}
+.project-icon-trigger svg {
+  display: block;
+  pointer-events: none;
+}
+
+/* Name input fills remaining space */
+.create-project-name-input {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Source folders section */
+.create-project-folder-section {
+  margin-top: 0.75rem;
+}
+
+.create-project-folder-label {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.4rem;
+}
+
+.create-project-folder-area {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.4rem 0.6rem;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.create-project-folder-area:hover {
+  border-color: var(--color-border-secondary);
+  background: var(--color-bg-hover);
+}
+
+.create-project-folder-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--color-text-muted);
+  font-size: 0.78rem;
+  pointer-events: none;
+}
+.create-project-folder-empty svg {
+  opacity: 0.5;
+  width: 18px;
+  height: 18px;
+}
+
+/* Selected folder card */
+.create-project-folder-card {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  color: var(--color-text-primary);
+  font-size: 0.8rem;
+  cursor: default;
+}
+.create-project-folder-card > svg {
+  flex-shrink: 0;
+  color: var(--color-accent-primary);
+  width: 14px;
+  height: 14px;
+}
+.create-project-folder-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.create-project-folder-remove {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.12s, color 0.12s;
+}
+.create-project-folder-remove:hover {
+  background: rgba(0, 0, 0, 0.09);
+  color: var(--color-text-primary);
+}
+
+/* ── Project picker popup (floating panel) ───────────────────────────────── */
+.project-picker-popup {
+  display: none;          /* hidden by default; JS shows it via style.display */
+  position: fixed;
+  z-index: 9999;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+  padding: 0.75rem;
+  user-select: none;
+}
+
+/* "No color" option — grey with a diagonal slash */
+.project-picker-color-none {
+  background: var(--color-bg-tertiary);
+  position: relative;
+  overflow: hidden;
+}
+.project-picker-color-none::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom right,
+    transparent calc(50% - 1px),
+    var(--color-error) calc(50% - 1px),
+    var(--color-error) calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+}
+
+/* Color row */
+.project-picker-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.project-picker-color-option {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  border: 2.5px solid transparent;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.1s, box-shadow 0.1s;
+  flex-shrink: 0;
+}
+.project-picker-color-option:hover {
+  transform: scale(1.15);
+}
+.project-picker-color-option--selected {
+  box-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-text-primary);
+}
+
+/* Divider */
+.project-picker-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: 0.5rem 0;
+}
+
+/* Icon grid */
+.project-picker-icons {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.25rem;
+}
+.project-picker-icon-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-sm);
+  border: 1.5px solid transparent;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+}
+.project-picker-icon-option:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.project-picker-icon-option--selected {
+  background: var(--color-accent-subtle, rgba(236,72,153,0.12));
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
+}
+.project-picker-icon-option svg {
+  pointer-events: none;
+}
+
+/* Done button */
+.project-picker-footer {
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+.project-picker-done-btn {
+  font-size: 0.8125rem;
+  padding: 0.3rem 0.875rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+.project-picker-done-btn:hover {
+  background: var(--color-bg-hover);
+}
+