wepscli 0.1.0 → 0.1.5

package/dist/WEPSCLI-shell/shell-app.js

@@ -6,18 +6,24 @@ import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
-import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/solid";
-import { batch, createEffect, createMemo, createSignal, onMount } from "solid-js";
+import { useRenderer, useTerminalDimensions } from "@opentui/solid";
+import { createEffect, createMemo, createSignal, onMount } from "solid-js";
 import { SessionHistoryService } from "../session-history/session-history-service.js";
 import { getAgentDir } from "../config.js";
 import { ApprovalOverlay } from "./approval-overlay.js";
 import { WepsAgentRuntime } from "./agent-runtime.js";
 import { writeShellDebugLog } from "./debug-log.js";
-import { executeSlashCommand } from "./slash-commands.js";
-import { createIdleRuntimeState, runtimeStateTone } from "./runtime-status.js";
-import { applyShellModePrompt, getShellMode, nextShellMode, shellModeSwitchMessage } from "./shell-modes.js";
+import { useShellKeyboard } from "./shell-keyboard.js";
+import { getSessionApprovalRequest, nextFocusRegionForSession } from "./session-consistency.js";
+import { createSkillAddFlow } from "../skills/skill-add-flow.js";
+import { formatInstalledSkillsSummary, listInstalledSkills } from "../skills/skill-service.js";
+import { createShellPromptController } from "./shell-prompt-controller.js";
+import { buildSkillSlashCommands } from "./skill-commands.js";
+import { createIdleRuntimeState } from "./runtime-status.js";
+import { runtimeStatusColor } from "./shell-status.js";
+import { getShellMode, nextShellMode, shellModeSwitchMessage } from "./shell-modes.js";
 import { wepscliShellTheme as theme } from "./theme.js";
-import { formatTimestamp, INITIAL_SESSIONS, overlayDescription, overlayTitle, truncate, wrapIndex } from "./helpers.js";
+import { formatTimestamp, INITIAL_SESSIONS, overlayDescription, overlayTitle, truncate } from "./helpers.js";
 import { createProviderAddFlow } from "./provider-add-flow.js";
 import { appendSessionMessage, insertSessionMessageBefore, patchSessionMessage, toggleSessionMessage as toggleSessionMessageState } from "./transcript-state.js";
 import { TranscriptPanel } from "./transcript-panel.js";
@@ -27,7 +33,6 @@ export function WEPSCLIShellApp(props) {
   const renderer = useRenderer();
   const dimensions = useTerminalDimensions();
   const sessionHistory = new SessionHistoryService();
-  const [view, setView] = createSignal("home");
   const [focusRegion, setFocusRegionState] = createSignal("composer");
   const [overlay, setOverlay] = createSignal(undefined);
   const [profiles, setProfiles] = createSignal(props.profileService.listProfiles());
@@ -42,6 +47,7 @@ export function WEPSCLIShellApp(props) {
   const [runtimeStateBySession, setRuntimeStateBySession] = createSignal({});
   const [approvalRequests, setApprovalRequests] = createSignal([]);
   const [approvalDecisionIndex, setApprovalDecisionIndex] = createSignal(0);
+  const [skillSlashCommands, setSkillSlashCommands] = createSignal([]);
   const runtime = new WepsAgentRuntime(props.profileService, {
     appendMessage: (sessionId, message) => appendTranscriptMessage(sessionId, message),
     insertMessageBefore: (sessionId, beforeMessageId, message) => insertTranscriptMessageBefore(sessionId, beforeMessageId, message),
@@ -87,34 +93,47 @@ export function WEPSCLIShellApp(props) {
     },
     onClose: () => setFocusRegion("composer")
   });
+  const skillAddFlow = createSkillAddFlow({
+    onInstalled: async ({
+      skill,
+      targetDir,
+      diagnostics
+    }) => {
+      const session = currentSession();
+      const sessionId = session?.id ?? createdTransientSessionId();
+      const warnings = diagnostics.filter(diagnostic => diagnostic.type === "warning").length;
+      const reloaded = session ? await runtime.reload(session.id, selectionForSession(session), {
+        runtimeSessionFile: session.runtimeSessionFile
+      }) : false;
+      await reloadSkillSlashCommands();
+      pushChatMessage(sessionId, {
+        id: `skill-add:${skill.name}:${Date.now()}`,
+        role: "system",
+        content: reloaded ? `Installed skill ${skill.name} and reloaded the current session.\nPath: ${targetDir}${warnings > 0 ? `\nWarnings: ${warnings}` : ""}` : `Installed skill ${skill.name}.\nPath: ${targetDir}${warnings > 0 ? `\nWarnings: ${warnings}` : ""}`,
+        time: new Date().toLocaleTimeString("en-US", {
+          hour: "2-digit",
+          minute: "2-digit"
+        }),
+        kind: "status"
+      });
+    },
+    onClose: () => setFocusRegion("composer")
+  });
   const viewport = createMemo(() => ({
     width: dimensions().width || 120,
     height: dimensions().height || 32
   }));
-  const showSidebar = createMemo(() => false);
-  const shellReady = createMemo(() => profiles().length > 0);
   const activeShellMode = createMemo(() => getShellMode(shellMode()));
-  const activeProfile = createMemo(() => {
-    const current = selection().profileId;
-    return current ? profiles().find(profile => profile.id === current) : profiles()[0];
-  });
+  const activeProfile = createMemo(() => selection().profileId ? profiles().find(profile => profile.id === selection().profileId) : profiles()[0]);
   const activeModel = createMemo(() => selection().modelId ?? activeProfile()?.models[0]?.id);
   const currentSession = createMemo(() => {
-    const currentId = activeSessionId();
-    const list = sessions();
+    const currentId = activeSessionId(),
+      list = sessions();
     return currentId ? list.find(item => item.id === currentId) : list.find(item => item.state === "active") ?? list[0];
   });
-  const currentMessages = createMemo(() => {
-    const session = currentSession();
-    return session ? messagesBySession()[session.id] ?? [] : [];
-  });
-  const currentRuntimeState = createMemo(() => {
-    const session = currentSession();
-    return session ? runtimeStateBySession()[session.id] ?? createIdleRuntimeState() : createIdleRuntimeState();
-  });
-  const activeApproval = createMemo(() => approvalRequests()[0]);
-  const recentSessions = createMemo(() => sessions().slice(0, 5));
-  const sessionSummary = createMemo(() => currentSession()?.summary ?? "No session selected yet.");
+  const currentMessages = createMemo(() => currentSession() ? messagesBySession()[currentSession().id] ?? [] : []);
+  const currentRuntimeState = createMemo(() => currentSession() ? runtimeStateBySession()[currentSession().id] ?? createIdleRuntimeState() : createIdleRuntimeState());
+  const activeApproval = createMemo(() => getSessionApprovalRequest(approvalRequests(), currentSession()?.id));
   const overlayOptions = createMemo(() => {
     switch (overlay()) {
       case "provider":
@@ -156,6 +175,7 @@ export function WEPSCLIShellApp(props) {
   });
   onMount(() => {
     writeShellDebugLog(`mounted chat shell profiles=${profiles().length} sessions=${sessionHistory.listSessions().length}`);
+    void reloadSkillSlashCommands();
     setTimeout(() => composerRef?.focus(), 10);
   });
   createEffect(() => {
@@ -179,132 +199,38 @@ export function WEPSCLIShellApp(props) {
     }
     writeShellDebugLog(`effect session=${session.id} messages=${currentMessages().length}`);
   });
-  useKeyboard(evt => {
-    writeShellDebugLog(`key name=${evt.name} focus=${focusRegion()} overlay=${overlay() ?? "none"}`);
-    if (evt.ctrl && evt.name === "c") {
-      evt.preventDefault();
-      exitShell();
-      return;
-    }
-    if (evt.ctrl && evt.name === ".") {
-      evt.preventDefault();
-      void abortActiveRequest();
-      return;
-    }
-    if (activeApproval()) {
-      if (evt.name === "escape") {
-        evt.preventDefault();
-        resolveActiveApproval("cancel");
-        return;
-      }
-      if (evt.name === "left" || evt.name === "up") {
-        evt.preventDefault();
-        setApprovalDecisionIndex(current => wrapIndex(current, -1, 3));
-        return;
-      }
-      if (evt.name === "right" || evt.name === "down") {
-        evt.preventDefault();
-        setApprovalDecisionIndex(current => wrapIndex(current, 1, 3));
-        return;
-      }
-      if (evt.name === "return") {
-        evt.preventDefault();
-        resolveActiveApproval(["allow", "reject", "cancel"][approvalDecisionIndex()] ?? "cancel");
-        return;
-      }
-      return;
-    }
-    if (providerAddFlow.isActive()) {
-      if (evt.name === "escape") {
-        evt.preventDefault();
-        providerAddFlow.back();
-        return;
-      }
-      if (providerAddFlow.isPickerStep()) {
-        if (evt.name === "up") {
-          evt.preventDefault();
-          providerAddFlow.moveSelection(-1);
-          return;
-        }
-        if (evt.name === "down") {
-          evt.preventDefault();
-          providerAddFlow.moveSelection(1);
-          return;
-        }
-        if (evt.name === "return") {
-          evt.preventDefault();
-          providerAddFlow.confirmSelection();
-          return;
-        }
-      }
-      return;
-    }
-    if (overlay()) {
-      if (evt.name === "escape") {
-        evt.preventDefault();
-        closeOverlay();
-        return;
-      }
-      if (evt.name === "up") {
-        evt.preventDefault();
-        setOverlayIndex(wrapIndex(overlayIndex(), -1, overlayOptions().length));
-        return;
-      }
-      if (evt.name === "down") {
-        evt.preventDefault();
-        setOverlayIndex(wrapIndex(overlayIndex(), 1, overlayOptions().length));
-        return;
-      }
-      if (evt.name === "return") {
-        evt.preventDefault();
-        const target = overlayOptions()[overlayIndex()];
-        if (target) activateAction(target.id);
-        return;
-      }
-      return;
-    }
-    if (evt.option && evt.name === "m") {
-      evt.preventDefault();
-      applyShellMode(nextShellMode(shellMode()));
-      return;
-    }
-    if (evt.option && ["1", "2", "3", "4"].includes(evt.name)) {
-      evt.preventDefault();
-      const nextMode = {
-        "1": "agent",
-        "2": "plan",
-        "3": "read-only",
-        "4": "auto-approve"
-      }[evt.name];
-      if (nextMode) {
-        applyShellMode(nextMode);
-      }
-      return;
-    }
-    if (evt.name === "tab") {
-      evt.preventDefault();
-      cycleFocus();
-      return;
-    }
-    if (focusRegion() === "main") {
-      if (evt.name === "up") {
-        evt.preventDefault();
-        return;
-      }
-      if (evt.name === "down") {
-        evt.preventDefault();
-        return;
-      }
-      if (evt.name === "escape") {
-        evt.preventDefault();
-        setFocusRegion("composer");
-        return;
+  useShellKeyboard({
+    focusRegion,
+    overlay,
+    overlayIndex,
+    overlayOptionsLength: () => overlayOptions().length,
+    hasActiveApproval: () => Boolean(activeApproval()),
+    approvalDecisionIndex,
+    providerAddFlowActive: () => providerAddFlow.isActive(),
+    providerAddFlowPickerStep: () => providerAddFlow.isPickerStep(),
+    skillAddFlowActive: () => skillAddFlow.isActive(),
+    composerValue: () => composerRef?.value ?? composerValue()
+  }, {
+    exitShell,
+    abortActiveRequest,
+    resolveActiveApproval,
+    setApprovalDecisionIndex: updater => setApprovalDecisionIndex(updater),
+    providerAddBack: () => providerAddFlow.back(),
+    providerAddMoveSelection: delta => providerAddFlow.moveSelection(delta),
+    providerAddConfirmSelection: () => providerAddFlow.confirmSelection(),
+    closeSkillAddFlow: () => skillAddFlow.close(),
+    closeOverlay,
+    setOverlayIndex: updater => setOverlayIndex(updater),
+    activateOverlaySelection: () => {
+      const target = overlayOptions()[overlayIndex()];
+      if (target) {
+        activateAction(target.id);
       }
-    }
-    if (focusRegion() === "composer" && evt.name === "escape" && !(composerRef?.value ?? "").trim()) {
-      evt.preventDefault();
-      exitShell();
-    }
+    },
+    applyNextShellMode: () => applyShellMode(nextShellMode(shellMode())),
+    applyMode: modeId => applyShellMode(modeId),
+    cycleFocus,
+    setFocusRegion
   });
   function exitShell() {
     if (closed) return;
@@ -343,6 +269,10 @@ export function WEPSCLIShellApp(props) {
     setProfiles(props.profileService.listProfiles());
     setSelection(props.profileService.getActiveSelection());
   }
+  async function reloadSkillSlashCommands() {
+    const result = await listInstalledSkills();
+    setSkillSlashCommands(buildSkillSlashCommands(result.skills));
+  }
   function updateRuntimeState(sessionId, state) {
     setRuntimeStateBySession(current => ({
       ...current,
@@ -422,10 +352,12 @@ export function WEPSCLIShellApp(props) {
   }
   function openApprovalRequest(request) {
     writeShellDebugLog(`approval open tool=${request.toolName} id=${request.id}`);
-    setOverlay(undefined);
     setApprovalRequests(current => [...current, request]);
-    setApprovalDecisionIndex(0);
-    setFocusRegion("overlay");
+    if (currentSession()?.id === request.sessionId) {
+      setOverlay(undefined);
+      setApprovalDecisionIndex(0);
+      setFocusRegion("overlay");
+    }
     requestRender();
   }
   function closeApprovalRequest(requestId) {
@@ -462,12 +394,6 @@ export function WEPSCLIShellApp(props) {
     const index = order.indexOf(focusRegion());
     setFocusRegion(order[(index + 1) % order.length] ?? "composer");
   }
-  function setShellView(next) {
-    batch(() => {
-      setView(next);
-    });
-    setFocusRegion("composer");
-  }
   function openOverlay(kind) {
     if (kind === "model" && profiles().length === 0) {
       return;
@@ -495,9 +421,18 @@ export function WEPSCLIShellApp(props) {
   }
   function openProviderAdd() {
     setOverlay(undefined);
+    skillAddFlow.close();
     providerAddFlow.open();
     setFocusRegion("overlay");
   }
+  function openSkillAdd() {
+    setOverlay(undefined);
+    if (providerAddFlow.isActive()) {
+      providerAddFlow.close();
+    }
+    skillAddFlow.open();
+    setFocusRegion("overlay");
+  }
   function ensureSessionTranscript(sessionId) {
     setMessagesBySession(current => {
       if (current[sessionId]) return current;
@@ -586,6 +521,16 @@ export function WEPSCLIShellApp(props) {
     reloadProviderState();
   }
   function activateSession(sessionId) {
+    cancelTranscriptAutoScroll();
+    if (providerAddFlow.isActive()) {
+      providerAddFlow.close();
+    }
+    if (skillAddFlow.isActive()) {
+      skillAddFlow.close();
+    }
+    setOverlay(undefined);
+    setOverlayIndex(0);
+    setApprovalDecisionIndex(0);
     setActiveSessionId(sessionId);
     ensureSessionTranscript(sessionId);
     syncActiveSelectionFromSession(sessionId);
@@ -593,7 +538,6 @@ export function WEPSCLIShellApp(props) {
     if (session) {
       sessionHistory.markActive(sessionId);
       setSessions(sessionHistory.listSessions());
-      setShellView("home");
       void runtime.syncSelection(sessionId, selectionForSession(session));
       if (session.runtimeSessionFile) {
         void runtime.loadSession(sessionId, selectionForSession(session), {
@@ -601,7 +545,8 @@ export function WEPSCLIShellApp(props) {
         });
       }
     }
-    closeOverlay();
+    setFocusRegion(nextFocusRegionForSession(sessionId, approvalRequests()));
+    scheduleTranscriptScrollToBottom();
   }
   function startNewSession() {
     const provider = activeProfile();
@@ -644,87 +589,67 @@ export function WEPSCLIShellApp(props) {
     });
     requestRender();
   }
-  function handleComposerSubmit(value) {
-    const trimmed = value.trim();
-    writeShellDebugLog(`handleComposerSubmit raw=${JSON.stringify(value)} trimmed=${JSON.stringify(trimmed)}`);
-    if (!trimmed) return;
-    const session = currentSession() ?? startNewSession();
-    writeShellDebugLog(`handleComposerSubmit currentSession=${session?.id ?? "none"}`);
-    if (!session) {
-      writeShellDebugLog("handleComposerSubmit no current session available");
-      return;
-    }
-    if (trimmed.startsWith("/")) {
-      writeShellDebugLog(`handleComposerSubmit slash=${trimmed}`);
-      runSlashCommand(trimmed);
-      return;
-    }
-    ensureSessionTranscript(session.id);
+  function updatePromptSession(session, trimmed, sessionSelection) {
     sessionHistory.updateSession(session.id, {
       title: `Chat: ${truncate(trimmed, 24)}`,
       summary: `Last prompt: ${truncate(trimmed, 60)}`,
-      providerProfileId: selectionForSession(session).profileId,
+      providerProfileId: sessionSelection.profileId,
       providerLabel: activeProfile()?.label,
-      modelId: selectionForSession(session).modelId,
+      modelId: sessionSelection.modelId,
       lastPrompt: trimmed,
       state: "active"
     });
     setSessions(sessionHistory.listSessions());
-    writeShellDebugLog(`handleComposerSubmit sessionUpdated=${session.id}`);
-    setComposerValue("");
-    composerRef?.setText?.("");
-    composerRef?.focus();
-    void runtime.prompt(session.id, applyShellModePrompt(shellMode(), trimmed), selectionForSession(session), {
-      runtimeSessionFile: session.runtimeSessionFile
-    });
-    requestRender();
   }
-  function runSlashCommand(commandId) {
-    executeSlashCommand(commandId, {
-      startNewSession,
-      openOverlay,
-      openProviderAdd,
-      compactCurrentSession,
-      abortActiveRequest: () => {
-        void abortActiveRequest();
-      },
-      setMode: modeId => applyShellMode(modeId),
-      getCurrentMode: () => shellMode(),
-      getStatusSummary: () => {
-        const session = currentSession();
-        const runtimeState = currentRuntimeState();
-        return ["Current shell status:", `Session: ${session?.title ?? "none"}`, `Mode: ${activeShellMode().label}`, `Provider: ${activeProfile()?.label ?? "none"}`, `Model: ${activeModel() ?? "none"}`, `Runtime: ${runtimeState.label}`, `Agent dir: ${getAgentDir()}`].join("\n");
-      },
-      queuePromptTemplate: (title, prompt, summary) => {
-        const session = currentSession() ?? startNewSession();
-        pushChatMessage(session.id, {
-          id: `${session.id}:system:${Date.now()}`,
-          role: "system",
-          content: `${title}: ${summary}`,
-          time: new Date().toLocaleTimeString("en-US", {
-            hour: "2-digit",
-            minute: "2-digit"
-          })
-        });
-        setComposerValue(prompt);
-        composerRef?.setText?.(prompt);
-        composerRef?.focus();
-        setFocusRegion("composer");
-      },
-      pushTimeline: message => {
-        const session = currentSession() ?? startNewSession();
-        pushChatMessage(session.id, {
-          id: `${session.id}:system:${Date.now()}`,
-          role: "system",
-          content: message,
-          time: new Date().toLocaleTimeString("en-US", {
-            hour: "2-digit",
-            minute: "2-digit"
-          })
-        });
-      }
+  async function reloadCurrentSessionResources() {
+    const session = currentSession();
+    if (!session) {
+      promptController.pushSystemMessage(createdTransientSessionId(), "No active session is ready to reload yet.");
+      return;
+    }
+    const reloaded = await runtime.reload(session.id, selectionForSession(session), {
+      runtimeSessionFile: session.runtimeSessionFile
     });
-  }
+    await reloadSkillSlashCommands();
+    promptController.pushSystemMessage(session.id, reloaded ? "Reloaded skills, prompts, and extensions for the current session." : "Resource reload did not complete successfully.");
+  }
+  const promptController = createShellPromptController({
+    currentSession,
+    startNewSession,
+    createdTransientSessionId,
+    selectionForSession,
+    ensureSessionTranscript,
+    updatePromptSession,
+    pushChatMessage,
+    setComposerValue,
+    setComposerText: value => composerRef?.setText?.(value),
+    focusComposer: () => composerRef?.focus(),
+    setFocusRegionComposer: () => setFocusRegion("composer"),
+    requestRender,
+    runtimePrompt: (sessionId, text, sessionSelection, runtimeSessionFile) => {
+      void runtime.prompt(sessionId, text, sessionSelection, {
+        runtimeSessionFile
+      });
+    },
+    reloadCurrentSessionResources,
+    openSkillAdd,
+    openOverlay,
+    openProviderAdd,
+    compactCurrentSession,
+    abortActiveRequest: () => {
+      void abortActiveRequest();
+    },
+    applyShellMode,
+    getCurrentMode: () => shellMode(),
+    getStatusSummary: () => {
+      const session = currentSession();
+      return ["Current shell status:", `Session: ${session?.title ?? "none"}`, `Mode: ${activeShellMode().label}`, `Provider: ${activeProfile()?.label ?? "none"}`, `Model: ${activeModel() ?? "none"}`, `Runtime: ${currentRuntimeState().label}`, `Agent dir: ${getAgentDir()}`].join("\n");
+    },
+    showSkillsSummary: async () => {
+      promptController.pushSystemMessage(currentSession()?.id ?? createdTransientSessionId(), await formatInstalledSkillsSummary());
+    },
+    getAdditionalSlashCommands: skillSlashCommands
+  });
   function activateAction(actionId) {
     if (actionId === "session:new") {
       startNewSession();
@@ -839,30 +764,7 @@ export function WEPSCLIShellApp(props) {
     ensureSessionTranscript(created.id);
     return created.id;
   }
-  const topStatus = createMemo(() => {
-    const profile = activeProfile();
-    const runtimeState = currentRuntimeState();
-    if (!profile) return runtimeState.label;
-    return `${profile.label} · ${activeModel() ?? "no model"} · ${runtimeState.label}`;
-  });
-  const sidebarSummary = createMemo(() => {
-    if (!shellReady()) return "Complete onboarding to connect a provider.";
-    return activeProfile()?.baseUrl ?? "Provider ready.";
-  });
-  function runtimeStatusColor(state) {
-    switch (runtimeStateTone(state)) {
-      case "accent":
-        return theme.accent;
-      case "warning":
-        return theme.warning;
-      case "danger":
-        return theme.danger;
-      case "success":
-        return theme.success;
-      case "muted":
-        return theme.muted;
-    }
-  }
+  const topStatus = createMemo(() => `${activeProfile()?.label ?? "none"} · ${activeModel() ?? "no model"} · ${currentRuntimeState().label}`);
   return (() => {
     var _el$ = _$createElement("box"),
       _el$2 = _$createElement("box"),
@@ -973,8 +875,15 @@ export function WEPSCLIShellApp(props) {
       onFocus: () => setFocusRegion("composer"),
       onInput: value => setComposerValue(value),
       onModeClick: () => applyShellMode(nextShellMode(shellMode())),
-      onSubmit: handleComposerSubmit,
-      onSelectSlashCommand: runSlashCommand
+      get onSubmit() {
+        return promptController.handleComposerSubmit;
+      },
+      get onSelectSlashCommand() {
+        return promptController.runSlashCommand;
+      },
+      get slashCommands() {
+        return skillSlashCommands();
+      }
     }), _el$0);
     _$insert(_el$, (() => {
       var _c$2 = _$memo(() => !!overlay());
@@ -1012,6 +921,7 @@ export function WEPSCLIShellApp(props) {
       }) : null;
     })(), _el$0);
     _$insert(_el$, () => providerAddFlow.render(), _el$0);
+    _$insert(_el$, () => skillAddFlow.render(), _el$0);
     _$insertNode(_el$0, _el$1);
     _$setProp(_el$0, "flexShrink", 0);
     _$setProp(_el$0, "paddingLeft", 1);