@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/css/cards.css

@@ -2,10 +2,15 @@
 
 .card {
   background: var(--bg-elev);
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
   overflow: hidden;
   box-shadow: var(--shadow);
+  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
+}
+.card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--border);
 }
 
 .card-head {
@@ -56,6 +61,7 @@
   font-weight: 600;
   letter-spacing: -0.012em;
   color: var(--ink);
+  line-height: 1.2;
 }
 .card-title .title-icon {
   color: var(--ink-mid);
@@ -92,10 +98,11 @@
 .about-mark { display: inline-flex; }
 .about-mark svg { width: 48px; height: 48px; }
 .about-name {
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: var(--ink);
+  line-height: 1.1;
 }
 .about-version {
   font-family: var(--mono);
@@ -104,6 +111,33 @@
   margin-left: 6px;
   font-weight: 400;
 }
+.about-version-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.about-version-line {
+  font-size: 13px;
+  color: var(--ink);
+}
+.about-update-line {
+  margin-top: 4px;
+  font-size: 12.5px;
+  color: var(--ink-mid);
+  font-weight: 500;
+}
+.about-version-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.muted-text {
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  line-height: 1.5;
+}
 .about-tagline {
   margin-top: 2px;
   font-size: 13px;

package/public/css/feedback.css

@@ -111,70 +111,154 @@
 /* Offline banner · shown when /api/health is unreachable. Sticks to the
    top of the main column above all cards. Contains a ccsm:// link that
    asks Windows to spawn the backend. */
-.offline-banner {
-  background: #fff7e8;
-  border: 1px solid #d4b27a;
-  border-radius: var(--r-sm);
-  padding: var(--s-3) var(--s-5);
-  position: sticky;
-  top: var(--s-3);
-  z-index: 50;
-  box-shadow: 0 3px 10px -8px rgba(26, 24, 21, 0.15);
-}
-.offline-banner-inner {
+/* Offline overlay — full-screen modal that blocks all interaction
+   until the backend comes back. Z-index above dialogs / toasts. */
+.offline-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(26, 24, 21, 0.55);
+  backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
-  gap: var(--s-3);
+  justify-content: center;
+  padding: var(--s-6);
+  animation: panel-in .2s ease-out;
 }
-.offline-banner-text {
-  flex: 1;
+.offline-card {
+  background: var(--bg-elev);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--r-lg);
+  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.4);
+  padding: var(--s-8) var(--s-8) var(--s-6);
+  max-width: 480px;
+  width: 100%;
+  text-align: center;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  font-size: 13px;
-  color: var(--ink);
+  align-items: center;
+  gap: var(--s-3);
+}
+.offline-brand {
+  width: 56px;
+  height: 56px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.offline-brand svg { width: 100%; height: 100%; }
+.offline-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
 }
-.offline-banner-text .muted-text {
-  font-size: 11.5px;
+.offline-copy {
+  margin: 0;
   color: var(--ink-mid);
+  font-size: 13.5px;
+  line-height: 1.55;
+  max-width: 380px;
 }
-.offline-banner-actions { display: flex; gap: var(--s-2); }
-.offline-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--red);
-  flex: 0 0 10px;
-  animation: dirty-pulse 2s ease-in-out infinite;
+.offline-actions {
+  margin-top: var(--s-2);
+}
+.offline-actions .action.big {
+  padding: 10px 22px;
+  font-size: 14px;
+  font-weight: 500;
+}
+.offline-fallback {
+  margin-top: var(--s-3);
+  width: 100%;
+  text-align: left;
+  font-size: 12px;
+  color: var(--ink-mid);
 }
+.offline-fallback summary {
+  cursor: pointer;
+  text-align: center;
+  color: var(--ink-muted);
+}
+.offline-fallback-body {
+  margin-top: var(--s-3);
+  padding: var(--s-3);
+  background: var(--bg);
+  border-radius: var(--r-sm);
+}
+.offline-fallback-body pre {
+  margin: var(--s-2) 0;
+  padding: 8px 10px;
+  background: var(--ink);
+  color: var(--bg-elev);
+  border-radius: 4px;
+  font-family: var(--mono);
+  font-size: 12px;
+  overflow-x: auto;
+}
+.offline-fallback-body p { margin: 0; }
+
+/* Legacy banner styles (unused after v1.0 redesign but kept tiny in
+   case external CSS references them). */
+.offline-banner { display: none; }
 
 /* Toast bottom-right — auto-hides via JS */
 .toast {
   position: fixed;
-  bottom: var(--s-6);
-  right: var(--s-6);
+  bottom: var(--s-5);
+  right: var(--s-5);
   z-index: 100;
-  max-width: 420px;
-  padding: var(--s-3) var(--s-4);
-  background: var(--bg-elev);
-  border: 1px solid var(--border-strong);
-  border-left: 3px solid var(--ink);
-  border-radius: var(--r-sm);
-  font-size: 13px;
-  color: var(--ink);
+  max-width: 380px;
+  padding: 11px 16px 11px 14px;
+  background: var(--ink);
+  color: var(--bg);
+  border: 0;
+  border-radius: 6px;
+  font-size: 12.5px;
+  font-weight: 400;
   letter-spacing: -0.005em;
+  line-height: 1.45;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   opacity: 0;
-  transform: translateY(8px);
-  transition: opacity .2s ease, transform .2s ease;
+  transform: translateY(10px) scale(0.98);
+  transform-origin: bottom right;
+  transition:
+    opacity .22s cubic-bezier(.4, 0, .2, 1),
+    transform .28s cubic-bezier(.34, 1.4, .64, 1);
   pointer-events: none;
-  box-shadow: var(--shadow-md);
+  box-shadow:
+    0 10px 32px -8px rgba(26, 24, 21, 0.30),
+    0 2px 6px rgba(26, 24, 21, 0.12),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+.toast::before {
+  content: "OK";
+  font-family: var(--mono);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  font-weight: 500;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.10);
+  color: rgba(255, 255, 255, 0.75);
+  flex-shrink: 0;
+  line-height: 1;
 }
 .toast.show {
   opacity: 1;
-  transform: translateY(0);
+  transform: translateY(0) scale(1);
+}
+.toast.error::before {
+  content: "ERR";
+  background: rgba(183, 63, 63, 0.85);
+  color: #fff;
+}
+.toast.ok::before {
+  content: "OK";
+  background: rgba(74, 138, 74, 0.85);
+  color: #fff;
 }
-.toast.error { border-left-color: var(--red); }
-.toast.ok    { border-left-color: var(--green); }
 
 /* Sticky "you have unsaved changes" banner above the Configure card */
 .dirty-banner {

package/public/css/forms.css

@@ -11,25 +11,35 @@
   font-size: 13px;
   font-weight: 500;
   letter-spacing: -0.005em;
-  border-radius: var(--r-sm);
+  border-radius: 6px;
   cursor: pointer;
-  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
+  transition:
+    background .14s ease,
+    border-color .14s ease,
+    color .14s ease,
+    box-shadow .14s ease,
+    transform .14s cubic-bezier(.4, 0, .2, 1);
   white-space: nowrap;
   box-shadow: var(--shadow-sm);
-  /* Buttons always lay out as icon-left + text-right, gap between them,
-     and the cluster is centered inside the button's box. Anchor links
-     using .action (e.g. About page) inherit the same layout. */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   text-decoration: none;
+  position: relative;
 }
 .action:hover {
   background: var(--bg);
   border-color: var(--ink-faint);
+  box-shadow: 0 2px 4px -2px rgba(26, 24, 21, 0.10);
+  transform: translateY(-0.5px);
+}
+.action:active { transform: translateY(0.5px); box-shadow: var(--shadow-sm); }
+.action:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 24, 21, 0.10);
+  border-color: var(--ink);
 }
-.action:active { transform: translateY(0.5px); }
 .action:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
 .action.primary {
   background: var(--ink);
@@ -39,6 +49,7 @@
 .action.primary:hover {
   background: #000;
   border-color: #000;
+  box-shadow: 0 4px 12px -4px rgba(26, 24, 21, 0.35);
 }
 .action.small { font-size: 12px; padding: 4px 10px; }
 .action.tiny  { font-size: 11px; padding: 3px 8px; }
@@ -64,11 +75,11 @@
   background: var(--bg-elev);
   border: 1px solid var(--border-strong);
   color: var(--ink);
-  padding: 7px 12px;
+  padding: 8px 12px;
   font-family: var(--body);
   font-size: 13px;
-  border-radius: var(--r-sm);
-  transition: border-color .12s ease, box-shadow .12s ease;
+  border-radius: 6px;
+  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
   width: 100%;
   max-width: 480px;
 }
@@ -203,6 +214,7 @@ input[type="checkbox"]:checked::after {
   font-weight: 500;
   cursor: pointer;
   user-select: none;
+  appearance: none;
   transition: all .12s ease;
   border-radius: 999px;
 }
@@ -233,7 +245,7 @@ input[type="checkbox"]:checked::after {
 /* Two-column field grid used inside the Configure card */
 .config-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   gap: var(--s-5) var(--s-6);
   align-items: start;
 }
@@ -281,40 +293,88 @@ input[type="checkbox"]:checked::after {
 .repos-table tbody td:last-child { padding-right: var(--s-2); }
 .repos-table tbody td input { font-size: 12px; max-width: none; }
 
-/* Theme accent picker (Configure tab). 8 swatches + native color picker
-   + hex input + reset. Swatches are filled circles; the active one wears
-   a subtle ring in --ink so it pops on any accent. */
+/* Theme accent picker (Configure tab). Pill chips with color dot + name;
+   active chip fills with its accent color. A "Custom" chip toggles an
+   inline color picker + hex input + reset. */
 .accent-picker {
   display: flex;
   flex-direction: column;
   gap: var(--s-3);
 }
-.accent-swatches {
+.accent-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--s-2);
+  gap: 6px;
 }
-.accent-swatch {
+.accent-chip {
   appearance: none;
-  width: 24px;
-  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 11px 5px 9px;
+  border: 1px solid var(--border);
   border-radius: 999px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: var(--bg-elev);
+  color: var(--ink-mid);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  line-height: 1;
   cursor: pointer;
-  padding: 0;
-  transition: transform .12s ease, box-shadow .12s ease;
+  transition: background .12s ease, color .12s ease,
+              border-color .12s ease, transform .12s ease,
+              box-shadow .12s ease;
 }
-.accent-swatch:hover { transform: scale(1.08); }
-.accent-swatch.is-active {
-  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
+.accent-chip:hover {
+  color: var(--ink);
+  border-color: var(--ink-faint);
+  transform: translateY(-1px);
 }
+.accent-chip-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--c, var(--ink-faint));
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  flex: none;
+}
+.accent-chip-plus {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  color: var(--ink-mid);
+  font-size: 14px;
+  line-height: 1;
+}
+.accent-chip.is-active {
+  background: var(--c);
+  border-color: var(--c);
+  color: #fff;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
+}
+.accent-chip.is-active .accent-chip-dot {
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: none;
+}
+.accent-chip-custom {
+  border-style: dashed;
+}
+.accent-chip-custom.is-open:not(.is-active) {
+  border-style: solid;
+  color: var(--ink);
+  border-color: var(--ink-faint);
+}
+
 .accent-custom {
   display: flex;
   align-items: center;
   gap: var(--s-2);
+  padding-top: 2px;
 }
 .accent-custom input[type="color"] {
-  width: 36px;
+  width: 32px;
   height: 28px;
   padding: 0;
   border: 1px solid var(--border);
@@ -331,3 +391,15 @@ input[type="checkbox"]:checked::after {
   border-radius: var(--r-sm);
   background: var(--bg-elev);
 }
+.accent-reset {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 4px 6px;
+  font-size: 12px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: color .12s ease, background .12s ease;
+}
+.accent-reset:hover { color: var(--ink-mid); background: var(--bg); }

package/public/css/layout.css

@@ -3,7 +3,13 @@
 .app {
   display: grid;
   grid-template-columns: var(--sidebar-w) 1fr;
-  min-height: 100vh;
+  height: 100vh;
+  /* Pin to viewport height (not min-height) — child flex columns set
+     min-height:0 and rely on a bounded parent height to compute their own
+     space. With min-height:100vh, a transient xterm resize that briefly
+     reports a too-large cell count makes the WebGL canvas grow, .session-pane
+     grows to fit, .main grows, .app grows... cascading into a multi-hundred-
+     thousand-pixel tall page. height:100vh caps the cascade. */
   transition: grid-template-columns .25s cubic-bezier(.4, 0, .2, 1);
 }
 .app:has(.sidebar[data-collapsed="true"]) {
@@ -19,8 +25,13 @@ body.is-resizing-sidebar .app {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: var(--s-8) var(--s-10) var(--s-6);
-  gap: var(--s-6);
+  /* grid items default to min-height:auto which lets internal content
+     (eg a misbehaving xterm canvas that briefly reports an absurd height)
+     overflow the grid track and balloon the whole page. min-height:0
+     restores the expected "fit my grid cell" behaviour. */
+  min-height: 0;
+  padding: 0 var(--s-4);
+  gap: var(--s-2);
 }
 
 .page-head {
@@ -34,6 +45,7 @@ body.is-resizing-sidebar .app {
 .page-head-inner { min-width: 0; }
 
 .page-title {
+  font-family: var(--display);
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -0.024em;
@@ -71,42 +83,78 @@ body.is-resizing-sidebar .app {
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .tab-panel {
   display: none;
   flex-direction: column;
-  gap: var(--s-6);
+  gap: var(--s-4);
+  min-height: 0;
 }
 .tab-panel[data-active] {
   display: flex;
-  animation: panel-in .35s cubic-bezier(.4, 0, .2, 1);
-}
-@keyframes panel-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0); }
+  flex: 1;
 }
 
-.footer-status {
-  margin-top: auto;
-  padding-top: var(--s-4);
-  border-top: 1px solid var(--border-soft);
+/* Per-page title strip — height matches the sidebar collapse-toggle
+   (28px) so the topmost row of the window reads as one unified band. */
+.page-title-bar {
   display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--s-3);
+  height: 40px;
+  margin: 0 calc(-1 * var(--s-4)) 0;
+  padding: 0 var(--s-5);
+  /* Replace the hard inset shadow rule with a soft gradient fade — gives
+     the top band a printed-paper masthead feeling rather than a CSS
+     divider. */
+  background:
+    linear-gradient(to bottom, rgba(216, 212, 198, 0.0) 0%, rgba(216, 212, 198, 0.0) calc(100% - 1px), var(--ui-border-soft) 100%);
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+.page-title-bar-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
   gap: var(--s-2);
-  font-size: 11px;
-  color: var(--ink-muted);
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  line-height: 1.4;
 }
-.footer-status .fs-key {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 10px;
-  color: var(--ink-faint);
+.page-title-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+}
+.session-title-text {
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: -0.005em;
+  color: var(--ink);
+  flex-shrink: 0;
 }
-.footer-status .fs-val {
+.session-title-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ink-muted);
+  font-size: 11.5px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.session-title-meta .mono {
   font-family: var(--mono);
-  font-size: 11px;
-  color: var(--ink-mid);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 40vw;
 }
-.footer-status .fs-divider { color: var(--ink-faint); margin: 0 var(--s-1); }