@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/css/modal.css

@@ -34,7 +34,9 @@
   position: fixed;
   inset: 0;
   z-index: 200;
-  background: rgba(26, 24, 21, 0.48);
+  background: rgba(26, 24, 21, 0.42);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,15 +48,16 @@
 .modal {
   background: var(--bg-elev);
   border: 1px solid var(--border);
-  border-radius: var(--r-md);
+  border-radius: 14px;
   width: min(560px, 100%);
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   box-shadow:
-    0 24px 64px -16px rgba(26, 24, 21, 0.35),
-    0 4px 12px -2px rgba(26, 24, 21, 0.15);
+    0 32px 80px -20px rgba(26, 24, 21, 0.32),
+    0 8px 20px -4px rgba(26, 24, 21, 0.10),
+    0 0 0 1px rgba(26, 24, 21, 0.02);
   animation: modal-in .22s cubic-bezier(.4, 0, .2, 1);
 }
 @keyframes modal-in {
@@ -66,30 +69,44 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--s-4) var(--s-6);
+  gap: var(--s-3);
+  padding: 16px 20px;
   border-bottom: 1px solid var(--border-soft);
 }
 .modal-head h2 {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--ink);
+  letter-spacing: -0.005em;
+  margin: 0;
 }
+
+/* Red close X · subtle by default, fills red on hover. Available on
+   <Modal> and on confirm/prompt dialogs via dialog.js. */
 .modal-close {
   appearance: none;
   background: transparent;
   border: 0;
-  padding: 4px;
-  margin: -4px;
+  padding: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
   cursor: pointer;
-  color: var(--ink-muted);
-  border-radius: 4px;
+  color: #c44a4a;
   display: inline-flex;
-  transition: color .12s ease, background .12s ease;
+  align-items: center;
+  justify-content: center;
+  transition: color .12s ease, background .12s ease, transform .12s ease;
+}
+.modal-close:hover {
+  background: rgba(196, 74, 74, 0.10);
+  color: #b03737;
 }
-.modal-close:hover { color: var(--ink); background: var(--bg); }
+.modal-close:active { transform: scale(0.94); }
+.modal-close svg { display: block; }
 
 .modal-body {
-  padding: var(--s-5) var(--s-6);
+  padding: 18px 20px;
   overflow-y: auto;
   flex: 1;
 }
@@ -110,8 +127,8 @@
 .modal-foot {
   display: flex;
   justify-content: flex-end;
-  gap: var(--s-3);
-  padding: var(--s-3) var(--s-6);
+  gap: 8px;
+  padding: 12px 20px;
   border-top: 1px solid var(--border-soft);
   background: var(--bg);
 }
@@ -146,22 +163,19 @@
   margin-top: var(--s-3);
 }
 
-/* Narrower variant for confirm/prompt — no border under head, tighter padding */
+/* Narrower variant for confirm/prompt — keeps a head with the red close X */
 .modal-dialog { width: min(440px, 100%); }
-.modal-dialog .modal-head { padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: 0; }
-.modal-dialog .modal-head h2 {
-  font-size: 14.5px;
-  font-weight: 600;
-  color: var(--ink);
-  line-height: 1.4;
-}
-.modal-dialog .modal-body { padding: 0 var(--s-5) var(--s-4); }
-.modal-dialog .modal-foot { padding: var(--s-3) var(--s-5); }
+.modal-dialog .modal-body { padding: 14px 20px 16px; }
 .modal-dialog input[type="text"] {
   width: 100%;
   max-width: none;
-  margin-top: var(--s-2);
+  margin-top: 8px;
 }
+
+/* Picker modals (CLI / Folder / Repos on launch page) — body is flush
+   so Picker.js controls inner padding. */
+.modal-picker .modal-body { padding: 0; }
+
 .dialog-msg {
   font-size: 13.5px;
   color: var(--ink-mid);

package/public/css/responsive.css

@@ -2,9 +2,9 @@
 
 @media (max-width: 900px) {
   .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr !important; }
-  .sidebar { padding: var(--s-4) var(--s-2); }
+  .sidebar { padding: 0 var(--s-2); }
   .brand-name, .nav-label, .nav-badge { opacity: 0; pointer-events: none; }
-  .main { padding: var(--s-6) var(--s-5) var(--s-5); }
+  .main { padding: 0 var(--s-4); }
   .page-head { flex-direction: column; gap: var(--s-3); }
   .config-grid { grid-template-columns: 1fr; }
 }

package/public/css/sidebar.css

@@ -4,51 +4,78 @@
   position: sticky;
   top: 0;
   height: 100vh;
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--border);
+  background: var(--ui-bg);
+  border-right: 1px solid var(--ui-border);
   display: flex;
   flex-direction: column;
-  padding: var(--s-4) var(--s-3);
-  /* visible: let the resize handle (positioned at right: -3px) overflow the
-     sidebar's right edge. We instead clip the things that USED to need
-     this via the .sidebar-nav scroll region. */
+  padding: 0 var(--s-2);
   overflow: visible;
   transition: padding .25s cubic-bezier(.4, 0, .2, 1);
 }
 .sidebar[data-collapsed="true"] {
-  padding: var(--s-4) var(--s-2);
+  padding: 0;
+}
+/* Collapsed: every clickable row becomes a 28x28 square, centered in
+   the narrow sidebar column. Width auto + margin auto so the square
+   sits centered regardless of what padding the parent has. */
+.sidebar[data-collapsed="true"] .nav-item,
+.sidebar[data-collapsed="true"] .util-item,
+.sidebar[data-collapsed="true"] .sidebar-brand-button,
+.sidebar[data-collapsed="true"] .tree-folder-head,
+.sidebar[data-collapsed="true"] .tree-session {
+  width: 28px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0;
+  margin: 0 auto;
+  justify-content: center;
+  gap: 0;
+}
+.sidebar[data-collapsed="true"] .sidebar-top {
+  padding: 0;
+  min-height: 40px;
+  justify-content: center;
+}
+.sidebar[data-collapsed="true"] .sidebar-top .collapse-toggle {
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin: 0;
 }
 
 .sidebar-brand {
   display: flex;
   align-items: center;
   gap: var(--s-2);
-  /* Top padding matches .main's so the brand mark sits on the same
-     horizontal band as the page-title. */
-  padding: var(--s-4) var(--s-2);
-  min-height: 56px;
+  padding: 0 var(--s-2);
+  min-height: 28px;
+  height: 28px;
 }
 .brand-mark {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  flex: 0 0 32px;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
   background: transparent;
+  color: var(--accent);
 }
-.brand-mark svg { display: block; }
+.brand-mark svg { display: block; width: 20px; height: 20px; }
 .brand-name {
-  font-size: 19px;
+  font-size: 14px;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: var(--ink);
   white-space: nowrap;
   opacity: 1;
+  line-height: 1;
   transition: opacity .15s ease;
 }
 .brand-dot { color: var(--accent); }
-.sidebar[data-collapsed="true"] .brand-name { opacity: 0; pointer-events: none; }
+.sidebar[data-collapsed="true"] .brand-name { display: none; }
+.sidebar[data-collapsed="true"] .brand-version { display: none; }
+.sidebar[data-collapsed="true"] .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
 
 .sidebar-nav {
   display: flex;
@@ -69,17 +96,16 @@
   min-height: 42px;
   border-radius: var(--r-sm);
   cursor: pointer;
-  color: var(--ink-mid);
+  color: var(--ink);
   font-family: var(--body);
-  font-size: 14.5px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 400;
   text-align: left;
   transition: background .12s ease, color .12s ease;
   position: relative;
 }
 .nav-item:hover, .util-item:hover {
   background: var(--sidebar-hover);
-  color: var(--ink);
 }
 .nav-item[aria-selected="true"] {
   background: var(--sidebar-active);
@@ -125,6 +151,13 @@
   flex: 1;
 }
 .sidebar[data-collapsed="true"] .nav-label { opacity: 0; pointer-events: none; }
+/* Collapsed sidebar (60px wide): hide the label entirely so the icon
+   centers in the narrow column instead of being pushed off-screen by
+   the still-laid-out (but invisible) label text. Same for the badge. */
+.sidebar[data-collapsed="true"] .nav-label,
+.sidebar[data-collapsed="true"] .nav-badge {
+  display: none;
+}
 
 .nav-badge {
   font-family: var(--mono);
@@ -156,7 +189,106 @@
 
 .sidebar-foot {
   margin-top: auto;
-  padding-top: var(--s-2);
+  padding-top: 2px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 2px;
+}
+/* Brand block at the bottom of the sidebar. Clickable: navigates to
+   About. Matches nav-item height so collapsed sidebar reads as a
+   uniform column of equally-sized icons. */
+.sidebar-brand-button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 0 var(--s-2);
+  min-height: 28px;
+  height: 28px;
+  cursor: pointer;
+  border-radius: 4px;
+  text-align: left;
+  font: inherit;
+  color: var(--ink);
+  transition: background .12s;
+}
+.sidebar-brand-button[aria-selected="true"],
+.sidebar-brand-button[aria-selected="true"]:hover {
+  background: var(--sidebar-active);
+  font-weight: 500;
+}
+.sidebar-brand-button:hover { background: var(--sidebar-hover); }
+.sidebar-foot .brand-mark {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Lock the SVG box exactly to 14×14 so flex centering doesn't fight
+     the SVG's intrinsic dimensions; otherwise the mark drifts a couple
+     pixels low because <svg width=32 height=32> wants more vertical
+     space than the 14px row gives it. */
+  line-height: 0;
+}
+.sidebar-foot .brand-mark svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+.sidebar-foot .brand-name {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+}
+.brand-version {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Top strip · single row, currently hosts only the collapse toggle on
+   the right. Matches the page-title-bar height so the topmost row of
+   the window reads as one unified band. */
+.sidebar-top {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  min-height: 40px;
+  margin-bottom: var(--s-2);
+}
+.collapse-toggle {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--ink);
+  transition: background .12s;
+  min-height: 0;
+  flex: 0 0 40px;
+}
+.collapse-toggle:hover { background: var(--sidebar-hover); }
+.collapse-toggle .nav-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+}
+.sidebar[data-collapsed="true"] .sidebar-top {
+  justify-content: center;
 }
 
 /* chevron flips when the sidebar is collapsed; the rest is util-item styling */
@@ -187,9 +319,9 @@
 }
 .sidebar-resize-handle:hover,
 body.is-resizing-sidebar .sidebar-resize-handle {
-  background: linear-gradient(to right, transparent 0, transparent 2px,
-                              var(--ink-mid) 2px, var(--ink-mid) 3px,
-                              transparent 3px);
+  /* Wash the hit area in the accent color so the user knows the edge is
+     live and so the theme follows their accent choice. */
+  background: var(--accent-soft);
 }
 /* While dragging, freeze global cursor + suppress text selection so the
    whole page tracks resize cleanly even if pointer leaves the handle. */
@@ -200,3 +332,270 @@ body.is-resizing-sidebar {
 body.is-resizing-sidebar * {
   cursor: col-resize !important;
 }
+
+/* === v1.0 codex-style sidebar tree === */
+
+/* Compact top nav: smaller height + smaller font, so the folder tree
+   below dominates. */
+.sidebar-nav.compact .nav-item {
+  font-size: 13px;
+  padding: 4px 10px;
+  min-height: 30px;
+  gap: 10px;
+  border-radius: 6px;
+  position: relative;
+  letter-spacing: -0.005em;
+  transition: background .14s ease, color .14s ease;
+}
+.sidebar-nav.compact .nav-item:hover { background: var(--sidebar-hover); }
+.sidebar-nav.compact .nav-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+}
+.sidebar[data-collapsed="true"] .sidebar-nav.compact .nav-item {
+  justify-content: center;
+  gap: 0;
+  padding: 8px 0;
+}
+.sidebar-nav.compact .nav-item.is-active {
+  background: var(--sidebar-active);
+  color: var(--ink);
+  font-weight: 500;
+}
+
+/* Tree section header. Looks like codex: uppercase label, small +
+   button on hover. */
+.tree {
+  margin-top: var(--s-3);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  /* Only vertical scroll when the tree is taller than the rail.
+     overflow-y alone leaves overflow-x at the default `auto`, which
+     gives us an unwanted horizontal scrollbar whenever a session
+     title (or its hover row padding) brushes the viewport edge.
+     overflow-x:hidden truncates with ellipsis instead — labels
+     already do `text-overflow: ellipsis`. */
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+  padding-bottom: var(--s-3);
+}
+.tree-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  min-height: 24px;
+  height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
+  color: var(--ink-mid);
+}
+.tree-head-action {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 2px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--ink);
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.6;
+  transition: opacity .12s, background .12s;
+}
+.tree-head-action:hover { opacity: 1; background: var(--sidebar-hover); }
+.tree-head-action svg { width: 14px; height: 14px; }
+
+/* Folder grouping. Chevron rotates on expand. */
+.tree-folder {
+  display: flex;
+  flex-direction: column;
+}
+.tree-folder[data-dnd-over="true"] > .tree-folder-head {
+  box-shadow: 0 -2px 0 var(--accent) inset;
+}
+.tree-folder-head[draggable="true"] {
+  cursor: grab;
+}
+.tree-folder-head[draggable="true"]:active {
+  cursor: grabbing;
+}
+.tree-folder-head {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  width: 100%;
+  text-align: left;
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--ink);
+  cursor: pointer;
+  border-radius: 4px;
+  font-family: var(--body);
+  min-height: 28px;
+}
+.tree-folder-head:hover { background: var(--sidebar-hover); }
+.tree-folder-icon {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  color: var(--ink);
+}
+.tree-folder-icon svg { width: 100%; height: 100%; }
+.tree-folder-head.is-open .tree-folder-icon { color: var(--ink); }
+.tree-folder-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tree-folder-count {
+  font-size: 13px;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+  padding: 0 5px;
+  background: transparent;
+  border-radius: 999px;
+  opacity: 0.6;
+}
+.tree-folder-actions {
+  display: none;
+  gap: 2px;
+}
+.tree-folder-head:hover .tree-folder-actions { display: inline-flex; }
+.tree-folder-action {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  font-size: 13px;
+  color: var(--ink);
+  cursor: pointer;
+  opacity: 0.6;
+  border-radius: 3px;
+}
+.tree-folder-action:hover { opacity: 1; background: var(--sidebar-hover); }
+.tree-folder-action svg { width: 12px; height: 12px; }
+
+.tree-folder-body {
+  display: flex;
+  flex-direction: column;
+  /* No left padding here — the session rows themselves get padding-left
+     that lines their label up under the folder name. Keeping the bg
+     extend across the full sidebar width when selected/hovered. */
+  padding-left: 0;
+}
+.tree-empty {
+  font-size: 13px;
+  color: var(--ink);
+  padding: 3px 8px;
+  font-style: italic;
+  opacity: 0.5;
+}
+
+/* Session rows. Codex uses a colored dot + truncated label + tiny
+   timestamp on the right. */
+.tree-session {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* Match the folder head: 8px left padding, then a 14px icon column
+     (the colored dot lives here, sized 8px and centered), then 8px gap
+     before the label — lines the label up exactly under the folder name. */
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--ink);
+  font-family: var(--body);
+  user-select: none;
+  transition: background .1s;
+  min-height: 28px;
+}
+.tree-session:hover { background: var(--sidebar-hover); }
+.tree-session.is-active {
+  background: var(--sidebar-active);
+  font-weight: 500;
+}
+.tree-dot {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.tree-dot::after {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ink-faint);
+  transition: background .15s ease;
+}
+.tree-session.is-running .tree-dot::after {
+  background: var(--green);
+  box-shadow: 0 0 0 3px rgba(74, 138, 74, 0.18);
+  animation: tree-dot-pulse 1.8s ease-in-out infinite;
+}
+.tree-session.is-stopped .tree-dot::after {
+  background: var(--ink-faint);
+  box-shadow: none;
+}
+@keyframes tree-dot-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 138, 74, 0.45); }
+  50%      { box-shadow: 0 0 0 5px rgba(74, 138, 74, 0); }
+}
+.tree-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tree-session-actions {
+  display: none;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.tree-session:hover .tree-session-actions { display: inline-flex; }
+.tree-session:hover .tree-meta { display: none; }
+.tree-session-action {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  color: var(--ink);
+  cursor: pointer;
+  opacity: 0.6;
+  border-radius: 3px;
+}
+.tree-session-action:hover { opacity: 1; background: var(--sidebar-hover); }
+.tree-session-action svg { width: 12px; height: 12px; }
+.tree-meta {
+  font-size: 13px;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  opacity: 0.5;
+}