@sherif-fanous/pi-presets-plus 0.1.0

package/src/ui/reload-prompt.ts

@@ -0,0 +1,59 @@
+/**
+ * Reload confirmation helper shared by commit-time preset mutations.
+ *
+ * Owns the user-facing reload prompt and guarded `ctx.reload()` invocation;
+ * it does NOT own deciding whether a particular preset mutation needs a
+ * reload.
+ */
+import { openConfirm } from "./confirm.js";
+import { RELOAD_PROMPT_TITLE } from "./labels.js";
+import type { ExtensionCommandContext } from "@mariozechner/pi-coding-agent";
+
+const RELOAD_PROMPT_BODY =
+  "Hotkey changes take effect after a reload. Reload now?";
+
+interface ReloadContext {
+  readonly reload?: () => Promise<void>;
+  readonly ui: ExtensionCommandContext["ui"];
+}
+
+/** Ask whether Pi should reload now, returning false when reload is unavailable. */
+export async function confirmReload(ctx: ReloadContext): Promise<boolean> {
+  if (typeof ctx.reload !== "function") return false;
+
+  return openConfirm(ctx, RELOAD_PROMPT_TITLE, RELOAD_PROMPT_BODY);
+}
+
+/**
+ * Reload Pi after giving custom overlays a turn to resolve and unmount.
+ *
+ * Reload failures are reported to the user instead of escaping the calling
+ * editor or picker flow. Callers should resolve their overlay before invoking
+ * this helper; otherwise stale TUI components may survive the extension reload.
+ */
+export function reloadAfterOverlayClose(ctx: ReloadContext): void {
+  const { reload } = ctx;
+
+  if (typeof reload !== "function") return;
+
+  setTimeout(() => {
+    void reloadPi({ reload, ui: ctx.ui });
+  }, 0);
+}
+
+function formatError(error: unknown): string {
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+
+  return "unknown error";
+}
+
+async function reloadPi(
+  ctx: Required<Pick<ReloadContext, "reload" | "ui">>,
+): Promise<void> {
+  try {
+    await ctx.reload();
+  } catch (error) {
+    ctx.ui.notify(`Failed to reload Pi: ${formatError(error)}.`, "error");
+  }
+}

package/src/ui/status.ts

@@ -0,0 +1,55 @@
+/**
+ * Status-bar rendering for active presets.
+ *
+ * Owns the compact `presets-plus` footer status entry; it does NOT
+ * compute drift or mutate active state.
+ */
+import type { ActivePresetState, LoadedPreset } from "../types.js";
+import type { ExtensionContext } from "@mariozechner/pi-coding-agent";
+
+const STATUS_KEY = "presets-plus";
+
+/** Minimal context surface needed to update footer status. */
+type StatusContext = Pick<ExtensionContext, "ui">;
+
+/** Render or clear the active-preset status badge. */
+export function updateStatus(
+  ctx: StatusContext,
+  active: ActivePresetState | undefined,
+  lookup: (
+    name: string,
+    scope: ActivePresetState["scope"],
+  ) => LoadedPreset | undefined,
+): void {
+  if (!active) {
+    ctx.ui.setStatus(STATUS_KEY, dim(ctx, "Preset: none"));
+
+    return;
+  }
+
+  const preset = lookup(active.name, active.scope);
+
+  if (!preset) {
+    ctx.ui.setStatus(STATUS_KEY, dim(ctx, "Preset: none"));
+
+    return;
+  }
+
+  const label = dim(ctx, `Preset: ${preset.name}`);
+
+  if (!active.dirty) {
+    ctx.ui.setStatus(STATUS_KEY, label);
+
+    return;
+  }
+
+  ctx.ui.setStatus(STATUS_KEY, `${label}${warning(ctx, "!")}`);
+}
+
+function dim(ctx: StatusContext, text: string): string {
+  return ctx.ui.theme?.fg("dim", text) ?? text;
+}
+
+function warning(ctx: StatusContext, text: string): string {
+  return ctx.ui.theme?.fg("warning", text) ?? text;
+}

package/src/ui/widgets.ts

@@ -0,0 +1,274 @@
+/**
+ * Reusable preset-picker widget primitives.
+ *
+ * Owns readable key/value preset card rendering; it does NOT own picker
+ * state, keyboard handling, or activation.
+ */
+import type { LoadedPreset } from "../types.js";
+import {
+  MODEL_LABEL,
+  SCOPE_LABEL,
+  STATUS_LABEL,
+  THINKING_LABEL,
+  TOOLS_LABEL,
+} from "./labels.js";
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth, type Component } from "@mariozechner/pi-tui";
+
+export interface PresetCardOptions {
+  active: boolean;
+  dirty?: boolean;
+  driftReasons?: readonly string[];
+  inheritedTools?: readonly string[];
+  selected: boolean;
+  showShadowed?: boolean;
+}
+
+/**
+ * Minimum theme surface needed by the preset card and its formatters.
+ *
+ * Restricting to `fg` + `bold` (matching the `Styler` pattern in
+ * `activation/clear.ts`) lets tests pass an honest stub without an
+ * `as unknown as Theme` cast and makes future Theme additions
+ * visible at the call sites that actually need them.
+ */
+type CardTheme = Pick<Theme, "fg" | "bold">;
+
+type ThinkingColor = Parameters<Theme["fg"]>[0];
+
+const FIELD_LABEL_WIDTH = Math.max(
+  "Shadowing:".length,
+  `${THINKING_LABEL}:`.length,
+);
+const PROMPT_PREVIEW_WIDTH = 60;
+
+class PresetCardComponent implements Component {
+  constructor(
+    private readonly loadedPreset: LoadedPreset,
+    private readonly theme: CardTheme,
+    private readonly options: PresetCardOptions,
+  ) {}
+
+  invalidate(): void {}
+
+  render(width: number): string[] {
+    const titlePrefix = this.options.selected
+      ? this.theme.fg("accent", "▌ ")
+      : "  ";
+    const dot = this.theme.fg(
+      this.options.active ? "success" : "dim",
+      formatStatusDot(this.options.active),
+    );
+    const displayName = this.options.active
+      ? this.theme.fg("accent", this.theme.bold(this.loadedPreset.name))
+      : this.theme.fg("text", this.loadedPreset.name);
+    const lines = [`${titlePrefix}${dot} ${displayName}`];
+
+    lines.push(
+      this.renderField(`${SCOPE_LABEL}:`, formatScopeValue(this.loadedPreset)),
+    );
+
+    lines.push(
+      this.renderField(
+        `${MODEL_LABEL}:`,
+        `${this.loadedPreset.provider} / ${this.loadedPreset.model}`,
+      ),
+    );
+
+    lines.push(
+      this.renderField(
+        `${THINKING_LABEL}:`,
+        this.theme.fg(
+          thinkingColor(this.loadedPreset.thinkingLevel ?? "off"),
+          formatThinkingLevel(this.loadedPreset.thinkingLevel ?? "off"),
+        ),
+      ),
+    );
+
+    lines.push(
+      this.renderField(
+        `${TOOLS_LABEL}:`,
+        formatToolsSummary(
+          this.loadedPreset.tools,
+          this.options.inheritedTools ?? [],
+        ),
+      ),
+    );
+
+    const promptPreview = formatInstructionsPreview(
+      this.loadedPreset.instructions,
+    );
+
+    if (promptPreview.length > 0) {
+      lines.push(this.renderField("Prompt:", promptPreview));
+    }
+
+    if (this.loadedPreset.clampWarning === true) {
+      lines.push(
+        this.renderField(
+          `${STATUS_LABEL}:`,
+          this.theme.fg("warning", "⚠ Thinking will be clamped."),
+        ),
+      );
+    }
+
+    if (this.loadedPreset.hotkeyConflict === true) {
+      lines.push(
+        this.renderField(
+          `${STATUS_LABEL}:`,
+          this.theme.fg("warning", "⚠ Hotkey conflict."),
+        ),
+      );
+    }
+
+    if (this.loadedPreset.hotkeyShadowsBuiltin === true) {
+      lines.push(
+        this.renderField(
+          `${STATUS_LABEL}:`,
+          this.theme.fg("warning", "⚠ Hotkey shadows a Pi built-in."),
+        ),
+      );
+    }
+
+    const availabilityStatus = formatAvailabilityStatus(this.loadedPreset);
+
+    if (availabilityStatus.length > 0) {
+      lines.push(
+        this.renderField(
+          `${STATUS_LABEL}:`,
+          this.theme.fg("warning", availabilityStatus),
+        ),
+      );
+    }
+
+    if (
+      this.options.active &&
+      this.options.dirty &&
+      this.options.driftReasons &&
+      this.options.driftReasons.length > 0
+    ) {
+      lines.push(
+        this.renderField(
+          "Drift:",
+          this.theme.fg(
+            "warning",
+            `⚠ Dirty — ${this.options.driftReasons.join(", ")} differ`,
+          ),
+        ),
+      );
+    }
+
+    if (this.loadedPreset.shadowed && this.options.showShadowed !== false) {
+      lines.push(
+        this.renderField(
+          "Shadowing:",
+          this.theme.fg("dim", "Overridden by project preset"),
+        ),
+      );
+    }
+
+    return lines.map((line) => truncateToWidth(line, width, "…"));
+  }
+
+  private renderField(label: string, value: string): string {
+    const padding = " ".repeat(Math.max(0, FIELD_LABEL_WIDTH - label.length));
+
+    return `  ${this.theme.fg("muted", label)}${padding} ${value}`;
+  }
+}
+
+export function formatAvailabilityStatus(loadedPreset: LoadedPreset): string {
+  switch (loadedPreset.unavailable) {
+    case "no-key":
+      return "⚠ This preset's provider has no API key configured.";
+    case "no-model":
+      return "⚠ This preset's model is no longer available.";
+    case undefined:
+      return "";
+    default:
+      return "";
+  }
+}
+
+export function formatInstructionsPreview(
+  instructions: string | undefined,
+): string {
+  if (!instructions) return "";
+
+  const singleLine = instructions.replaceAll(/\s+/g, " ").trim();
+
+  if (singleLine.length <= PROMPT_PREVIEW_WIDTH) return singleLine;
+
+  return `${singleLine.slice(0, PROMPT_PREVIEW_WIDTH - 1).trimEnd()}…`;
+}
+
+export function formatScopeValue(loadedPreset: LoadedPreset): string {
+  return loadedPreset.scope === "project" ? "Project" : "User";
+}
+
+export function formatStatusDot(active: boolean): string {
+  return active ? "●" : " ";
+}
+
+export function formatThinkingLevel(
+  level: NonNullable<LoadedPreset["thinkingLevel"]>,
+): string {
+  switch (level) {
+    case "minimal":
+      return "Minimal";
+    case "low":
+      return "Low";
+    case "medium":
+      return "Medium";
+    case "high":
+      return "High";
+    case "xhigh":
+      return "X-High";
+    case "off":
+      return "Off";
+  }
+}
+
+export function formatToolsSummary(
+  tools: readonly string[] | undefined,
+  inheritedTools: readonly string[] = [],
+): string {
+  if (tools && tools.length > 0) return `Preset: ${tools.join(", ")}`;
+  if (inheritedTools.length === 0) return "Session";
+
+  return `Session: ${inheritedTools.join(", ")}`;
+}
+
+/**
+ * Multi-line component for a single loaded preset.
+ *
+ * The card is intentionally stateless: callers pass active/selected flags on
+ * construction and rebuild cards when state changes. This keeps rendering
+ * deterministic and easy for future editor dialogs to share.
+ */
+export function presetCard(
+  loadedPreset: LoadedPreset,
+  theme: CardTheme,
+  options: PresetCardOptions,
+): Component {
+  return new PresetCardComponent(loadedPreset, theme, options);
+}
+
+function thinkingColor(
+  level: NonNullable<LoadedPreset["thinkingLevel"]>,
+): ThinkingColor {
+  switch (level) {
+    case "minimal":
+      return "thinkingMinimal";
+    case "low":
+      return "thinkingLow";
+    case "medium":
+      return "thinkingMedium";
+    case "high":
+      return "thinkingHigh";
+    case "xhigh":
+      return "thinkingXhigh";
+    case "off":
+      return "thinkingOff";
+  }
+}