synabun 2.0.5 → 2.0.9

package/neural-interface/public/shared/styles.css

@@ -146,17 +146,19 @@
     height: var(--fs-locked-height);
   }
 
-  /* ── Window Controls Overlay (PWA standalone on macOS / Windows / Linux) ──
+  /* ── Window Controls Overlay (PWA standalone on macOS / Windows / Linux, and the SynaBun desktop app) ──
        Uses body.wco-active (toggled by JS via navigator.windowControlsOverlay)
-       for higher specificity than base #title-bar rules.
+       for higher specificity than base #title-bar rules. The --desktop-titlebar-*
+       variables stand in for the env() ones only inside the desktop app when its
+       window has no overlay API (desktop-titlebar.js); the PWA never sets them.
        ── */
   body.wco-active #title-bar {
     -webkit-app-region: drag;
-    padding-left: calc(env(titlebar-area-x, 0px) + 10px);
-    padding-right: max(18px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 10px));
+    padding-left: calc(env(titlebar-area-x, var(--desktop-titlebar-x, 0px)) + 10px);
+    padding-right: max(18px, calc(100vw - env(titlebar-area-x, var(--desktop-titlebar-x, 0px)) - env(titlebar-area-width, var(--desktop-titlebar-width, 100vw)) + 10px));
     padding-top: 0;
     padding-bottom: 0;
-    height: env(titlebar-area-height, 48px);
+    height: env(titlebar-area-height, var(--desktop-titlebar-height, 48px));
     transition: padding 0.2s ease;
   }
   body.wco-active #title-bar button,
@@ -167,7 +169,9 @@
   body.wco-active #title-bar .bar-right {
     -webkit-app-region: no-drag;
   }
-  body.wco-active #title-bar .bar-right {
+  /* The installed PWA's overlay is thinner than the toolbar's pill: the pill's glass goes. The desktop app's bar is
+     the pill's height and keeps it (below). */
+  html:not(.desktop-titlebar) body.wco-active #title-bar .bar-right {
     background: transparent;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
@@ -178,6 +182,19 @@
     transform: translateY(1px);
   }
 
+  /* ── The SynaBun desktop app (packaging/desktop): this bar is the window's title bar ──
+       html.desktop-titlebar comes from desktop-titlebar.js, only inside the app's main window, which also toggles
+       body.wco-active (off in full screen, where the system hides its buttons). Whatever in the bar takes a click
+       stays out of the drag region; the empty parts drag the window, and the system maximizes and restores it on
+       a double-click. While something is drawn over the bar (a dialog, the tour), the bar drags nothing, so that
+       thing gets its clicks. Windows and Linux: the app's menu opens from .desktop-app-menu-btn (a .bar-icon). */
+  html.desktop-titlebar body.wco-active #title-bar :is(#titlebar-logo, #search-container, select, label, [role="button"], [tabindex]:not([tabindex="-1"])) {
+    -webkit-app-region: no-drag;
+  }
+  html.desktop-titlebar body.wco-active.desktop-titlebar-covered #title-bar {
+    -webkit-app-region: no-drag;
+  }
+
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
   ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
@@ -1474,19 +1491,32 @@
     z-index: 1;
   }
 
+  /* The memory search: a slot of its own between the menubar and the pill, centred in what the menu leaves (its auto
+     margins) and up to 340px of it. It never lies under the menu, whatever the labels' language or the window's
+     width: where the space runs short it shrinks, and below 200px the field is a search icon that opens over the
+     menu while it has the focus ("SEARCH BAR"). Its box is the field's width only, so the empty bar beside it still
+     drags the desktop app's window. With the visualization off it takes no room at all. */
   #title-bar .bar-center {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: max-content;
-    max-width: calc(100% - 360px);
+    position: relative;
+    flex: 0 1 340px;
+    min-width: 30px;
+    margin-inline: auto;
+    container-type: inline-size;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    min-width: 0;
     pointer-events: auto;
   }
+  #title-bar .bar-center:has(> #search-wrapper.viz-hidden) {
+    flex-basis: 0;
+    min-width: 0;
+  }
+  #title-bar .bar-center:focus-within {
+    z-index: 2;   /* the opened field draws over the menubar (.bar-left, z-index 1) */
+  }
+  #title-bar .bar-center + .bar-right {
+    margin-left: 0;   /* the slot's auto margins push the pill to the right edge */
+  }
 
   /* ── Unified frosted glass pill ── */
   #title-bar .bar-right {
@@ -5105,6 +5135,54 @@
     vertical-align: -2px;
     margin-right: 6px;
   }
+  /* Inside the desktop app (ui-update.js openDesktopUpdateModal): the release notes, written as text, and the
+     download's progress. The surfaces and the green of the rest of this dialog. */
+  .update-notes-label {
+    font-size: 11px;
+    color: var(--t-muted);
+    margin: 4px 0 6px;
+  }
+  .update-notes {
+    max-height: 168px;
+    overflow: auto;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    background: rgba(0,0,0,0.35);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: var(--r-card);
+    padding: 10px 14px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--t-secondary);
+  }
+  .update-notes:focus-visible {
+    outline: 2px solid var(--stg-focus, #93c5fd);
+    outline-offset: 2px;
+  }
+  .update-progress {
+    height: 6px;
+    margin: 16px 0 8px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.12);
+    overflow: hidden;
+  }
+  .update-progress-bar {
+    height: 100%;
+    border-radius: inherit;
+    background: #34c759;
+    transition: width 0.2s ease;
+  }
+  /* The size is not known: the bar is full and quiet, the words say how much came. */
+  .update-progress-bar--unknown { opacity: 0.45; }
+  .update-progress-text {
+    font-family: var(--ff-mono);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    color: var(--t-muted);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .update-progress-bar { transition: none; }
+  }
   .tag-delete-overlay.closing {
     opacity: 0;
     transition: opacity 0.15s ease;
@@ -7112,25 +7190,22 @@
   /* ═══════════════════════════════════════════
      SEARCH BAR (inline in top bar)
      ═══════════════════════════════════════════ */
-  #search-container {
-    display: contents;
-  }
-
+  /* #search-container is the navbar slot (#title-bar .bar-center, "TOP MENU BAR"); the field fills it up to 340px. */
   #search-wrapper {
     position: relative;
     width: 340px;
-    max-width: 40vw;
+    max-width: 100%;
     border-radius: 8px;
     padding: 1px;
-    background: rgba(255,255,255,0.06);
+    background: var(--s-light);   /* the 1px edge around the field */
     overflow: hidden;
     opacity: 1;
     transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                 max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                 padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                 opacity 0.25s ease,
-                background 0.3s,
-                box-shadow 0.3s;
+                background 0.2s ease,
+                box-shadow 0.2s ease;
   }
 
   #search-wrapper.viz-hidden {
@@ -7141,36 +7216,88 @@
     pointer-events: none;
   }
 
+  #search-wrapper:hover {
+    background: var(--s-medium);
+  }
+
   #search-wrapper.focused {
-    background: rgba(255, 255, 255, 0.12);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 12px rgba(255, 255, 255, 0.04);
-    animation: searchGlow 2.5s ease-in-out infinite;
+    background: var(--b-hover);
+    box-shadow: 0 0 0 3px var(--s-subtle);
   }
 
-  @keyframes searchGlow {
-    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 12px rgba(255, 255, 255, 0.04); }
-    50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 16px rgba(255, 255, 255, 0.07); }
+  #search-wrapper .search-icon {
+    position: absolute;
+    left: 9px;
+    top: 50%;
+    width: 13px;
+    height: 13px;
+    transform: translateY(-50%);
+    color: var(--t-secondary);
+    pointer-events: none;
+    transition: color 0.2s ease;
   }
+  #search-wrapper:hover .search-icon { color: var(--t-primary); }
+  #search-wrapper.focused .search-icon { color: var(--t-bright); }
 
   #search-input {
     width: 100%;
-    padding: 6px 36px 6px 12px;
+    padding: 6px 36px 6px 30px;
     background: rgba(28, 28, 30, 0.7);
     border: none;
     border-radius: 7px;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--t-bright);
+    font-family: inherit;
     font-size: 12px;
     font-weight: 400;
     outline: none;
     letter-spacing: 0.01em;
+    text-overflow: ellipsis;
   }
 
   #search-input::placeholder {
-    color: rgba(255,255,255,0.2);
-    letter-spacing: 0.04em;
+    color: var(--t-secondary);
+    letter-spacing: 0.01em;
     font-weight: 400;
   }
 
+  /* ── Not enough room in the bar: a search icon, opened over the menubar while it has the focus ── */
+  @container (max-width: 199px) {
+    #search-wrapper {
+      width: 30px;
+      transition: opacity 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;   /* opens and closes at once */
+    }
+    #search-wrapper:not(:focus-within) #search-input {
+      padding-right: 0;
+      color: transparent;
+      cursor: pointer;
+    }
+    #search-wrapper:not(:focus-within) #search-input::placeholder {
+      color: transparent;
+    }
+    #search-wrapper:not(:focus-within) :is(#search-badge, #search-clear) {
+      visibility: hidden;   /* ui-search.js shows and hides them with inline display */
+    }
+    /* A search is on: the icon says so. */
+    #search-wrapper:not(:focus-within):has(#search-input:not(:placeholder-shown)) {
+      background: var(--b-visible);
+    }
+    #search-wrapper:not(:focus-within):has(#search-input:not(:placeholder-shown)) .search-icon {
+      color: var(--t-bright);
+    }
+    #search-wrapper:focus-within:not(.viz-hidden) {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: min(340px, 60vw);
+      max-width: none;
+      box-shadow: 0 0 0 3px var(--s-subtle), var(--shadow-md);
+    }
+    #search-wrapper:focus-within:not(.viz-hidden) #search-input {
+      background: rgb(28, 28, 30);   /* opaque: the menu labels under it don't show through */
+    }
+  }
+
   #search-badge {
     position: absolute;
     right: 8px;
@@ -15649,6 +15776,102 @@
   .settings-nav-item[data-tab="notifications"]   { --stg-tile: #bd5a52; }
   .settings-nav-item[data-tab="appearance"]      { --stg-tile: #6c717a; }
   /* <<< settings-redesign:nav-polish */
+  /* >>> settings-redesign:spacing */
+  /* ═══════════════════════════════════════════
+     SETTINGS — room between the rows of the right column, on every page
+     The elegance pass packed the rows at 8px. This loosens the whole rhythm one step and touches no size, weight or wiring:
+     the row padding is the one lever (--stg-row-y), the gaps around it keep their proportions.
+     Scoped to the settings panel; the command runner and the style guide keep the elegance values.
+     ═══════════════════════════════════════════ */
+  .settings-panel { --stg-row-y: 13px; }
+  /* page head, product headings, sections */
+  .stg-page-head { margin-bottom: 26px; }
+  .settings-panel .stg-pane-title { margin: 32px 0 14px; }
+  .settings-panel .stg-card { margin-bottom: 22px; }
+  .settings-panel .stg-card.stg-acc[data-collapsible] { margin-bottom: 14px; }
+  .settings-panel .stg-card.stg-acc[data-collapsible] > .stg-card-head { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
+  /* what a group holds that is not a row of its own (a note, a list, a preview) */
+  .settings-panel .stg-card-body > * { margin-top: 14px; margin-bottom: 14px; }
+  /* a row that opens (an assistant, a model) was fixed at 7px */
+  .settings-panel .stg-card-body > .stg-card[data-collapsible] { padding-top: var(--stg-row-y); padding-bottom: var(--stg-row-y); }
+  /* the Browser fields kept a margin of their own under the row, which doubled the gap next to the row padding */
+  .settings-panel .stg-card-body > .stg-field.bc-card-row { margin-bottom: 0; }
+  /* label, control, help */
+  .settings-panel .stg-field > label { margin-bottom: 8px; }
+  .settings-panel .stg-help { margin-top: 5px; }
+  .settings-panel .stg-toggle-text .stg-help { margin-top: 4px; }
+  /* <<< settings-redesign:spacing */
+  /* >>> settings-about */
+  /* Settings → About (shared/settings/settings-about-pane.js): the header (icon, name, version, the two buttons),
+     the links, the facts of System and the dependency lists. Text weight and the panel's --stg-* roles; every row
+     wraps instead of widening the panel, down to the 320px panel. Its tile is the palette's neutral graphite. */
+  .settings-nav-item[data-tab="about"] { --stg-tile: #6b7078; }
+  .settings-panel .stg-about-hero {
+    display: flex; flex-direction: column; align-items: center; text-align: center;
+    margin: 0 0 18px; padding: 20px 16px 16px; border-radius: 9px; background: var(--stg-group);
+  }
+  .settings-panel .stg-about-hero [hidden] { display: none; }
+  .settings-panel .stg-about-logo { display: block; width: 64px; height: 64px; margin: 0 0 10px; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
+  .settings-panel .stg-about-name { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--stg-text); }
+  .settings-panel .stg-about-version { margin: 2px 0 0; font-size: 12.5px; color: var(--stg-body); }
+  .settings-panel .stg-about-line { margin: 2px 0 0; max-width: 52ch; font-size: 12px; color: var(--stg-help); overflow-wrap: anywhere; }
+  .settings-panel .stg-about-desc { margin-top: 8px; }
+  .settings-panel .stg-about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
+  .settings-panel .stg-about-note { max-width: 52ch; margin: 10px 0 0; }
+
+  /* Links: the name on the left, the address on the right; the address gives way first */
+  .settings-panel .stg-about-links { margin: 0; padding: 0; list-style: none; }
+  .settings-panel .stg-about-links > li + li { border-top: 1px solid var(--stg-sep); }
+  .settings-panel .stg-about-link { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 0; box-sizing: border-box; font-size: 13px; color: var(--stg-text); text-decoration: none; }
+  .settings-panel .stg-about-link:hover .stg-about-link-label { color: var(--stg-link); }
+  .settings-panel .stg-about-link:focus-visible { outline: 2px solid var(--stg-focus); outline-offset: 2px; border-radius: 4px; }
+  .settings-panel .stg-about-link-label { flex: 0 0 auto; }
+  .settings-panel .stg-about-link-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--stg-help); }
+  .settings-panel .stg-about-arrow { flex: 0 0 auto; width: 10px; height: 10px; fill: none; stroke: var(--stg-help); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+
+  /* System: label and value on one row; a long value (the data folder) wraps under its label */
+  .settings-panel .stg-about-facts { margin: 0; }
+  .settings-panel .stg-about-fact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; min-height: 32px; padding: 7px 0; box-sizing: border-box; }
+  .settings-panel .stg-about-fact + .stg-about-fact { border-top: 1px solid var(--stg-sep); }
+  .settings-panel .stg-about-fact dt { flex: 0 0 auto; font-size: 13px; color: var(--stg-text); }
+  .settings-panel .stg-about-fact dd { flex: 1 1 12em; min-width: 0; margin: 0; text-align: right; font-size: 12.5px; color: var(--stg-body); overflow-wrap: anywhere; user-select: text; }
+  .settings-panel .stg-about-fact dd.stg-about-mono { font-family: var(--stg-mono); font-size: 12px; }
+  .settings-panel .stg-about-empty { margin: 8px 0; list-style: none; }
+
+  /* Dependencies: a heading per package, then one row per dependency: name, version, then range and license,
+     which move under the name when the row is narrow */
+  .settings-panel .stg-about-filter { display: flex; }
+  .settings-panel .stg-about-filter[hidden] { display: none; }
+  .settings-panel .settings-content .stg-about-filter-input { width: 100%; max-width: 240px; }
+  .settings-panel .stg-about-group + .stg-about-group,
+  .settings-panel .stg-about-bundled { margin-top: 12px; }
+  .settings-panel .stg-card-body .stg-about-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 0; margin: 0; padding: 8px 0 4px; font-size: 13px; color: var(--stg-text); }
+  .settings-panel .stg-about-group-sub { min-width: 0; overflow-wrap: anywhere; font-family: var(--stg-mono); font-size: 11.5px; font-weight: 400; color: var(--stg-help); }
+  .settings-panel .stg-about-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--stg-help); font-variant-numeric: tabular-nums; }
+  .settings-panel .stg-about-group-note { margin: 0 0 4px; }
+  .settings-panel .stg-about-dep-list { margin: 0; padding: 0; list-style: none; }
+  .settings-panel .stg-about-dep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 5px 0; border-top: 1px solid var(--stg-sep); font-size: 12.5px; }
+  .settings-panel .stg-about-dep-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--stg-text); text-decoration: none; }
+  .settings-panel a.stg-about-dep-name:hover { color: var(--stg-link); text-decoration: underline; }
+  .settings-panel a.stg-about-dep-name:focus-visible { outline: 2px solid var(--stg-focus); outline-offset: 2px; border-radius: 3px; }
+  .settings-panel .stg-about-dep-version { flex: 0 0 auto; font-family: var(--stg-mono); font-size: 12px; color: var(--stg-body); font-variant-numeric: tabular-nums; }
+  .settings-panel .stg-about-dep-version[data-state="missing"] { color: var(--stg-warn); }
+  .settings-panel .stg-about-dep-meta { flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; font-size: 11.5px; color: var(--stg-help); }
+  .settings-panel .stg-about-dev { margin-top: 12px; }
+
+  /* The foot of the page: the license and the copyright, quiet and centred */
+  .settings-panel .stg-about-footer { margin: 8px 0 4px; text-align: center; font-size: 11.5px; color: var(--stg-help); }
+  .settings-panel .stg-about-footer p { margin: 2px 0; }
+  .settings-panel .stg-about-builtwith { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--stg-link); cursor: pointer; }
+  .settings-panel .stg-about-builtwith:hover { text-decoration: underline; }
+  .settings-panel .stg-about-builtwith:focus-visible { outline: 2px solid var(--stg-focus); outline-offset: 2px; border-radius: 3px; }
+  @container stg (max-width: 480px) {
+    .settings-panel .stg-about-hero { padding: 16px 12px 14px; }
+    .settings-panel .stg-about-link-url { display: none; }
+    .settings-panel .stg-about-arrow { margin-left: auto; }
+    .settings-panel .stg-about-fact dd { text-align: left; flex-basis: 100%; }
+  }
+  /* <<< settings-about */
   .tag-add-input {
     font-size: var(--fs-sm);
     font-weight: 500;
@@ -26504,7 +26727,9 @@
   body .term-float-tab.term-float-tab > .term-float-tab-header .term-float-tab-title { font-size: var(--fs-xs); }
   body :is(.sched-header-icon, .sm-header-icon, .ig-icon),
   body :is(.sched-header-icon, .sm-header-icon, .ig-icon) svg { width: 16px; height: 16px; }
-  body .sp-sidepanel.sp-floating > :is(.cp-header, .cxp-header, .ocpv2-header, .asp-header) { flex-wrap: wrap; }
+  /* The Claude Code, Codex and OpenCode headers stay one row: their session name gives way
+     instead (the panels' own header styles). */
+  body .sp-sidepanel.sp-floating > .asp-header { flex-wrap: wrap; }
 
   body .term-float-tab-title { flex: 1 1 100px; }
   body .term-float-tab-actions { flex-wrap: wrap; max-width: 100%; }
@@ -28640,6 +28865,30 @@
 }
 .update-check-toast .utc-sub  { color: var(--t-muted); }
 .update-check-toast .utc-hint { color: var(--t-muted); opacity: 0.7; margin-top: 6px; font-size: 11px; }
+/* The desktop app's update notice (ui-update.js renderDesktopNotice): the same toast, with its own answers. */
+.update-notice .utc-sub { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.update-notice-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 10px;
+}
+.update-notice-actions .action-btn { padding: 4px 12px; }
+.update-notice-link {
+  color: var(--t-primary);
+  font-size: 11px;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  margin-right: auto;
+}
+.update-notice-link:hover { color: var(--t-bright); }
+.update-notice-link:focus-visible,
+.update-notice .action-btn:focus-visible {
+  outline: 2px solid var(--stg-focus, #93c5fd);
+  outline-offset: 2px;
+}
 
 .update-channel-pill {
   display: inline-block;

package/neural-interface/public/shared/synabun-mascot.js

@@ -37,7 +37,8 @@
  *   `opts.count` 1-3 (subagent minis), `opts.mode` 'recall' | 'remember'
  *   (memory), `opts.ticks` 0-3 (plan), `opts.then` a pose to blend to once a
  *   one-shot (success, error, blocked) has played and held. The same pose with
- *   a new count or ticks keeps its loop running.
+ *   a new count or ticks keeps its loop running. `opts.unlimited` selects the
+ *   budget pose's relaxed infinity variant; project peeks into a folder.
  * - `react(name)` — `MASCOT_REACTIONS`: hop (spring, at most one per 600 ms),
  *   wince, nod, pop (plan: pops the newest tick; ticks the next box too
  *   unless setPose passed `ticks`), startle, pulse, click
@@ -81,7 +82,7 @@ export const MASCOT_VIEWBOX = '0 0 280 140';
 /** One pose per tool kind (shared with the activity rack's kind ids). */
 export const MASCOT_KINDS = Object.freeze(['shell', 'read', 'edit', 'search', 'web', 'subagent', 'plan', 'memory', 'runs', 'computer', 'think', 'mcp']);
 export const MASCOT_STATES = Object.freeze(['idle', 'sleep', 'watch', 'wait', 'success', 'error', 'blocked', 'offline']);
-export const MASCOT_POSES = Object.freeze([...MASCOT_KINDS, ...MASCOT_STATES]);
+export const MASCOT_POSES = Object.freeze([...MASCOT_KINDS, ...MASCOT_STATES, 'project', 'budget']);
 export const MASCOT_REACTIONS = Object.freeze(['hop', 'wince', 'nod', 'pop', 'startle', 'pulse', 'click']);
 
 /** The character's SVG. Colour comes from `currentColor` (the mouth at 25 %). */
@@ -145,6 +146,8 @@ export function mascotCameoSvg({ className = '' } = {}) {
 
 /** Each prop's own box in face units, to draw it alone (a ledger row's glyph, a suggestion's). */
 const PROP_BOX = Object.freeze({
+  project: [204, 77, 62, 48],
+  budget: [212, 65, 54, 60],
   shell: [144, 116, 42, 26], // the last keycap and the caret
   read: [65, 20, 150, 88],
   edit: [188, 93, 56, 44],
@@ -315,6 +318,31 @@ const MINIS = [
  * look: follows look(), easing with this time constant (ms).
  */
 const POSES = {
+  // Empty-state controls: host-directed gaze, the same ticker and prop painter as tool kinds.
+  project: {
+    motion: 'loop', blinks: true, look: 70,
+    frame(t, o) {
+      const f = blankFrame();
+      const peek = o.still ? 0.5 : (1 + Math.sin(TAU * t / 2400)) / 2;
+      f.eyes = [eye(0, 2 + 2 * peek, 1, 0.92, -2), eye(0, 2 + 2 * peek, 1, 0.96, 2)];
+      f.mouth = mouth(34, 11);
+      gaze(f, o.look, { x: 16, y: 10 });
+      f.prop = { name: 'project', peek };
+      return f;
+    },
+  },
+  budget: {
+    motion: 'loop', blinks: true, look: 70,
+    frame(t, o) {
+      const f = blankFrame();
+      const lift = o.still ? 0 : Math.sin(TAU * t / 2200);
+      f.eyes = [eye(0, 0, 1, o.unlimited ? 0.65 : 0.93, -3), eye(0, 0, 1, o.unlimited ? 0.65 : 1, 3)];
+      f.mouth = mouth(o.unlimited ? 48 : 34, o.unlimited ? 20 : 11);
+      gaze(f, o.look, { x: 16, y: 10 });
+      f.prop = { name: 'budget', lift, unlimited: o.unlimited };
+      return f;
+    },
+  },
   // ── States ──
   idle: {
     motion: 'still', blinks: true, tracks: true,
@@ -598,6 +626,7 @@ function poseOptions(opts) {
     count: intIn(o.count, 1, 3, 1),
     mode: o.mode === 'remember' ? 'remember' : 'recall',
     ticks: intIn(o.ticks, 0, 3, 1),
+    unlimited: !!o.unlimited,
     still: !!o.still,
   };
 }
@@ -741,6 +770,23 @@ export function reactionFrame(frame, name, p) {
 // ── Props: small, currentColor, in the face's pill geometry ──
 
 const PROPS = {
+  project: {
+    markup: () => '<g fill="none" stroke="currentColor" stroke-opacity=".7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M208 117V84q0-4 4-4h15l7 8h25v29z"/><path class="syna-folder-front" d="M208 117l5-23h49l-5 23z"/><path class="syna-folder-paper" d="M223 93V85h22v8M229 89h10"/></g>',
+    refs: g => ({ front: g.querySelector('.syna-folder-front'), paper: g.querySelector('.syna-folder-paper') }),
+    update(r, p, put) {
+      put(r.front, 'transform', `translate(0,${n(2 * p.peek)})`);
+      put(r.paper, 'transform', `translate(0,${n(-4 * p.peek)})`);
+    },
+  },
+  budget: {
+    markup: () => '<g fill="none" stroke="currentColor" stroke-opacity=".7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="216" y="96" width="46" height="25" rx="4"/><path d="M250 103h12v10h-12z"/><g class="syna-budget-coin"><circle cx="236" cy="80" r="12"/><path d="M236 73v14M232 76h6q4 0 0 4h-4q-4 4 0 4h6"/></g><path class="syna-budget-infinity" d="M235 80c-16-19-25 15-8 7l17-14c17-8 8 26-9 7"/></g>',
+    refs: g => ({ coin: g.querySelector('.syna-budget-coin'), infinity: g.querySelector('.syna-budget-infinity') }),
+    update(r, p, put) {
+      put(r.coin, 'display', p.unlimited ? 'none' : null);
+      put(r.infinity, 'display', p.unlimited ? null : 'none');
+      put(p.unlimited ? r.infinity : r.coin, 'transform', `translate(0,${n(-3 * p.lift)})`);
+    },
+  },
   shell: { // three keycaps and a block caret under the chin
     markup: () => [0, 1, 2].map(i => `<rect class="syna-key" x="${100 + i * 24}" y="127" width="20" height="9" rx="4.5" fill="currentColor" fill-opacity=".4"/>`).join('')
       + '<rect class="syna-caret" x="174" y="125" width="7" height="12" rx="2" fill="currentColor" fill-opacity=".75"/>',