@skaile/forge-app-actions 0.0.0-stage → 0.2.0

package/src/runtime/components-nuxt-ui/ForgeCommandPalette.vue

@@ -0,0 +1,363 @@
+<script setup lang="ts">
+/**
+ * ForgeCommandPalette — global Cmd+K / Ctrl+K command palette, built on
+ * UModal (backdrop) + UInput (search).
+ *
+ * No props, no emits. All state lives in the useCommandPalette singleton.
+ * Mount once in app.vue (outside any auth gate).
+ */
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useCommandPalette } from "../composables/useCommandPalette";
+import { usePaletteArgStep } from "../composables/usePaletteArgStep";
+import type { PaletteAction } from "../types/command-palette";
+
+const { queryActions, isOpen, open, close } = useCommandPalette();
+
+// ── Search input ───────────────────────────────────────────────────────────
+const search = ref("");
+const selectedIndex = ref(0);
+const searchInputRef = ref<{ inputRef?: HTMLInputElement } | null>(null);
+
+// ── Argument step ──────────────────────────────────────────────────────────
+// An action that declares `arg` needs one string before it can run. Selecting
+// it swaps the list for its candidates and waits for a second Enter; Escape
+// steps back to the action list rather than closing the palette.
+const argStep = usePaletteArgStep();
+
+// ── Filtered results ───────────────────────────────────────────────────────
+const filteredActions = computed(() => (argStep.active.value ? [] : queryActions(search.value)));
+
+/** Rows currently rendered — actions, or the pending action's candidates. */
+const rowCount = computed(() =>
+  argStep.active.value ? argStep.options.value.length : filteredActions.value.length,
+);
+
+// Reset selection when results change
+watch(filteredActions, () => {
+  selectedIndex.value = 0;
+});
+
+// Typing during the argument step re-queries the action's candidates.
+watch(search, (value) => {
+  if (!argStep.active.value) return;
+  selectedIndex.value = 0;
+  void argStep.query(value);
+});
+
+// Reset search when dialog closes
+watch(isOpen, (open) => {
+  if (!open) {
+    search.value = "";
+    selectedIndex.value = 0;
+    argStep.cancel();
+  } else {
+    // Focus input after dialog opens (guard: stub / no-op in tests)
+    nextTick(() => focusSearch());
+  }
+});
+
+/** Focus the palette input. Guarded: a stubbed ref in tests is a no-op. */
+function focusSearch() {
+  searchInputRef.value?.inputRef?.focus();
+}
+
+// ── Group headers ──────────────────────────────────────────────────────────
+function getGroupHeader(index: number): string | null {
+  const action = filteredActions.value[index];
+  if (!action?.group) return null;
+  if (index === 0) return action.group;
+  const prev = filteredActions.value[index - 1];
+  if (prev?.group !== action.group) return action.group;
+  return null;
+}
+
+// ── Keyboard navigation ────────────────────────────────────────────────────
+function handleDialogKeydown(e: KeyboardEvent) {
+  // Escape and Enter must work even with an empty list: Escape backs out of the
+  // argument step, and a free-text argument has no rows to highlight.
+  if (e.key === "Escape") {
+    e.preventDefault();
+    if (argStep.active.value) {
+      argStep.cancel();
+      search.value = "";
+      selectedIndex.value = 0;
+      return;
+    }
+    close();
+    return;
+  }
+
+  const count = rowCount.value;
+
+  if (e.key === "ArrowDown") {
+    if (count === 0) return;
+    e.preventDefault();
+    selectedIndex.value = (selectedIndex.value + 1) % count;
+  } else if (e.key === "ArrowUp") {
+    if (count === 0) return;
+    e.preventDefault();
+    selectedIndex.value = (selectedIndex.value - 1 + count) % count;
+  } else if (e.key === "Enter") {
+    e.preventDefault();
+    if (argStep.active.value) {
+      void submitArg();
+    } else {
+      void selectAction(filteredActions.value[selectedIndex.value]);
+    }
+  }
+}
+
+/**
+ * A thrown action must not become an unhandled rejection — the palette has
+ * already closed by then and there is nothing left to show it on.
+ */
+async function runAction(action: PaletteAction, value?: string) {
+  try {
+    await action.handler(value);
+  } catch (err) {
+    console.error(`[ForgeCommandPalette] action "${action.id}" failed:`, err);
+  }
+}
+
+async function selectAction(action: PaletteAction | undefined) {
+  if (!action) return;
+  // An action that needs an argument keeps the palette open for the second step.
+  if (argStep.begin(action)) {
+    search.value = "";
+    selectedIndex.value = 0;
+    nextTick(() => focusSearch());
+    return;
+  }
+  close();
+  await runAction(action);
+}
+
+/** Complete the argument step with the highlighted row or the typed value. */
+async function submitArg() {
+  const action = argStep.action.value;
+  if (!action) return;
+  const value = argStep.valueFor(search.value, selectedIndex.value);
+  if (value === null) return; // nothing to run with yet
+  argStep.cancel();
+  close();
+  await runAction(action, value);
+}
+
+/** Click on a candidate row during the argument step. */
+async function selectArgOption(index: number) {
+  selectedIndex.value = index;
+  await submitArg();
+}
+
+// ── Global Cmd+K shortcut ──────────────────────────────────────────────────
+function handleGlobalKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+    e.preventDefault();
+    open();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("keydown", handleGlobalKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleGlobalKeydown);
+});
+</script>
+
+<template>
+  <!-- Nuxt UI Modal as the palette backdrop. #content gives full control of the
+       panel (no default header/footer). -->
+  <UModal
+    :open="isOpen"
+    :ui="{ content: 'max-w-[560px] w-[95vw] p-0' }"
+    @update:open="(v: boolean) => !v && close()"
+  >
+    <template #content>
+      <div class="forge-command-palette" @keydown="handleDialogKeydown">
+        <div v-if="argStep.active.value" class="forge-command-palette__breadcrumb">
+          {{ argStep.prompt.value?.label ?? argStep.action.value?.label }}
+        </div>
+
+        <!-- Search input -->
+        <div class="forge-command-palette__search">
+          <UInput
+            ref="searchInputRef"
+            v-model="search"
+            :placeholder="argStep.active.value
+              ? (argStep.prompt.value?.placeholder ?? 'Type a value…')
+              : 'Search commands…'"
+            variant="none"
+            autofocus
+            :ui="{ root: 'w-full' }"
+            class="forge-command-palette__input"
+          />
+        </div>
+
+        <!-- Results list -->
+        <div class="forge-command-palette__list" role="listbox">
+          <!-- Argument step: the pending action's candidates -->
+          <template v-if="argStep.active.value">
+            <div v-if="argStep.options.value.length === 0" class="forge-command-palette__empty">
+              {{ argStep.loading.value ? "Searching…" : "Type a value and press Enter" }}
+            </div>
+            <button
+              v-for="(option, index) in argStep.options.value"
+              :key="option.value"
+              type="button"
+              class="forge-command-palette__item"
+              :class="{ 'forge-command-palette__item--selected': index === selectedIndex }"
+              role="option"
+              :aria-selected="index === selectedIndex"
+              @click="selectArgOption(index)"
+              @mouseenter="selectedIndex = index"
+            >
+              <span v-if="option.icon" class="forge-command-palette__icon">
+                <Icon :name="option.icon" />
+              </span>
+              <span class="forge-command-palette__text">
+                <span class="forge-command-palette__label">{{ option.label }}</span>
+                <span
+                  v-if="option.description"
+                  class="forge-command-palette__description"
+                >{{ option.description }}</span>
+              </span>
+            </button>
+          </template>
+
+          <template v-if="!argStep.active.value && filteredActions.length === 0">
+            <div class="forge-command-palette__empty">No commands found</div>
+          </template>
+
+          <template v-for="(action, index) in filteredActions" :key="action.id">
+            <!-- Group header -->
+            <div
+              v-if="getGroupHeader(index)"
+              class="forge-command-palette__group"
+            >
+              {{ getGroupHeader(index) }}
+            </div>
+
+            <!-- Action row -->
+            <button
+              type="button"
+              class="forge-command-palette__item"
+              :class="{ 'forge-command-palette__item--selected': index === selectedIndex }"
+              role="option"
+              :aria-selected="index === selectedIndex"
+              @click="selectAction(action)"
+              @mouseenter="selectedIndex = index"
+            >
+              <span v-if="action.icon" class="forge-command-palette__icon">
+                <Icon :name="action.icon" />
+              </span>
+              <span class="forge-command-palette__text">
+                <span class="forge-command-palette__label">{{ action.label }}</span>
+                <span
+                  v-if="action.description"
+                  class="forge-command-palette__description"
+                >{{ action.description }}</span>
+              </span>
+            </button>
+          </template>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.forge-command-palette__breadcrumb {
+  padding: 10px 12px 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.forge-command-palette {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.forge-command-palette__search {
+  padding: 12px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.forge-command-palette__input {
+  width: 100%;
+  font-size: 0.95rem;
+}
+
+.forge-command-palette__list {
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.forge-command-palette__empty {
+  padding: 16px;
+  text-align: center;
+  color: #94a3b8;
+  font-size: 0.875rem;
+}
+
+.forge-command-palette__group {
+  padding: 4px 8px 2px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #94a3b8;
+  margin-top: 4px;
+}
+
+.forge-command-palette__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  transition: background 0.1s ease;
+}
+
+.forge-command-palette__item--selected {
+  background: #f1f5f9;
+}
+
+.forge-command-palette__icon {
+  width: 20px;
+  flex-shrink: 0;
+  color: #64748b;
+}
+
+.forge-command-palette__text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.forge-command-palette__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.forge-command-palette__description {
+  font-size: 0.775rem;
+  color: #94a3b8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/src/runtime/composables/defineClientCapability.ts

@@ -0,0 +1,119 @@
+/**
+ * `defineClientCapability` — authoring helper for a browser-side agent
+ * capability. Mirrors `@skaile/workspaces/app-sdk`'s `defineAppCapability`
+ * field-for-field; see `../types/client-capability` for the two deliberate
+ * divergences (`side`, `origin`).
+ *
+ * Auto-imported in consumer apps via the module's `addImportsDir` on
+ * `runtime/composables`. Also reachable explicitly through the
+ * `@skaile/forge-app-actions/client-capabilities` subpath.
+ */
+
+import * as z from "zod";
+import type {
+  ClientCapabilityContext,
+  DefineClientCapabilityArgs,
+  DefinedClientCapability,
+} from "../types/client-capability";
+
+/**
+ * Build a {@link DefinedClientCapability} from author-friendly Zod-typed args.
+ *
+ * The wire `inputSchema` / `outputSchema` are **derived** from the Zod schemas
+ * via `z.toJSONSchema()` (zod v4 only) — they are never hand-written, which is
+ * what buys the validation the raw-JSON-Schema capabilities never had.
+ *
+ * `side` is fixed to `"client"`. `origin` is stamped by `ClientCapabilityBridge`
+ * when the announcement reaches Nitro.
+ *
+ * @example
+ * ```ts
+ * export const openFile = defineClientCapability({
+ *   name: "app.workspace.open_file",
+ *   displayName: "Open file in viewer",
+ *   description: "Open a file in the user's file viewer.",
+ *   kind: "effect",
+ *   audience: ["llm", "user"],
+ *   input: z.object({ path: z.string().min(1), line: z.number().optional() }),
+ *   output: z.object({ opened: z.boolean(), path: z.string() }),
+ *   handler: async ({ path, line }) => ({ opened: await openInViewer(path, line), path }),
+ * })
+ * ```
+ */
+export function defineClientCapability<
+  T extends z.ZodType,
+  R extends z.ZodType | undefined = undefined,
+>(args: DefineClientCapabilityArgs<T, R>): DefinedClientCapability {
+  const inputSchema = z.toJSONSchema(args.input, {
+    target: "draft-07",
+    io: "input",
+  }) as Record<string, unknown>;
+
+  const outputSchema = args.output
+    ? (z.toJSONSchema(args.output, {
+        target: "draft-07",
+        io: "output",
+      }) as Record<string, unknown>)
+    : undefined;
+
+  return {
+    name: args.name,
+    displayName: args.displayName,
+    description: args.description,
+    inputSchema,
+    outputSchema,
+    side: "client",
+    scope: args.scope,
+    requiresApproval: args.requiresApproval,
+    kind: args.kind,
+    audience: args.audience,
+    promptFragment: args.promptFragment,
+    callTimeoutMs: args.callTimeoutMs,
+    render: args.render,
+    inputZod: args.input,
+    outputZod: args.output,
+    handler: args.handler as (args: unknown, ctx: ClientCapabilityContext) => Promise<unknown>,
+  };
+}
+
+/**
+ * Register an old capability name as a **deprecated alias** of a defined one.
+ *
+ * Renaming a capability is not free: `promptFragment` text names the old name
+ * literally, and agent definitions in the wild may too (spec §2.2). The alias is
+ * a second registry entry — same `inputZod`, same `outputZod`, same handler
+ * *instance* — so an invocation of either name runs exactly the same code, and
+ * the alias needs no separate maintenance.
+ *
+ * Two deliberate differences from the capability it aliases:
+ *  - `audience` is narrowed to `["llm"]`. The alias exists only for callers that
+ *    already know the old name; a deprecated duplicate has no business appearing
+ *    in a user-facing surface like Cmd+K.
+ *  - `description` and `promptFragment` are prefixed with a deprecation notice
+ *    naming the replacement, because the wire `Capability` type has no
+ *    `deprecated` flag — the model reads prose or it reads nothing.
+ *
+ * @param capability the current definition, which owns the handler
+ * @param name the old name to keep answering
+ *
+ * @example
+ * ```ts
+ * export const openFile = defineClientCapability({ name: "app.workspace.open_file", … })
+ * export const openFileAlias = deprecatedClientCapabilityAlias(openFile, "forge.open_file")
+ * ```
+ */
+export function deprecatedClientCapabilityAlias(
+  capability: DefinedClientCapability,
+  name: string,
+): DefinedClientCapability {
+  const notice = `DEPRECATED: use \`${capability.name}\` instead. This name still works but will be removed.`;
+  return {
+    ...capability,
+    name,
+    description: `${notice} ${capability.description}`,
+    audience: ["llm"],
+    promptFragment: capability.promptFragment
+      ? `${notice}\n${capability.promptFragment}`
+      : undefined,
+  };
+}