ikanban-web 0.2.2 → 0.2.4

package/src/pages/session/use-session-commands.tsx

@@ -1,102 +1,119 @@
-import { createMemo } from "solid-js"
-import { useNavigate, useParams } from "@solidjs/router"
-import { useCommand, type CommandOption } from "@/context/command"
-import { useDialog } from "ikanban-ui/context/dialog"
-import { useFile, selectionFromLines, type FileSelection, type SelectedLineRange } from "@/context/file"
-import { useLanguage } from "@/context/language"
-import { useLayout } from "@/context/layout"
-import { useLocal } from "@/context/local"
-import { usePermission } from "@/context/permission"
-import { usePrompt } from "@/context/prompt"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
-import { useTerminal } from "@/context/terminal"
-import { DialogSelectFile } from "@/components/dialog-select-file"
-import { DialogSelectModel } from "@/components/dialog-select-model"
-import { DialogSelectMcp } from "@/components/dialog-select-mcp"
-import { DialogFork } from "@/components/dialog-fork"
-import { showToast } from "ikanban-ui/toast"
-import { findLast } from "ikanban-utils/array"
-import { extractPromptFromParts } from "@/utils/prompt"
-import { UserMessage } from "@opencode-ai/sdk/v2"
-import { canAddSelectionContext } from "@/pages/session/session-command-helpers"
+import { createMemo } from "solid-js";
+import { useNavigate, useParams } from "@solidjs/router";
+import { useCommand, type CommandOption } from "@/context/command";
+import { useDialog } from "ikanban-ui/context/dialog";
+import {
+  useFile,
+  selectionFromLines,
+  type FileSelection,
+  type SelectedLineRange,
+} from "@/context/file";
+import { useLanguage } from "@/context/language";
+import { useLayout } from "@/context/layout";
+import { useLocal } from "@/context/local";
+import { usePermission } from "@/context/permission";
+import { usePrompt } from "@/context/prompt";
+import { useSDK } from "@/context/sdk";
+import { useSync } from "@/context/sync";
+import { useTerminal } from "@/context/terminal";
+import { DialogSelectFile } from "@/components/dialog-select-file";
+import { DialogSelectModel } from "@/components/dialog-select-model";
+import { DialogSelectMcp } from "@/components/dialog-select-mcp";
+import { DialogFork } from "@/components/dialog-fork";
+import { showToast } from "ikanban-ui/toast";
+import { findLast } from "ikanban-utils/array";
+import { extractPromptFromParts } from "@/utils/prompt";
+import { UserMessage } from "@opencode-ai/sdk/v2";
+import { canAddSelectionContext } from "@/pages/session/session-command-helpers";
 
 export type SessionCommandContext = {
-  navigateMessageByOffset: (offset: number) => void
-  setActiveMessage: (message: UserMessage | undefined) => void
-  focusInput: () => void
-}
+  navigateMessageByOffset: (offset: number) => void;
+  setActiveMessage: (message: UserMessage | undefined) => void;
+  focusInput: () => void;
+};
 
 const withCategory = (category: string) => {
   return (option: Omit<CommandOption, "category">): CommandOption => ({
     ...option,
     category,
-  })
-}
+  });
+};
 
 export const useSessionCommands = (actions: SessionCommandContext) => {
-  const command = useCommand()
-  const dialog = useDialog()
-  const file = useFile()
-  const language = useLanguage()
-  const local = useLocal()
-  const permission = usePermission()
-  const prompt = usePrompt()
-  const sdk = useSDK()
-  const sync = useSync()
-  const terminal = useTerminal()
-  const layout = useLayout()
-  const params = useParams()
-  const navigate = useNavigate()
+  const command = useCommand();
+  const dialog = useDialog();
+  const file = useFile();
+  const language = useLanguage();
+  const local = useLocal();
+  const permission = usePermission();
+  const prompt = usePrompt();
+  const sdk = useSDK();
+  const sync = useSync();
+  const terminal = useTerminal();
+  const layout = useLayout();
+  const params = useParams();
+  const navigate = useNavigate();
 
-  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
-  const tabs = createMemo(() => layout.tabs(sessionKey))
-  const view = createMemo(() => layout.view(sessionKey))
-  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+  const sessionKey = createMemo(
+    () => `${params.dir}${params.id ? "/" + params.id : ""}`,
+  );
+  const tabs = createMemo(() => layout.tabs(sessionKey));
+  const view = createMemo(() => layout.view(sessionKey));
+  const info = createMemo(() =>
+    params.id ? sync.session.get(params.id) : undefined,
+  );
 
-  const idle = { type: "idle" as const }
-  const status = createMemo(() => sync.data.session_status[params.id ?? ""] ?? idle)
-  const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
-  const userMessages = createMemo(() => messages().filter((m) => m.role === "user") as UserMessage[])
+  const idle = { type: "idle" as const };
+  const status = createMemo(
+    () => sync.data.session_status[params.id ?? ""] ?? idle,
+  );
+  const messages = createMemo(() =>
+    params.id ? (sync.data.message[params.id] ?? []) : [],
+  );
+  const userMessages = createMemo(
+    () => messages().filter((m) => m.role === "user") as UserMessage[],
+  );
   const visibleUserMessages = createMemo(() => {
-    const revert = info()?.revert?.messageID
-    if (!revert) return userMessages()
-    return userMessages().filter((m) => m.id < revert)
-  })
+    const revert = info()?.revert?.messageID;
+    if (!revert) return userMessages();
+    return userMessages().filter((m) => m.id < revert);
+  });
 
   const showAllFiles = () => {
-    if (layout.fileTree.tab() !== "changes") return
-    layout.fileTree.setTab("all")
-  }
+    if (layout.fileTree.tab() !== "changes") return;
+    layout.fileTree.setTab("all");
+  };
 
   const selectionPreview = (path: string, selection: FileSelection) => {
-    const content = file.get(path)?.content?.content
-    if (!content) return undefined
-    const start = Math.max(1, Math.min(selection.startLine, selection.endLine))
-    const end = Math.max(selection.startLine, selection.endLine)
-    const lines = content.split("\n").slice(start - 1, end)
-    if (lines.length === 0) return undefined
-    return lines.slice(0, 2).join("\n")
-  }
+    const content = file.get(path)?.content?.content;
+    if (!content) return undefined;
+    const start = Math.max(1, Math.min(selection.startLine, selection.endLine));
+    const end = Math.max(selection.startLine, selection.endLine);
+    const lines = content.split("\n").slice(start - 1, end);
+    if (lines.length === 0) return undefined;
+    return lines.slice(0, 2).join("\n");
+  };
 
   const addSelectionToContext = (path: string, selection: FileSelection) => {
-    const preview = selectionPreview(path, selection)
-    prompt.context.add({ type: "file", path, selection, preview })
-  }
+    const preview = selectionPreview(path, selection);
+    prompt.context.add({ type: "file", path, selection, preview });
+  };
 
-  const navigateMessageByOffset = actions.navigateMessageByOffset
-  const setActiveMessage = actions.setActiveMessage
-  const focusInput = actions.focusInput
+  const navigateMessageByOffset = actions.navigateMessageByOffset;
+  const setActiveMessage = actions.setActiveMessage;
+  const focusInput = actions.focusInput;
 
-  const sessionCommand = withCategory(language.t("command.category.session"))
-  const fileCommand = withCategory(language.t("command.category.file"))
-  const contextCommand = withCategory(language.t("command.category.context"))
-  const viewCommand = withCategory(language.t("command.category.view"))
-  const terminalCommand = withCategory(language.t("command.category.terminal"))
-  const modelCommand = withCategory(language.t("command.category.model"))
-  const mcpCommand = withCategory(language.t("command.category.mcp"))
-  const agentCommand = withCategory(language.t("command.category.agent"))
-  const permissionsCommand = withCategory(language.t("command.category.permissions"))
+  const sessionCommand = withCategory(language.t("command.category.session"));
+  const fileCommand = withCategory(language.t("command.category.file"));
+  const contextCommand = withCategory(language.t("command.category.context"));
+  const viewCommand = withCategory(language.t("command.category.view"));
+  const terminalCommand = withCategory(language.t("command.category.terminal"));
+  const modelCommand = withCategory(language.t("command.category.model"));
+  const mcpCommand = withCategory(language.t("command.category.mcp"));
+  const agentCommand = withCategory(language.t("command.category.agent"));
+  const permissionsCommand = withCategory(
+    language.t("command.category.permissions"),
+  );
 
   const sessionCommands = createMemo(() => [
     sessionCommand({
@@ -106,7 +123,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       slash: "new",
       onSelect: () => navigate(`/${params.dir}/session`),
     }),
-  ])
+  ]);
 
   const fileCommands = createMemo(() => [
     fileCommand({
@@ -115,7 +132,8 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       description: language.t("palette.search.placeholder"),
       keybind: "mod+p",
       slash: "open",
-      onSelect: () => dialog.show(() => <DialogSelectFile onOpenFile={showAllFiles} />),
+      onSelect: () =>
+        dialog.show(() => <DialogSelectFile onOpenFile={showAllFiles} />),
     }),
     fileCommand({
       id: "tab.close",
@@ -123,12 +141,12 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       keybind: "mod+w",
       disabled: !tabs().active(),
       onSelect: () => {
-        const active = tabs().active()
-        if (!active) return
-        tabs().close(active)
+        const active = tabs().active();
+        if (!active) return;
+        tabs().close(active);
       },
     }),
-  ])
+  ]);
 
   const contextCommands = createMemo(() => [
     contextCommand({
@@ -142,24 +160,29 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
         selectedLines: file.selectedLines,
       }),
       onSelect: () => {
-        const active = tabs().active()
-        if (!active) return
-        const path = file.pathFromTab(active)
-        if (!path) return
+        const active = tabs().active();
+        if (!active) return;
+        const path = file.pathFromTab(active);
+        if (!path) return;
 
-        const range = file.selectedLines(path) as SelectedLineRange | null | undefined
+        const range = file.selectedLines(path) as
+          | SelectedLineRange
+          | null
+          | undefined;
         if (!range) {
           showToast({
             title: language.t("toast.context.noLineSelection.title"),
-            description: language.t("toast.context.noLineSelection.description"),
-          })
-          return
+            description: language.t(
+              "toast.context.noLineSelection.description",
+            ),
+          });
+          return;
         }
 
-        addSelectionToContext(path, selectionFromLines(range))
+        addSelectionToContext(path, selectionFromLines(range));
       },
     }),
-  ])
+  ]);
 
   const viewCommands = createMemo(() => [
     viewCommand({
@@ -184,7 +207,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     viewCommand({
       id: "input.focus",
       title: language.t("command.input.focus"),
-      keybind: "ctrl+l",
+      keybind: "ctrl+i",
       onSelect: () => focusInput(),
     }),
     terminalCommand({
@@ -193,11 +216,11 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       description: language.t("command.terminal.new.description"),
       keybind: "ctrl+alt+t",
       onSelect: () => {
-        if (terminal.all().length > 0) terminal.new()
-        view().terminal.open()
+        if (terminal.all().length > 0) terminal.new();
+        view().terminal.open();
       },
     }),
-  ])
+  ]);
 
   const messageCommands = createMemo(() => [
     sessionCommand({
@@ -216,14 +239,14 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       disabled: !params.id,
       onSelect: () => navigateMessageByOffset(1),
     }),
-  ])
+  ]);
 
   const agentCommands = createMemo(() => [
     modelCommand({
       id: "model.choose",
       title: language.t("command.model.choose"),
       description: language.t("command.model.choose.description"),
-      keybind: "mod+'",
+      keybind: "mod+m",
       slash: "model",
       onSelect: () => dialog.show(() => <DialogSelectModel />),
     }),
@@ -256,10 +279,10 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       description: language.t("command.model.variant.cycle.description"),
       keybind: "shift+mod+d",
       onSelect: () => {
-        local.model.variant.cycle()
+        local.model.variant.cycle();
       },
     }),
-  ])
+  ]);
 
   const permissionCommands = createMemo(() => [
     permissionsCommand({
@@ -271,9 +294,9 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       keybind: "mod+shift+a",
       disabled: !params.id || !permission.permissionsEnabled(),
       onSelect: () => {
-        const sessionID = params.id
-        if (!sessionID) return
-        permission.toggleAutoAccept(sessionID, sdk.directory)
+        const sessionID = params.id;
+        if (!sessionID) return;
+        permission.toggleAutoAccept(sessionID, sdk.directory);
         showToast({
           title: permission.isAutoAccepting(sessionID, sdk.directory)
             ? language.t("toast.permissions.autoaccept.on.title")
@@ -281,10 +304,10 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
           description: permission.isAutoAccepting(sessionID, sdk.directory)
             ? language.t("toast.permissions.autoaccept.on.description")
             : language.t("toast.permissions.autoaccept.off.description"),
-        })
+        });
       },
     }),
-  ])
+  ]);
 
   const sessionActionCommands = createMemo(() => [
     sessionCommand({
@@ -294,22 +317,27 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       slash: "undo",
       disabled: !params.id || visibleUserMessages().length === 0,
       onSelect: async () => {
-        const sessionID = params.id
-        if (!sessionID) return
+        const sessionID = params.id;
+        if (!sessionID) return;
         if (status()?.type !== "idle") {
-          await sdk.client.session.abort({ sessionID }).catch(() => {})
+          await sdk.client.session.abort({ sessionID }).catch(() => { });
         }
-        const revert = info()?.revert?.messageID
-        const message = findLast(userMessages(), (x) => !revert || x.id < revert)
-        if (!message) return
-        await sdk.client.session.revert({ sessionID, messageID: message.id })
-        const parts = sync.data.part[message.id]
+        const revert = info()?.revert?.messageID;
+        const message = findLast(
+          userMessages(),
+          (x) => !revert || x.id < revert,
+        );
+        if (!message) return;
+        await sdk.client.session.revert({ sessionID, messageID: message.id });
+        const parts = sync.data.part[message.id];
         if (parts) {
-          const restored = extractPromptFromParts(parts, { directory: sdk.directory })
-          prompt.set(restored)
+          const restored = extractPromptFromParts(parts, {
+            directory: sdk.directory,
+          });
+          prompt.set(restored);
         }
-        const priorMessage = findLast(userMessages(), (x) => x.id < message.id)
-        setActiveMessage(priorMessage)
+        const priorMessage = findLast(userMessages(), (x) => x.id < message.id);
+        setActiveMessage(priorMessage);
       },
     }),
     sessionCommand({
@@ -319,21 +347,27 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       slash: "redo",
       disabled: !params.id || !info()?.revert?.messageID,
       onSelect: async () => {
-        const sessionID = params.id
-        if (!sessionID) return
-        const revertMessageID = info()?.revert?.messageID
-        if (!revertMessageID) return
-        const nextMessage = userMessages().find((x) => x.id > revertMessageID)
+        const sessionID = params.id;
+        if (!sessionID) return;
+        const revertMessageID = info()?.revert?.messageID;
+        if (!revertMessageID) return;
+        const nextMessage = userMessages().find((x) => x.id > revertMessageID);
         if (!nextMessage) {
-          await sdk.client.session.unrevert({ sessionID })
-          prompt.reset()
-          const lastMsg = findLast(userMessages(), (x) => x.id >= revertMessageID)
-          setActiveMessage(lastMsg)
-          return
+          await sdk.client.session.unrevert({ sessionID });
+          prompt.reset();
+          const lastMsg = findLast(
+            userMessages(),
+            (x) => x.id >= revertMessageID,
+          );
+          setActiveMessage(lastMsg);
+          return;
         }
-        await sdk.client.session.revert({ sessionID, messageID: nextMessage.id })
-        const priorMsg = findLast(userMessages(), (x) => x.id < nextMessage.id)
-        setActiveMessage(priorMsg)
+        await sdk.client.session.revert({
+          sessionID,
+          messageID: nextMessage.id,
+        });
+        const priorMsg = findLast(userMessages(), (x) => x.id < nextMessage.id);
+        setActiveMessage(priorMsg);
       },
     }),
     sessionCommand({
@@ -343,21 +377,21 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       slash: "compact",
       disabled: !params.id || visibleUserMessages().length === 0,
       onSelect: async () => {
-        const sessionID = params.id
-        if (!sessionID) return
-        const model = local.model.current()
+        const sessionID = params.id;
+        if (!sessionID) return;
+        const model = local.model.current();
         if (!model) {
           showToast({
             title: language.t("toast.model.none.title"),
             description: language.t("toast.model.none.description"),
-          })
-          return
+          });
+          return;
         }
         await sdk.client.session.summarize({
           sessionID,
           modelID: model.id,
           providerID: model.provider.id,
-        })
+        });
       },
     }),
     sessionCommand({
@@ -368,85 +402,93 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       disabled: !params.id || visibleUserMessages().length === 0,
       onSelect: () => dialog.show(() => <DialogFork />),
     }),
-  ])
+  ]);
 
   const shareCommands = createMemo(() => {
-    if (sync.data.config.share === "disabled") return []
+    if (sync.data.config.share === "disabled") return [];
     return [
       sessionCommand({
         id: "session.share",
-        title: info()?.share?.url ? language.t("session.share.copy.copyLink") : language.t("command.session.share"),
+        title: info()?.share?.url
+          ? language.t("session.share.copy.copyLink")
+          : language.t("command.session.share"),
         description: info()?.share?.url
           ? language.t("toast.session.share.success.description")
           : language.t("command.session.share.description"),
         slash: "share",
         disabled: !params.id,
         onSelect: async () => {
-          if (!params.id) return
+          if (!params.id) return;
 
           const write = (value: string) => {
-            const body = typeof document === "undefined" ? undefined : document.body
+            const body =
+              typeof document === "undefined" ? undefined : document.body;
             if (body) {
-              const textarea = document.createElement("textarea")
-              textarea.value = value
-              textarea.setAttribute("readonly", "")
-              textarea.style.position = "fixed"
-              textarea.style.opacity = "0"
-              textarea.style.pointerEvents = "none"
-              body.appendChild(textarea)
-              textarea.select()
-              const copied = document.execCommand("copy")
-              body.removeChild(textarea)
-              if (copied) return Promise.resolve(true)
+              const textarea = document.createElement("textarea");
+              textarea.value = value;
+              textarea.setAttribute("readonly", "");
+              textarea.style.position = "fixed";
+              textarea.style.opacity = "0";
+              textarea.style.pointerEvents = "none";
+              body.appendChild(textarea);
+              textarea.select();
+              const copied = document.execCommand("copy");
+              body.removeChild(textarea);
+              if (copied) return Promise.resolve(true);
             }
 
-            const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard
-            if (!clipboard?.writeText) return Promise.resolve(false)
+            const clipboard =
+              typeof navigator === "undefined"
+                ? undefined
+                : navigator.clipboard;
+            if (!clipboard?.writeText) return Promise.resolve(false);
             return clipboard.writeText(value).then(
               () => true,
               () => false,
-            )
-          }
+            );
+          };
 
           const copy = async (url: string, existing: boolean) => {
-            const ok = await write(url)
+            const ok = await write(url);
             if (!ok) {
               showToast({
                 title: language.t("toast.session.share.copyFailed.title"),
                 variant: "error",
-              })
-              return
+              });
+              return;
             }
 
             showToast({
               title: existing
                 ? language.t("session.share.copy.copied")
                 : language.t("toast.session.share.success.title"),
-              description: language.t("toast.session.share.success.description"),
+              description: language.t(
+                "toast.session.share.success.description",
+              ),
               variant: "success",
-            })
-          }
+            });
+          };
 
-          const existing = info()?.share?.url
+          const existing = info()?.share?.url;
           if (existing) {
-            await copy(existing, true)
-            return
+            await copy(existing, true);
+            return;
           }
 
           const url = await sdk.client.session
             .share({ sessionID: params.id })
             .then((res) => res.data?.share?.url)
-            .catch(() => undefined)
+            .catch(() => undefined);
           if (!url) {
             showToast({
               title: language.t("toast.session.share.failed.title"),
               description: language.t("toast.session.share.failed.description"),
               variant: "error",
-            })
-            return
+            });
+            return;
           }
 
-          await copy(url, false)
+          await copy(url, false);
         },
       }),
       sessionCommand({
@@ -456,27 +498,31 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
         slash: "unshare",
         disabled: !params.id || !info()?.share?.url,
         onSelect: async () => {
-          if (!params.id) return
+          if (!params.id) return;
           await sdk.client.session
             .unshare({ sessionID: params.id })
             .then(() =>
               showToast({
                 title: language.t("toast.session.unshare.success.title"),
-                description: language.t("toast.session.unshare.success.description"),
+                description: language.t(
+                  "toast.session.unshare.success.description",
+                ),
                 variant: "success",
               }),
             )
             .catch(() =>
               showToast({
                 title: language.t("toast.session.unshare.failed.title"),
-                description: language.t("toast.session.unshare.failed.description"),
+                description: language.t(
+                  "toast.session.unshare.failed.description",
+                ),
                 variant: "error",
               }),
-            )
+            );
         },
       }),
-    ]
-  })
+    ];
+  });
 
   command.register("session", () =>
     [
@@ -490,5 +536,5 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       sessionActionCommands(),
       shareCommands(),
     ].flatMap((x) => x),
-  )
-}
+  );
+};