@groeponline/pi-wishcraft 1.1.0 → 1.2.0

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

@@ -0,0 +1,358 @@
+import { matchesKey } from "@earendil-works/pi-tui";
+import { STRUCTURAL_PRESET_NAMES } from "../../../config/types.ts";
+import {
+  COMPOSER_FIELDS,
+  cycleAssignEvent,
+  draftFromMotion,
+  nudgeComposer,
+  type ComposerDraft,
+  type ComposerField,
+} from "../../../motion/composer.ts";
+import { filterMotions } from "../../../motion/gallery.ts";
+import {
+  applyAppearanceBase,
+  applyMotionAssignment,
+} from "../../settings/appearance-write.ts";
+import {
+  insertSkillBody,
+  loadSkillCatalog,
+  readSkillBody,
+} from "../../skills/skill-registry.ts";
+import { writeSkillFromTemplate } from "../../skills/skill-templates.ts";
+import {
+  applyOverlayQueryKey,
+  isOverlayPrintable,
+} from "../overlay-chrome.ts";
+import type { RuntimeState } from "../../core/types.ts";
+import { appearanceDisplayName } from "../../../config/structural-presets.ts";
+import { filterSkillRows, selectedGalleryMotion } from "./route-bodies.ts";
+import { buildDeckSessionSnapshot } from "./session-snapshot.ts";
+import { deckRouteByJump, deckRouteIndex } from "./routes.ts";
+import { filterDeckRoutes, renderDeckFrame } from "./render.ts";
+import { DECK_ROUTE_DEFS } from "./routes.ts";
+import type { DeckNavState, DeckRoute } from "./types.ts";
+
+function appearanceIndex(base: string): number {
+  const idx = (STRUCTURAL_PRESET_NAMES as readonly string[]).indexOf(base);
+  return idx >= 0 ? idx : 0;
+}
+
+export function createDeckNavState(
+  route: DeckRoute,
+  selectedAppearance = 0,
+): DeckNavState {
+  return {
+    route,
+    selectedNav: deckRouteIndex(route),
+    searchOpen: false,
+    searchQuery: "",
+    pendingJump: null,
+    selectedAppearance,
+    selectedMotion: 0,
+    selectedSkill: 0,
+    selectedIdea: 0,
+    composerOpen: false,
+    composerField: 0,
+    assignEvent: "streaming",
+    skillCreate: false,
+    skillCreateName: "",
+  };
+}
+
+export function createDeckComponent(
+  rt: RuntimeState,
+  ctx: any,
+  initialRoute: DeckRoute,
+  theme: import("@earendil-works/pi-coding-agent").Theme,
+  done: () => void,
+) {
+  const refreshSnapshot = () => buildDeckSessionSnapshot(rt, ctx);
+  let state = createDeckNavState(
+    initialRoute,
+    appearanceIndex(refreshSnapshot().appearanceBase),
+  );
+  let composer: ComposerDraft | null = null;
+
+  const setRoute = (route: DeckRoute): void => {
+    const jumpingToAppearance = route === "appearance" && state.route !== "appearance";
+    state = {
+      ...state,
+      route,
+      selectedNav: deckRouteIndex(route),
+      composerOpen: false,
+      searchOpen: false,
+      searchQuery: "",
+      selectedAppearance: jumpingToAppearance
+        ? appearanceIndex(refreshSnapshot().appearanceBase)
+        : state.selectedAppearance,
+    };
+    composer = null;
+  };
+
+  const notify = (ok: boolean, okText: string, failText: string) => {
+    ctx.ui.notify(ok ? okText : failText, ok ? "info" : "warning");
+  };
+
+  return {
+    focused: true,
+    invalidate() {},
+    render(width: number) {
+      return renderDeckFrame(
+        theme,
+        width,
+        refreshSnapshot(),
+        state,
+        rt.resolvedShortcuts,
+        composer,
+        Date.now(),
+      );
+    },
+    handleInput(data: string) {
+      if (matchesKey(data, "escape")) {
+        if (state.composerOpen) {
+          state = { ...state, composerOpen: false };
+          composer = null;
+          return;
+        }
+        if (state.skillCreate) {
+          state = { ...state, skillCreate: false, skillCreateName: "" };
+          return;
+        }
+        if (state.searchOpen) {
+          state = { ...state, searchOpen: false, searchQuery: "" };
+          return;
+        }
+        done();
+        return;
+      }
+
+      if (data === "/" && !state.composerOpen) {
+        state = { ...state, searchOpen: true };
+        return;
+      }
+
+      if (state.searchOpen) {
+        handleSearch(data);
+        return;
+      }
+
+      if (data === "g" && !state.composerOpen) {
+        state = { ...state, pendingJump: "g" };
+        return;
+      }
+
+      if (state.pendingJump === "g" && data.length === 1 && isOverlayPrintable(data)) {
+        const route = deckRouteByJump(data);
+        state = { ...state, pendingJump: null };
+        if (route) setRoute(route);
+        return;
+      }
+
+      state = { ...state, pendingJump: null };
+
+      if (state.composerOpen && composer) {
+        handleComposer(data);
+        return;
+      }
+
+      if (state.route === "appearance") {
+        if (handleList(data, "selectedAppearance", STRUCTURAL_PRESET_NAMES.length)) return;
+        if (matchesKey(data, "enter")) {
+          const name = STRUCTURAL_PRESET_NAMES[state.selectedAppearance];
+          if (name) {
+            const ok = applyAppearanceBase(rt, ctx.cwd ?? process.cwd(), name);
+            const label = appearanceDisplayName(name);
+            notify(ok, `Appearance: ${label}`, `Appearance: ${label} (not persisted)`);
+          }
+          return;
+        }
+      }
+
+      if (state.route === "motion") {
+        const count = filterMotions(state.searchQuery).length;
+        if (handleList(data, "selectedMotion", count)) return;
+        if (data === "t") {
+          state = { ...state, assignEvent: cycleAssignEvent(state.assignEvent) };
+          return;
+        }
+        if (data === "e") {
+          const motion = selectedGalleryMotion(state);
+          if (motion) {
+            composer = draftFromMotion(motion, state.assignEvent);
+            state = { ...state, composerOpen: true, composerField: 0 };
+          }
+          return;
+        }
+        if (matchesKey(data, "enter")) {
+          const motion = selectedGalleryMotion(state);
+          if (motion) {
+            const ok = applyMotionAssignment(
+              rt,
+              ctx.cwd ?? process.cwd(),
+              state.assignEvent,
+              motion.id,
+            );
+            notify(
+              ok,
+              `Motion ${state.assignEvent}: ${motion.id}`,
+              `Motion ${motion.id} (not persisted)`,
+            );
+          }
+          return;
+        }
+      }
+
+      if (state.route === "skills") {
+        if (state.skillCreate) {
+          if (matchesKey(data, "enter")) {
+            const name = state.skillCreateName.trim();
+            if (!name) return;
+            try {
+              const { filePath } = writeSkillFromTemplate(name, "standard");
+              state = { ...state, skillCreate: false, skillCreateName: "" };
+              ctx.ui.notify(`Created ${name}. ${filePath}`, "info");
+            } catch (error) {
+              ctx.ui.notify(
+                error instanceof Error ? error.message : String(error),
+                "warning",
+              );
+            }
+            return;
+          }
+          if (matchesKey(data, "backspace")) {
+            state = { ...state, skillCreateName: state.skillCreateName.slice(0, -1) };
+            return;
+          }
+          if (isOverlayPrintable(data)) {
+            state = { ...state, skillCreateName: state.skillCreateName + data };
+            return;
+          }
+          return;
+        }
+        if (data === "n") {
+          state = { ...state, skillCreate: true, skillCreateName: "" };
+          return;
+        }
+        const snapshot = refreshSnapshot();
+        const rows = filterSkillRows(snapshot.skills, state.searchQuery);
+        if (handleList(data, "selectedSkill", rows.length)) return;
+        if (matchesKey(data, "enter")) {
+          const selected = rows[state.selectedSkill];
+          if (!selected) return;
+          const cwd = ctx.cwd ?? process.cwd();
+          const entry = loadSkillCatalog(cwd).find((skill) => skill.name === selected.name);
+          if (!entry) {
+            ctx.ui.notify(`Skill ${selected.name} not found`, "warning");
+            return;
+          }
+          insertSkillBody(ctx, entry.name, readSkillBody(entry.filePath));
+          ctx.ui.notify(`Inserted skill ${entry.name}`, "info");
+          done();
+          return;
+        }
+      }
+
+      if (state.route === "ideas") {
+        if (handleList(data, "selectedIdea", refreshSnapshot().ideas.length)) return;
+      }
+
+      if (matchesKey(data, "up")) {
+        const next = Math.max(0, state.selectedNav - 1);
+        setRoute(DECK_ROUTE_DEFS[next]?.id ?? state.route);
+        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);
+        return;
+      }
+
+      if (data === "?") {
+        setRoute("shortcuts");
+      }
+    },
+    dispose() {},
+  };
+
+  function handleList(
+    data: string,
+    key: "selectedAppearance" | "selectedMotion" | "selectedSkill" | "selectedIdea",
+    length: number,
+  ): boolean {
+    if (length <= 0) return false;
+    if (matchesKey(data, "up")) {
+      state = { ...state, [key]: Math.max(0, state[key] - 1) };
+      return true;
+    }
+    if (matchesKey(data, "down")) {
+      state = { ...state, [key]: Math.min(length - 1, state[key] + 1) };
+      return true;
+    }
+    return false;
+  }
+
+  function handleSearch(data: string): void {
+    const next = applyOverlayQueryKey(state.searchQuery, data);
+    if (next !== null) {
+      state = { ...state, searchQuery: next, selectedMotion: 0, selectedSkill: 0 };
+      if (state.route !== "motion" && state.route !== "skills") {
+        const matches = filterDeckRoutes(next);
+        if (matches.length === 1) {
+          state = { ...state, searchOpen: false, searchQuery: "" };
+          setRoute(matches[0]!);
+        }
+      }
+      return;
+    }
+    if (matchesKey(data, "enter")) {
+      if (state.route === "motion" || state.route === "skills") {
+        state = { ...state, searchOpen: false };
+        return;
+      }
+      const matches = filterDeckRoutes(state.searchQuery);
+      if (matches[0]) {
+        state = { ...state, searchOpen: false, searchQuery: "" };
+        setRoute(matches[0]);
+      }
+    }
+  }
+
+  function handleComposer(data: string): void {
+    if (!composer) return;
+    if (matchesKey(data, "up")) {
+      state = { ...state, composerField: Math.max(0, state.composerField - 1) };
+      return;
+    }
+    if (matchesKey(data, "down")) {
+      state = {
+        ...state,
+        composerField: Math.min(COMPOSER_FIELDS.length - 1, state.composerField + 1),
+      };
+      return;
+    }
+    const field = COMPOSER_FIELDS[state.composerField] as ComposerField;
+    if (matchesKey(data, "left")) {
+      composer = nudgeComposer(composer, field, -1);
+      return;
+    }
+    if (matchesKey(data, "right")) {
+      composer = nudgeComposer(composer, field, 1);
+      return;
+    }
+    if (matchesKey(data, "enter")) {
+      const ok = applyMotionAssignment(
+        rt,
+        ctx.cwd ?? process.cwd(),
+        composer.assignEvent,
+        composer.id,
+      );
+      notify(
+        ok,
+        `Motion ${composer.assignEvent}: ${composer.id}`,
+        `Motion ${composer.id} (not persisted)`,
+      );
+      state = { ...state, composerOpen: false, assignEvent: composer.assignEvent };
+      composer = null;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { RuntimeState } from "../../core/types.ts";
+import { createDeckComponent } from "./component.ts";
+import type { DeckRoute } from "./types.ts";
+
+export type { DeckRoute } from "./types.ts";
+export { DECK_ROUTES } from "./types.ts";
+export { parseDeckRouteArg, deckRouteByJump } from "./routes.ts";
+export { renderDeckFrame, filterDeckRoutes, deckFooter } from "./render.ts";
+export { buildDeckSessionSnapshot } from "./session-snapshot.ts";
+
+/** Open the unified Wishcraft Deck at the requested route. */
+export async function openWishcraftDeck(
+  rt: RuntimeState,
+  ctx: any,
+  route: DeckRoute = "home",
+): Promise<void> {
+  if (!rt.enabled || !ctx.hasUI) {
+    ctx.ui.notify("Signal UI is disabled", "info");
+    return;
+  }
+  rt.currentCtx = ctx;
+
+  await ctx.ui.custom(
+    (_tui: any, theme: any, _keybindings: any, done: () => void) =>
+      createDeckComponent(rt, ctx, route, theme, done),
+    {
+      overlay: true,
+      overlayOptions: () => ({
+        verticalAlign: "center",
+        horizontalAlign: "center",
+      }),
+    },
+  );
+}

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

@@ -0,0 +1,260 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { MOTION_CATALOG } from "../../../motion/catalog.ts";
+import { appearanceDisplayName } from "../../../config/structural-presets.ts";
+import { PRESETS } from "../../../config/presets.ts";
+import { config } from "../../core/state.ts";
+import type { PowerlineShortcuts } from "../../core/types.ts";
+import type { ComposerDraft } from "../../../motion/composer.ts";
+import { DECK_ROUTE_DEFS } from "./routes.ts";
+import type { DeckNavState, DeckRoute, DeckSessionSnapshot } from "./types.ts";
+import {
+  appearanceLines,
+  guardrailLines,
+  ideasLines,
+  motionGalleryLines,
+  skillsWorkbenchLines,
+} from "./route-bodies.ts";
+
+function bar(percent: number, width: number): string {
+  const filled = Math.round((Math.max(0, Math.min(100, percent)) / 100) * width);
+  return `${"█".repeat(filled)}${"░".repeat(Math.max(0, width - filled))}`;
+}
+
+function routeTitle(route: DeckRoute): string {
+  return DECK_ROUTE_DEFS.find((entry) => entry.id === route)?.label ?? "Home";
+}
+
+export function deckFooter(state: DeckNavState): string {
+  if (state.searchOpen) return `/ ${state.searchQuery}_`;
+  if (state.composerOpen) return "←→ nudge · ↑↓ field · enter apply · esc back";
+  if (state.skillCreate) return "type a name · enter create · esc cancel";
+  switch (state.route) {
+    case "appearance":
+      return "↑↓ select base · enter apply · / Search · g h Home · Esc Close";
+    case "motion":
+      return "↑↓ motion · t event · e composer · enter apply · Esc Close";
+    case "skills":
+      return "↑↓ skill · enter insert · n new · / filter · Esc Close";
+    case "ideas":
+      return "↑↓ idea · / Search · g h Home · Esc Close";
+    default:
+      return "/ Search   g h Home   g s Signal   g i Ideas   ? Help   Esc Close";
+  }
+}
+
+export function renderDeckFrame(
+  theme: Theme,
+  width: number,
+  snapshot: DeckSessionSnapshot,
+  state: DeckNavState,
+  shortcuts: PowerlineShortcuts,
+  composer: ComposerDraft | null = null,
+  tick = Date.now(),
+): string[] {
+  const inner = Math.max(40, width - 2);
+  const border = (text: string) => theme.fg("dim", text);
+  const wrap = (text: string) =>
+    `${border("│")}${truncateToWidth(text, inner, "…", true)}${border("│")}`;
+
+  const leftW = Math.max(14, Math.floor(inner * 0.18));
+  const rightW = Math.max(18, Math.floor(inner * 0.24));
+  const centerW = Math.max(20, inner - leftW - rightW - 4);
+
+  const header = ` ◈ ${snapshot.modelLabel}   ${snapshot.branchLabel}   context ${snapshot.contextPercent}%   ${snapshot.signalActivity.toUpperCase()} `;
+  const lines: string[] = [];
+  lines.push(border(`╭${"─".repeat(inner)}╮`));
+  lines.push(wrap(theme.fg("accent", theme.bold(truncateToWidth(header, inner, "…", true)))));
+  lines.push(border(`├${"─".repeat(inner)}┤`));
+
+  const nav = navLines(snapshot, state, theme, leftW);
+  const center = centerRouteBody(snapshot, state, theme, centerW, shortcuts, composer, tick);
+  const right = rightRail(snapshot, theme, rightW);
+
+  const rowCount = Math.max(nav.length, center.length, right.length, 8);
+  for (let i = 0; i < rowCount; i++) {
+    const left = padCol(nav[i] ?? "", leftW);
+    const mid = padCol(center[i] ?? "", centerW);
+    const rightCol = padCol(right[i] ?? "", rightW);
+    lines.push(wrap(`${left} ${mid} ${rightCol}`));
+  }
+
+  lines.push(border(`├${"─".repeat(inner)}┤`));
+  const footer = deckFooter(state);
+  lines.push(wrap(theme.fg("dim", truncateToWidth(footer, inner, "…", true))));
+  lines.push(border(`╰${"─".repeat(inner)}╯`));
+  return lines;
+}
+
+function navLines(
+  snapshot: DeckSessionSnapshot,
+  state: DeckNavState,
+  theme: Theme,
+  width: number,
+): string[] {
+  const lines: string[] = [theme.fg("accent", "NAVIGATION")];
+  for (const route of DECK_ROUTE_DEFS) {
+    const active = route.id === state.route;
+    const marker = active ? "◉" : "◇";
+    let suffix = "";
+    if (route.id === "skills") suffix = ` ${snapshot.skillsTotal}`;
+    if (route.id === "ideas") suffix = ` ${snapshot.ideaCount}`;
+    lines.push(
+      theme.fg(
+        active ? "accent" : "muted",
+        truncateToWidth(`${marker} ${route.label}${suffix}`, width, "…", true),
+      ),
+    );
+  }
+  return lines;
+}
+
+function centerRouteBody(
+  snapshot: DeckSessionSnapshot,
+  state: DeckNavState,
+  theme: Theme,
+  width: number,
+  shortcuts: PowerlineShortcuts,
+  composer: ComposerDraft | null = null,
+  tick = Date.now(),
+): string[] {
+  const title = theme.fg("accent", `ACTIVE ROUTE: ${routeTitle(state.route).toUpperCase()}`);
+  const body: string[] = [title, ""];
+  switch (state.route) {
+    case "home":
+      body.push(theme.fg("text", "CURRENT SESSION"));
+      body.push(
+        theme.fg(
+          "accent",
+          truncateToWidth(`◆ ${snapshot.signalActivity}`, width, "…", true),
+        ),
+      );
+      body.push(
+        truncateToWidth(
+          `${bar(snapshot.contextPercent, Math.min(18, width - 12))} ${snapshot.contextPercent}% (${formatK(snapshot.contextTokens)} / ${formatK(snapshot.contextWindow)})`,
+          width,
+          "…",
+          true,
+        ),
+      );
+      body.push(
+        truncateToWidth(
+          `${appearanceDisplayName(snapshot.appearanceBase)} · ${snapshot.signalMotion} · ${snapshot.motionLevel}`,
+          width,
+          "…",
+          true,
+        ),
+      );
+      body.push("");
+      body.push(theme.fg("text", "NEXT INTENT"));
+      body.push(
+        truncateToWidth(snapshot.nextIntent ?? "No queued intent", width, "…", true),
+      );
+      break;
+    case "signal":
+      body.push("THREE LANES");
+      body.push("Identity · Activity · Context");
+      body.push(`Layout ${config.preset} · placement ${config.placement}`);
+      body.push(
+        `Base ${appearanceDisplayName(snapshot.appearanceBase)} · motion ${snapshot.signalMotion}`,
+      );
+      body.push(`Level ${snapshot.motionLevel} · activity ${snapshot.signalActivity}`);
+      body.push("Use /signal preset · placement · doctor");
+      break;
+    case "skills":
+      body.push(...skillsWorkbenchLines(snapshot, state, width));
+      break;
+    case "ideas":
+      body.push(...ideasLines(snapshot, state));
+      break;
+    case "guardrails":
+      body.push(...guardrailLines(snapshot));
+      break;
+    case "shell":
+      body.push(`Bash mode: ${snapshot.bashModeActive ? "on" : "off"}`);
+      body.push(`Shell: ${snapshot.shellName ?? "not started"}`);
+      body.push("Toggle with /bash-mode");
+      break;
+    case "usage":
+      body.push(
+        `Context ${snapshot.contextPercent}% · ${formatK(snapshot.contextTokens)} tokens`,
+      );
+      body.push("Open /usage for detailed overlay");
+      break;
+    case "appearance":
+      body.push(...appearanceLines(snapshot, state));
+      break;
+    case "motion":
+      body.push(...motionGalleryLines(snapshot, state, width, composer, tick));
+      break;
+    case "shortcuts":
+      body.push(`Menu: ${shortcuts.menu ?? "alt+p"}`);
+      body.push(`Queue: ${shortcuts.queueOpen ?? "ctrl+alt+q"}`);
+      body.push(`Info: ${shortcuts.info ?? "alt+i"}`);
+      body.push("g <key> jumps inside the Deck");
+      break;
+    case "diagnostics":
+      body.push("Run /signal doctor for the full environment report");
+      body.push(snapshot.policySummary);
+      body.push(`Preset: ${config.preset} · base ${snapshot.appearanceBase}`);
+      body.push(`Catalog: ${MOTION_CATALOG.length} motions`);
+      break;
+  }
+  return body.map((line) => truncateToWidth(line, width, "…", true));
+}
+
+function rightRail(snapshot: DeckSessionSnapshot, theme: Theme, width: number): string[] {
+  const lines = [theme.fg("accent", "ACTIVITY FEED"), ""];
+  if (snapshot.recentActivity.length === 0) {
+    lines.push(theme.fg("muted", "No recent activity"));
+  } else {
+    for (const item of snapshot.recentActivity) {
+      lines.push(truncateToWidth(`· ${item}`, width, "…", true));
+    }
+  }
+  lines.push("");
+  lines.push(theme.fg("accent", "SKILLS HEALTH"));
+  lines.push(`✓ ${snapshot.skillsTotal - snapshot.skillsWarnings} healthy`);
+  if (snapshot.skillsWarnings > 0) {
+    lines.push(theme.fg("warning", `! ${snapshot.skillsWarnings} warnings`));
+  }
+  lines.push("");
+  lines.push(theme.fg("accent", "GUARDRAILS"));
+  lines.push(
+    truncateToWidth(
+      `Policy: ${snapshot.policyEnabled ? "ON" : "OFF"} (${snapshot.policyRuleCount})`,
+      width,
+      "…",
+      true,
+    ),
+  );
+  return lines;
+}
+
+function padCol(text: string, width: number): string {
+  const plain = stripAnsi(text);
+  if (plain.length >= width) return truncateToWidth(text, width, "…", true);
+  return text + " ".repeat(width - plain.length);
+}
+
+function stripAnsi(text: string): string {
+  return text.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
+function formatK(value: number): string {
+  if (value >= 1000) return `${Math.round(value / 1000)}k`;
+  return String(value);
+}
+
+export function filterDeckRoutes(query: string): DeckRoute[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return DECK_ROUTE_DEFS.map((route) => route.id);
+  return DECK_ROUTE_DEFS.filter((route) => {
+    const hay = `${route.label} ${route.id} ${route.description}`.toLowerCase();
+    return hay.includes(q);
+  }).map((route) => route.id);
+}
+
+export function layoutPresetNames(): string[] {
+  return Object.keys(PRESETS);
+}