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

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

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+/**
+ * ForgeCapabilityApproval — the confirm gate for `requiresApproval`
+ * capabilities, built on UModal + UButton.
+ *
+ * No props, no emits. All state lives in the `useCapabilityApproval` singleton,
+ * which `useCapabilityInvocations().handle()` feeds. Mount once in `app.vue`.
+ *
+ * Closing without choosing (Escape, backdrop) counts as a decline. The safe
+ * default for "should this thing touch your workspace?" is no.
+ */
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useCapabilityApproval } from "../composables/useCapabilityApproval";
+
+const { current, approve, decline } = useCapabilityApproval();
+
+const title = computed(() => current.value?.displayName || current.value?.name || "");
+
+/**
+ * The arguments, as rows. An object becomes one row per key; anything else
+ * (a bare string, a number) becomes a single unnamed row. The user is
+ * approving a specific call, so the specific values have to be on screen.
+ */
+const argumentRows = computed<Array<{ key: string; value: string }>>(() => {
+  const input = current.value?.input;
+  if (input === undefined || input === null) return [];
+  if (typeof input === "object" && !Array.isArray(input)) {
+    return Object.entries(input as Record<string, unknown>).map(([key, value]) => ({
+      key,
+      value: format(value),
+    }));
+  }
+  return [{ key: "", value: format(input) }];
+});
+
+function format(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+// ── Countdown ──────────────────────────────────────────────────────────────
+// A gate with an invisible deadline is a trap: the user needs to know the
+// dialog will answer for them if they walk away.
+const now = ref(Date.now());
+// Started on mount: the component renders on the server too, where an
+// interval would never be cleared.
+let ticker: ReturnType<typeof setInterval> | undefined;
+onMounted(() => {
+  ticker = setInterval(() => {
+    now.value = Date.now();
+  }, 500);
+});
+onUnmounted(() => clearInterval(ticker));
+
+const secondsLeft = computed<number | null>(() => {
+  const request = current.value;
+  if (request?.expiresAt === undefined) return null;
+  // Clamped to the declared window: `now` only ticks twice a second and is
+  // seeded at mount, which is earlier than any request it will ever show.
+  const remaining = Math.min(
+    request.expiresAt - now.value,
+    request.timeoutMs ?? Number.MAX_SAFE_INTEGER,
+  );
+  return Math.max(0, Math.ceil(remaining / 1000));
+});
+
+function onApprove() {
+  const id = current.value?.id;
+  if (id) approve(id);
+}
+
+function onDecline() {
+  const id = current.value?.id;
+  if (id) decline(id);
+}
+</script>
+
+<template>
+  <UModal
+    :open="current !== null"
+    title="Allow this action?"
+    :ui="{ content: 'max-w-[480px] w-[95vw]' }"
+    @update:open="(v: boolean) => !v && onDecline()"
+  >
+    <template #content>
+      <div class="forge-capability-approval" data-testid="capability-approval" @keydown.esc.prevent="onDecline">
+        <h2 class="forge-capability-approval__heading">Allow this action?</h2>
+
+        <template v-if="current">
+          <p class="forge-capability-approval__intro">
+            The agent wants to run
+            <strong data-testid="capability-approval-title">{{ title }}</strong>
+          </p>
+
+          <code class="forge-capability-approval__name" data-testid="capability-approval-name">{{
+            current.name
+          }}</code>
+
+          <p
+            v-if="current.description"
+            class="forge-capability-approval__description"
+            data-testid="capability-approval-description"
+          >
+            {{ current.description }}
+          </p>
+
+          <div class="forge-capability-approval__args" data-testid="capability-approval-args">
+            <div class="forge-capability-approval__args-label">Arguments</div>
+            <div v-if="argumentRows.length === 0" class="forge-capability-approval__arg-empty">
+              none
+            </div>
+            <div
+              v-for="row in argumentRows"
+              :key="row.key"
+              class="forge-capability-approval__arg"
+            >
+              <span v-if="row.key" class="forge-capability-approval__arg-key">{{ row.key }}</span>
+              <span class="forge-capability-approval__arg-value">{{ row.value }}</span>
+            </div>
+          </div>
+
+          <p
+            v-if="secondsLeft !== null"
+            class="forge-capability-approval__countdown"
+            data-testid="capability-approval-countdown"
+          >
+            Expires in {{ secondsLeft }}s if unanswered.
+          </p>
+        </template>
+
+        <div class="forge-capability-approval__actions">
+          <!-- Decline is focused first on purpose: this dialog can appear while
+               the user is typing, and a stray Enter must not approve an action. -->
+          <UButton
+            label="Decline"
+            color="neutral"
+            variant="subtle"
+            autofocus
+            data-testid="capability-approval-decline"
+            @click="onDecline"
+          />
+          <UButton label="Allow" data-testid="capability-approval-approve" @click="onApprove" />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.forge-capability-approval {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  font-size: 0.9rem;
+}
+
+.forge-capability-approval__heading {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.forge-capability-approval__intro {
+  margin: 0;
+}
+
+.forge-capability-approval__name {
+  align-self: flex-start;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  font-size: 0.8rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #475569;
+}
+
+.forge-capability-approval__description {
+  margin: 0;
+  color: #64748b;
+}
+
+.forge-capability-approval__args {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.forge-capability-approval__args-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #94a3b8;
+}
+
+.forge-capability-approval__arg {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+.forge-capability-approval__arg-key {
+  color: #64748b;
+  flex-shrink: 0;
+}
+
+.forge-capability-approval__arg-key::after {
+  content: ":";
+}
+
+.forge-capability-approval__arg-empty {
+  color: #94a3b8;
+  font-size: 0.8rem;
+}
+
+.forge-capability-approval__countdown {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+
+.forge-capability-approval__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+</style>

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>