@groeponline/pi-wishcraft 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## [1.11.0] - 2026-09-20
+
+### Fixed
+- Deck navigation (reported by Joep): ↑↓ walking the route column is now sticky. Previously ↓ arriving at a list route (Skills, Appearance, Motion, Ideas) was silently consumed by the center list, so walking down the left column appeared to jump sideways into the right pane mid-walk. Focus only crosses columns on an explicit ←/tab (nav) or → (list).
+
+### Changed
+- Motion sweeps traverse on an eased ping-pong instead of a wrapping step: the head decelerates at the rail edges, turns, and glides back — no teleport from the last cell to the first. Each motion's `ease` curve (`linear` / `pulse` / `breathe`) now actually shapes traversal velocity; fractional head positions drive a truecolor trail ramp (hot head cooling to the dim track) replacing the four discrete color steps, and ember/heat heads flicker with the welcome lantern's breathe-plus-ripple curve. Gallery previews render the same eased traversal.
+
 ## [1.10.0] - 2026-09-13
 
 ### Fixed

package/docs/design/signal.md

@@ -55,6 +55,13 @@ idle / ready       0 FPS
 
 Terminal one-shots (`success`, `warning`, `error`) settle their semantic state back to `idle/ready` when the final frame completes. This prevents a completed agent run from leaving `done` painted indefinitely without keeping a background timer alive.
 
+Active sweeps traverse the rail on an eased ping-pong: the head decelerates at
+the edges, turns, and glides back instead of teleporting from the last cell to
+the first. Each motion's `ease` curve (`linear`, `pulse`, `breathe`) shapes the
+traversal, the wake cools through a truecolor ramp from the hot head to the
+dim track, and ember/heat heads flicker with the lantern's breathe-plus-ripple
+curve. ASCII terminals keep the plain directional comet.
+
 Reduced/functional/off motion policies may suppress frames entirely; status text must still communicate the state. `NO_COLOR`, screen-reader flags and ASCII fallback are first-class inputs to the same policy.
 
 ## Fault isolation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groeponline/pi-wishcraft",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Operator cockpit for Pi: live powerline status, searchable skills, idea queue, sticky Bash, hooks, policy controls, and session UX.",
   "type": "module",
   "files": [

package/src/extension/ui/deck/component.ts

@@ -300,11 +300,17 @@ export function createDeckComponent(
       if (matchesKey(data, "up")) {
         const next = Math.max(0, state.selectedNav - 1);
         setRoute(DECK_ROUTE_DEFS[next]?.id ?? state.route);
+        // Sticky focus: once ↑↓ drives the nav column it keeps driving the
+        // nav column. Without this, ↓ arriving at a list route (skills,
+        // appearance, motion, ideas) is silently consumed by the center
+        // list and focus appears to jump sideways mid-walk.
+        state = { ...state, navMode: true };
         return;
       }
       if (matchesKey(data, "down")) {
         const next = Math.min(DECK_ROUTE_DEFS.length - 1, state.selectedNav + 1);
         setRoute(DECK_ROUTE_DEFS[next]?.id ?? state.route);
+        state = { ...state, navMode: true };
         return;
       }
 

package/src/motion/frames.ts

@@ -60,8 +60,61 @@ export function lanternGlow(nowMs: number): number {
   return 0.55 * breathe + 0.45 * ripple;
 }
 
+export type SweepEase = "linear" | "pulse" | "breathe";
+
+/**
+ * Eased traversal progress. `linear` keeps a constant velocity, `pulse`
+ * accelerates through the middle and settles at the edges, `breathe`
+ * dwells longest at the ends before turning. All curves are symmetric so
+ * the ping-pong turn at each edge stays continuous — no teleport wrap.
+ */
+function easeProgress(s: number, ease: SweepEase): number {
+  if (ease === "pulse") return (1 - Math.cos(Math.PI * s)) / 2;
+  if (ease === "breathe") {
+    // easeInOutQuart: long dwell at the ends, quick through the middle
+    return s < 0.5 ? 8 * s * s * s * s : 1 - 8 * (1 - s) ** 4;
+  }
+  return s;
+}
+
+/**
+ * Fractional position of a travelling head across `width` cells on a
+ * ping-pong traversal (no teleport wrap: the head decelerates, turns at
+ * the edge and glides back). Returns -1 when not animating. The fractional
+ * part lets color ramps fade between cells while glyphs round to one column.
+ */
+export function sweepPhase(
+  tick: number,
+  width: number,
+  animating: boolean,
+  direction: "forward" | "reverse" = "forward",
+  ease: SweepEase = "linear",
+): number {
+  if (!animating || width <= 1) return animating && width === 1 ? 0 : -1;
+  const span = width - 1;
+  const period = 2 * span;
+  const phase = ((tick % period) + period) % period;
+  const s = phase <= span ? phase / span : (period - phase) / span;
+  const eased = easeProgress(s, ease) * span;
+  return direction === "reverse" ? span - eased : eased;
+}
+
+/**
+ * True during the return leg of a ping-pong traversal — when the head is
+ * travelling back toward its starting edge. Callers orient the trail from
+ * this so the wake always trails the head on both legs.
+ */
+export function sweepReturning(tick: number, width: number): boolean {
+  if (width <= 1) return false;
+  const span = width - 1;
+  const period = 2 * span;
+  const phase = ((tick % period) + period) % period;
+  return phase > span;
+}
+
 /**
- * Position of a travelling head across `width` cells. Returns -1 when the
+ * Position of a travelling head across `width` cells. Ping-pong traversal:
+ * the head bounces at the edges instead of wrapping. Returns -1 when the
  * motion is not animating, so callers can render a still rail.
  */
 export function sweepPosition(
@@ -69,10 +122,10 @@ export function sweepPosition(
   width: number,
   animating: boolean,
   direction: "forward" | "reverse" = "forward",
+  ease: SweepEase = "linear",
 ): number {
-  if (!animating || width <= 0) return -1;
-  const step = ((tick % width) + width) % width;
-  return direction === "reverse" ? width - 1 - step : step;
+  const phase = sweepPhase(tick, width, animating, direction, ease);
+  return phase < 0 ? -1 : Math.round(phase);
 }
 
 /**

package/src/motion/gallery.ts

@@ -4,7 +4,7 @@
  */
 
 import { MOTION_CATALOG } from "./catalog.ts";
-import { frameAt, framesOf, sweepPosition, trailGlyph } from "./frames.ts";
+import { frameAt, framesOf, sweepPhase, sweepReturning, trailGlyph } from "./frames.ts";
 import type { MotionDef } from "./types.ts";
 
 export const GALLERY_CATEGORIES = [
@@ -57,13 +57,20 @@ export function previewStrip(
   const inner = Math.max(8, width);
   const head = frameAt(def, tick, ascii);
   const direction = def.generator?.direction ?? "forward";
-  const pos = sweepPosition(tick, inner, true, direction);
+  const ease = def.generator?.ease ?? "linear";
+  const trail = def.generator?.trail ?? 2;
+  // Same eased ping-pong phase as the status rail, so the gallery previews
+  // the real traversal: decelerate, turn, glide back — no teleport wrap.
+  // The wake follows the current leg, staying behind the head both ways.
+  const pos = sweepPhase(tick, inner, true, direction, ease);
+  const movingRight = (direction === "forward") !== sweepReturning(tick, inner);
   let out = "";
   for (let i = 0; i < inner; i++) {
-    const distance = Math.abs(i - pos);
-    if (distance === 0) out += head;
-    else if (distance <= (def.generator?.trail ?? 2)) out += trailGlyph(distance, ascii);
-    else out += ascii ? "-" : "─";
+    const distance = movingRight ? pos - i : i - pos;
+    if (distance > -0.5 && distance <= 0.5) out += head;
+    else if (distance > 0.5 && distance <= trail + 0.5) {
+      out += trailGlyph(Math.round(distance), ascii);
+    } else out += ascii ? "-" : "─";
   }
   return out;
 }

package/src/motion/index.ts

@@ -48,7 +48,9 @@ export {
   frameAtElapsed,
   framesOf,
   lanternGlow,
+  sweepPhase,
   sweepPosition,
+  sweepReturning,
   trailGlyph,
 } from "./frames.ts";
 

package/src/render/motion-rail.ts

@@ -5,10 +5,10 @@
  */
 
 import { getMotion } from "../motion/catalog.ts";
-import { frameAt, sweepPosition, trailGlyph } from "../motion/frames.ts";
+import { frameAt, lanternGlow, sweepPhase, sweepReturning, trailGlyph } from "../motion/frames.ts";
 import type { SignalRuntime } from "../signal/controller.ts";
 import type { SignalSpec } from "../config/types.ts";
-import { ansi, colorEnabled, getFgAnsiCode } from "../theme/colors.ts";
+import { ansi, colorEnabled, fgGradientCode, getFgAnsiCode, paletteRgb } from "../theme/colors.ts";
 
 function paint(text: string, color: string): string {
   if (!color || !colorEnabled()) return text;
@@ -21,6 +21,39 @@ function cellGlyph(value: string, fallback: string): string {
   return Array.from(value)[0] ?? fallback;
 }
 
+interface RailPalette {
+  /** Truecolor ramp when color is on and glyphs are not ASCII. */
+  trueColor: boolean;
+  trailDepth: number;
+  headRgb: [number, number, number];
+  /** Lantern flicker factors; 1 / 0 disable the flicker for non-ember heads. */
+  flickerScale: number;
+  flickerWhite: number;
+  hot: string;
+  model: string;
+  path: string;
+  dim: string;
+}
+
+/** Color for a rail cell at `distance` behind the travelling head. */
+function railCellColor(distance: number, p: RailPalette): string {
+  if (!p.trueColor) {
+    if (distance === 0) return p.hot;
+    if (distance === 1) return p.model;
+    if (distance === 2) return p.path;
+    return p.dim;
+  }
+  if (distance <= 0.5) {
+    const rgb = p.headRgb.map((channel) =>
+      Math.min(255, Math.round(channel * p.flickerScale + (255 - channel) * p.flickerWhite)),
+    ) as [number, number, number];
+    return ansi.getFgAnsi(rgb[0], rgb[1], rgb[2]);
+  }
+  // Smooth wake: fade the hot head back to the dim track by fractional
+  // distance, so trail cells cool off instead of stepping through tiers.
+  return fgGradientCode("accent", "sep", Math.min(distance, p.trailDepth + 1) / (p.trailDepth + 1));
+}
+
 export function renderActivity(
   runtime: SignalRuntime,
   spec: SignalSpec,
@@ -38,40 +71,38 @@ export function renderActivity(
   const railWidth = Math.max(12, Math.min(22, Math.round(width * 0.1)));
   const def = getMotion(runtime.motionId);
   const direction = def?.generator?.direction === "reverse" ? "reverse" : "forward";
+  const ease = def?.generator?.ease ?? "linear";
   const trailDepth = Math.max(2, Math.min(6, def?.generator?.trail ?? 4));
   const headFallback = ascii ? "o" : "●";
   const headGlyph = (tick: number, distance: number) => {
     if (ascii) return distance === 0 ? headFallback : trailGlyph(distance, true);
-    return def ? cellGlyph(frameAt(def, tick - distance), headFallback) : headFallback;
+    return def ? cellGlyph(frameAt(def, tick - Math.round(distance)), headFallback) : headFallback;
   };
-  const cellColor = (distance: number) => {
-    if (distance === 0) return hot;
-    if (distance === 1) return model;
-    if (distance === 2) return path;
-    return dim;
+  // Lantern tie-in: ember/heat heads flicker with the welcome lantern's
+  // breathe-plus-ripple curve, so the signature flame lives in the rail.
+  const lantern =
+    def?.generator?.geometry === "ember" || def?.generator?.geometry === "heat";
+  const glow = lantern ? 0.84 + 0.16 * lanternGlow(Date.now()) : 1;
+  const palette: RailPalette = {
+    trueColor: colorEnabled() && !ascii,
+    trailDepth,
+    headRgb: paletteRgb("accent"),
+    flickerScale: glow,
+    flickerWhite: lantern ? 0.09 * ((glow - 0.84) / 0.16) : 0,
+    hot,
+    model,
+    path,
+    dim,
   };
+  const cellColor = (distance: number): string => railCellColor(distance, palette);
 
   let rail: string;
   if (!runtime.active) {
-    // Do not derive idle state from Date.now(): there is intentionally no idle
-    // animation clock, so a clock-derived rail otherwise changes only when an
-    // unrelated repaint happens. The center marker makes ready glanceable.
-    const center = Math.floor(railWidth / 2);
-    rail = Array.from({ length: railWidth }, (_, index) =>
-      paint(index === center ? (ascii ? "." : "⋄") : track, dim),
-    ).join("");
+    rail = renderIdleRail(railWidth, ascii, track, dim);
   } else if (runtime.event === "compact") {
     rail = renderCompactRail(runtime.tick, railWidth, ascii, headGlyph, cellColor);
   } else {
-    const pos = sweepPosition(runtime.tick, railWidth, true, direction);
-    rail = Array.from({ length: railWidth }, (_, index) => {
-      const distance = direction === "forward" ? pos - index : index - pos;
-      if (distance === 0) return paint(headGlyph(runtime.tick, 0), cellColor(0));
-      if (distance > 0 && distance <= trailDepth) {
-        return paint(headGlyph(runtime.tick, distance), cellColor(distance));
-      }
-      return paint(track, dim);
-    }).join("");
+    rail = renderSweepRail(runtime.tick, railWidth, direction, ease, trailDepth, track, headGlyph, cellColor, dim);
   }
 
   const edge = runtime.active ? hot : dim;
@@ -80,6 +111,51 @@ export function renderActivity(
   return `${paint(left, edge)}${rail}${paint(right, edge)} ${paint(label, runtime.active ? hot : dim)}`;
 }
 
+/** Idle rail. Do not derive idle state from Date.now(): there is
+ * intentionally no idle animation clock, so a clock-derived rail otherwise
+ * changes only when an unrelated repaint happens. The center marker makes
+ * ready glanceable. */
+function renderIdleRail(
+  width: number,
+  ascii: boolean,
+  track: string,
+  dim: string,
+): string {
+  const center = Math.floor(width / 2);
+  return Array.from({ length: width }, (_, index) =>
+    paint(index === center ? (ascii ? "." : "⋄") : track, dim),
+  ).join("");
+}
+
+/** Eased ping-pong sweep: the head decelerates at the edges and glides back
+ * instead of teleporting from the last cell to the first. */
+function renderSweepRail(
+  tick: number,
+  width: number,
+  direction: "forward" | "reverse",
+  ease: "linear" | "pulse" | "breathe",
+  trailDepth: number,
+  track: string,
+  headGlyph: (tick: number, distance: number) => string,
+  cellColor: (distance: number) => string,
+  dim: string,
+): string {
+  const pos = sweepPhase(tick, width, true, direction, ease);
+  // Orient the wake by the current leg, not just the configured direction:
+  // on the return leg the head travels the other way, so "behind" flips.
+  const movingRight = (direction === "forward") !== sweepReturning(tick, width);
+  return Array.from({ length: width }, (_, index) => {
+    const distance = movingRight ? pos - index : index - pos;
+    if (distance > -0.5 && distance <= 0.5) {
+      return paint(headGlyph(tick, 0), cellColor(0));
+    }
+    if (distance > 0.5 && distance <= trailDepth + 0.5) {
+      return paint(headGlyph(tick, Math.round(distance)), cellColor(distance));
+    }
+    return paint(track, dim);
+  }).join("");
+}
+
 function renderCompactRail(
   tick: number,
   width: number,

package/src/theme/colors.ts

@@ -68,3 +68,44 @@ export function getFgAnsiCode(color: ColorName): string {
   if (!colorEnabled()) return "";
   return ansiCodeCache.get(color as string) ?? "";
 }
+
+/** Approximate RGB for a 256-color palette code (greyscale + cube). */
+function ansi256ToRgb(code: number): [number, number, number] {
+  if (code >= 232) {
+    const v = 8 + (code - 232) * 10;
+    return [v, v, v];
+  }
+  if (code >= 16) {
+    const c = code - 16;
+    const step = [0, 95, 135, 175, 215, 255];
+    return [step[Math.floor(c / 36) % 6]!, step[Math.floor(c / 6) % 6]!, step[c % 6]!];
+  }
+  return [128, 128, 128];
+}
+
+export function paletteRgb(color: ColorName): [number, number, number] {
+  const val = PALETTE[color];
+  if (typeof val === "string" && val.startsWith("#")) return hexToRgb(val);
+  if (typeof val === "number") return ansi256ToRgb(val);
+  return [128, 128, 128];
+}
+
+/**
+ * Truecolor gradient between two palette tokens. Returns "" when color is
+ * disabled so callers paint plain text, exactly like getFgAnsiCode.
+ */
+export function fgGradientCode(
+  from: ColorName,
+  to: ColorName,
+  t: number,
+): string {
+  if (!colorEnabled()) return "";
+  const clamped = t < 0 ? 0 : t > 1 ? 1 : t;
+  const a = paletteRgb(from);
+  const b = paletteRgb(to);
+  return ansi.getFgAnsi(
+    Math.round(a[0] + (b[0] - a[0]) * clamped),
+    Math.round(a[1] + (b[1] - a[1]) * clamped),
+    Math.round(a[2] + (b[2] - a[2]) * clamped),
+  );
+}