@bakapiano/ccsm 0.8.4 → 0.10.0

package/public/css/terminals.css

@@ -91,6 +91,50 @@
   flex: 1;
   min-height: 0;
   width: 100%;
+  /* IME composition (Chinese/Japanese pinyin) lives in absolutely-positioned
+     .xterm-helper-textarea + .composition-view that grow with the composed
+     string. Near the right edge they overflow the viewport and trigger a
+     horizontal scrollbar that visually "pushes" the layout. Clip here so
+     the overflow is silently absorbed instead of expanding the page.
+     Do NOT touch the textarea/composition-view's own text properties —
+     xterm relies on their single-line behaviour to keep IME events firing
+     correctly (forcing pre-wrap / break-all eats compositionupdate events
+     in Chromium and Chinese input stops working entirely). */
+  overflow: hidden;
+  contain: layout;
+}
+/* While the user is composing (IME), pin the helper textarea to the right
+   edge of the terminal so it grows leftward instead of pushing the layout
+   rightward. Only touches positioning — NOT width / wrap / max-width, which
+   would break Chromium's compositionupdate event flow and stop Chinese
+   input from working. The class is toggled by TerminalView.js. */
+.terminal-host.is-composing .xterm-helper-textarea {
+  left: auto !important;
+  right: 0 !important;
+  text-align: right;
+  /* xterm un-hides the textarea during composition so the user can see the
+     composed string inline. We've moved it to the right edge to stop it
+     pushing layout — but that means the composed pinyin would now visibly
+     appear on the right. Hide its glyphs (caret + text) so the user only
+     sees the OS-native IME candidate popup, which floats independently
+     and is unaffected. */
+  color: transparent !important;
+  caret-color: transparent !important;
+  background: transparent !important;
+  text-shadow: none !important;
+}
+/* xterm also overlays a .composition-view (a small box at the cursor with
+   the in-progress string + a gold caret using THEME.cursor). We can't
+   display:none it — Chromium needs it in the layout tree to keep the IME
+   compositionupdate events flowing — but we can make it visually invisible
+   while leaving it laid out. */
+.terminal-host .composition-view {
+  opacity: 0 !important;
+  color: transparent !important;
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  pointer-events: none;
 }
 /* Don't override xterm's background — its renderer (canvas/WebGL) assumes
    an opaque surface and ghosts on scroll if we force transparent. The
@@ -110,3 +154,141 @@
 }
 
 .terminal-empty-page { width: 100%; }
+
+/* === v1.0 session pane === */
+
+.sessions-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  /* Decorative faint hairline grid, only in this empty state — adds
+     editorial atmosphere without affecting any real content view. */
+  background-image:
+    linear-gradient(to right, rgba(216, 212, 198, 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(216, 212, 198, 0.5) 1px, transparent 1px);
+  background-size: 56px 56px;
+  background-position: center;
+  position: relative;
+}
+.sessions-empty::before,
+.sessions-empty::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.sessions-empty::before {
+  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 75%);
+}
+.sessions-empty-card {
+  text-align: center;
+  padding: var(--s-12) var(--s-10);
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  max-width: 440px;
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--shadow-lg);
+}
+.sessions-empty-card::before {
+  content: "·  EMPTY  ·";
+  display: block;
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.28em;
+  color: var(--ink-faint);
+  margin-bottom: var(--s-4);
+}
+.sessions-empty-card h2 {
+  margin: 0 0 var(--s-3);
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+  color: var(--ink);
+}
+.sessions-empty-card p {
+  margin: 0 0 var(--s-5);
+  color: var(--ink-mid);
+  font-size: 13.5px;
+  line-height: 1.55;
+}
+
+.session-pane {
+  display: flex;
+  flex-direction: column;
+  /* Fill the entire content area edge-to-edge — negative horizontal margin
+     cancels .main's horizontal padding so the terminal touches the window
+     edges (and the sidebar border) with no surrounding chrome. */
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  margin: 0 calc(-1 * var(--s-4));
+  /* Cancel the tab-panel gap above so the terminal sits flush under the
+     title bar with no white band. */
+  margin-top: calc(-1 * var(--s-4));
+  background: var(--bg-elev);
+  overflow: hidden;
+}
+.session-pane-head {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-4);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+  flex-wrap: wrap;
+}
+.session-pane-title {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+.session-pane-title h2 {
+  margin: 0;
+  font-size: 14.5px;
+  font-weight: 600;
+}
+.session-pane-meta {
+  display: flex;
+  gap: var(--s-3);
+  align-items: center;
+  font-size: 11.5px;
+  flex: 1;
+  overflow: hidden;
+}
+.session-pane-meta .mono {
+  font-family: var(--mono);
+  color: var(--ink-mid);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+}
+.session-pane-meta .muted {
+  color: var(--ink-muted);
+}
+.session-pane-actions {
+  display: flex;
+  gap: var(--s-2);
+  flex-shrink: 0;
+}
+.session-pane-body {
+  flex: 1;
+  min-height: 0;
+  background: #1a1815;
+}
+.session-pane-body .terminal-host {
+  height: 100%;
+}
+.session-pane-body .terminal-empty {
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-3);
+  height: 100%;
+}

package/public/css/tokens.css

@@ -10,6 +10,13 @@
   --sidebar-hover: #f0ece0;
   --sidebar-active: #e8e3d5;
 
+  /* Neutral UI chrome — borders, footer strip, etc. These are NEVER
+     re-derived from the accent so dividers stay calm regardless of
+     theme choice. */
+  --ui-border:     #d8d4c6;
+  --ui-border-soft: #e6e2d4;
+  --ui-bg:         #f0ece0;
+
   /* Borders & rules */
   --border:        #e8e3d5;
   --border-soft:   #ece8da;
@@ -24,10 +31,10 @@
   /* Accent — Claude warm copper. Slightly desaturated from raw #c45f3f so
      solid-fill buttons feel calm against the cream surfaces, while still
      reading as the same brand hue in star icons, focus rings, etc. */
-  --accent:        #b3614a;
-  --accent-deep:   #8f4a36;
-  --accent-soft:   rgba(179, 97, 74, 0.10);
-  --accent-softer: rgba(179, 97, 74, 0.04);
+  --accent:        #2f6fa3;
+  --accent-deep:   #25577f;
+  --accent-soft:   rgba(47, 111, 163, 0.10);
+  --accent-softer: rgba(47, 111, 163, 0.04);
 
   /* Status */
   --green:  #4a8a4a;
@@ -36,19 +43,21 @@
   --blue:   #4a73a5;
 
   /* Type */
-  --body: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
-  --mono: "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
+  --body:    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --display: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --mono:    "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
 
   /* Scale */
   --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
   --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
   --s-12: 48px; --s-16: 64px;
 
-  /* Radius */
-  --r-sm: 6px;
-  --r:    8px;
-  --r-md: 10px;
-  --r-lg: 14px;
+  /* Radius — tightened in v1.0 for a more codex-like crisp feel.
+     999px stays in code where pills are intentional (status dots etc). */
+  --r-sm: 3px;
+  --r:    4px;
+  --r-md: 5px;
+  --r-lg: 6px;
 
   /* Shadow — soft, like print on cream */
   --shadow-sm: 0 1px 0 rgba(26, 24, 21, 0.04);
@@ -56,8 +65,15 @@
                0 1px 0 rgba(26, 24, 21, 0.03);
   --shadow-md: 0 4px 12px -2px rgba(26, 24, 21, 0.08),
                0 1px 0 rgba(26, 24, 21, 0.04);
+  --shadow-lg: 0 18px 40px -16px rgba(26, 24, 21, 0.18),
+               0 4px 12px -4px rgba(26, 24, 21, 0.10);
+
+  /* Subtle paper grain — applied as a layered background on .app to give
+     surfaces the texture of laid paper rather than flat color. SVG noise
+     keeps it crisp at any zoom level. */
+  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
 
   /* Sidebar geometry */
   --sidebar-w:           232px;
-  --sidebar-w-collapsed: 60px;
+  --sidebar-w-collapsed: 44px;
 }

package/public/css/wco.css

@@ -12,6 +12,8 @@
  */
 
 .sidebar-brand,
+.sidebar-top,
+.page-title-bar,
 .page-head,
 .page-head-inner,
 .page-title,
@@ -27,17 +29,16 @@ button, a, input, select, textarea, label,
 .action, .server-status,
 .star-btn, .rename-btn, .card-fold, .modal-close,
 .chip, .radio, .fab,
-.ph-stat, .ph-divider {
+.ph-stat, .ph-divider,
+.page-title-bar-actions,
+.session-title-action {
   -webkit-app-region: no-drag;
   app-region: no-drag;
 }
 
-/* `user-select: none` on the drag-target text is needed so clicking the
-   page title doesn't start a text selection instead of a window drag. But
-   we only want this in PWA-like contexts — in a regular browser tab the
-   user should still be able to select the title text. Runtime JS adds
-   `body.is-app` when not in display-mode:browser; see main.js. */
 body.is-app .sidebar-brand,
+body.is-app .sidebar-top,
+body.is-app .page-title-bar,
 body.is-app .page-head,
 body.is-app .page-head-inner,
 body.is-app .page-title,
@@ -46,25 +47,52 @@ body.is-app .page-subtitle {
   -webkit-user-select: none;
 }
 
-/* In an app window, .main and .sidebar's own top padding is "blank space"
-   that has no drag region — clicking the topmost 32px does nothing. Move
-   that padding into the draggable child elements (.sidebar-brand and
-   .page-head) so the windowtop is grabbable all the way to y=0. Visually
-   nothing shifts; behaviourally the OS-title-bar zone now responds. */
+/* In an app/PWA window, the OS title bar is hidden and only floating
+   close/max/min controls remain in the top-right. The 40px top band of
+   ccsm (sidebar-top + page-title-bar) IS that title bar — it's already
+   tall enough, sits at y=0 with no extra padding, and gets a drag region
+   so the user can grab anywhere along it to move the window. */
 body.is-app .sidebar { padding-top: 0; }
 body.is-app .main    { padding-top: 0; }
-body.is-app .sidebar-brand {
-  padding-top: calc(var(--s-4) + var(--s-4)); /* 32px = old sidebar.pt + old brand.pt */
+
+/* Reserve room on the right of page-title-bar so its action buttons don't
+   slide under the floating OS controls. 150px covers Windows controls
+   (~46px each × 3) with breathing room; macOS traffic lights are on the
+   left so this padding is harmless there. WCO override below uses the
+   precise env() value when available. */
+body.is-app .page-title-bar {
+  padding-right: calc(var(--s-4) + 150px);
+}
+
+body.is-app .page-title,
+body.is-app .page-subtitle {
+  display: none;
 }
 body.is-app .page-head {
-  padding-top: var(--s-8); /* 32px = old main.pt */
+  padding-bottom: 0;
+  border-bottom: 0;
+  align-items: center;
+  min-height: 28px;
+}
+
+/* PWA / WCO / --app= mode: shrink the top band to 32px so its mid-line
+   matches the OS-floated close/max/min icons (which sit in a fixed ~32px
+   bar at y=0 and can't be moved). Outside app mode we keep the roomier
+   40px band — see sidebar.css / layout.css. */
+body.is-app .page-title-bar,
+body.is-app .sidebar-top {
+  height: 32px;
+  min-height: 32px;
+}
+body.is-app .sidebar-brand,
+body.is-app .sidebar-brand-button,
+body.is-app .collapse-toggle {
+  height: 32px;
+  min-height: 32px;
 }
 
-/* WCO-only · the OS title bar is fully gone, so right-pad the page-head
-   so the meta cluster doesn't slide under the floating close/max/min
-   controls. `.main`'s own 32px top padding already clears their height. */
 @media (display-mode: window-controls-overlay) {
-  .page-head {
-    padding-right: calc(var(--s-10) + 100vw - env(titlebar-area-width, 100vw));
+  body.is-app .page-title-bar {
+    padding-right: calc(var(--s-4) + 100vw - env(titlebar-area-width, 100vw));
   }
 }