diff --git a/README.md b/README.md index 8ce5fda1..71798d16 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,29 @@ xattr -dr com.apple.quarantine /Applications/CodeNomad.app After removing the quarantine attribute, launch the app normally. On Intel Macs you may also need to approve CodeNomad from **System Settings → Privacy & Security** the first time you run it. +### Linux (Wayland + NVIDIA): Tauri AppImage closes immediately +On some Wayland compositor + NVIDIA driver setups, WebKitGTK can fail to initialize its DMA-BUF/GBM path and the Tauri build may exit right away. + +Try running with one of these environment variables: + +```bash +# Most reliable workaround (can reduce rendering performance) +WEBKIT_DISABLE_DMABUF_RENDERER=1 codenomad + +# Alternative for some Wayland setups +__NV_DISABLE_EXPLICIT_SYNC=1 codenomad +``` + +If you're running the Tauri AppImage and want the workaround applied every time, create a tiny wrapper script on your `PATH`: + +```bash +#!/bin/bash +export WEBKIT_DISABLE_DMABUF_RENDERER=1 +exec ~/.local/share/bauh/appimage/installed/codenomad/CodeNomad-Tauri-0.4.0-linux-x64.AppImage "$@" +``` + +Upstream tracking: https://github.com/tauri-apps/tauri/issues/10702 + ## Architecture & Development CodeNomad is a monorepo split into specialized packages. If you want to contribute or build from source, check out the individual package documentation: diff --git a/package-lock.json b/package-lock.json index a82b5c47..3883a12c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "codenomad-workspace", - "version": "0.5.1", + "version": "0.6.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "codenomad-workspace", - "version": "0.5.1", + "version": "0.6.0", "dependencies": { "7zip-bin": "^5.2.0", "google-auth-library": "^10.5.0" @@ -7389,7 +7389,7 @@ }, "packages/electron-app": { "name": "@neuralnomads/codenomad-electron-app", - "version": "0.5.1", + "version": "0.6.0", "dependencies": { "@codenomad/ui": "file:../ui", "@neuralnomads/codenomad": "file:../server" @@ -7423,7 +7423,7 @@ }, "packages/server": { "name": "@neuralnomads/codenomad", - "version": "0.5.1", + "version": "0.6.0", "dependencies": { "@fastify/cors": "^8.5.0", "@fastify/reply-from": "^9.8.0", @@ -7458,14 +7458,14 @@ }, "packages/tauri-app": { "name": "@codenomad/tauri-app", - "version": "0.5.1", + "version": "0.6.0", "devDependencies": { "@tauri-apps/cli": "^2.9.4" } }, "packages/ui": { "name": "@codenomad/ui", - "version": "0.5.1", + "version": "0.6.0", "dependencies": { "@git-diff-view/solid": "^0.0.8", "@kobalte/core": "0.13.11", diff --git a/package.json b/package.json index dfe6d649..dab65aa4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codenomad-workspace", - "version": "0.5.1", + "version": "0.6.0", "private": true, "description": "CodeNomad monorepo workspace", "workspaces": { diff --git a/packages/electron-app/package.json b/packages/electron-app/package.json index 0aacc0a4..b66749b9 100644 --- a/packages/electron-app/package.json +++ b/packages/electron-app/package.json @@ -1,6 +1,6 @@ { "name": "@neuralnomads/codenomad-electron-app", - "version": "0.5.1", + "version": "0.6.0", "description": "CodeNomad - AI coding assistant", "author": { "name": "Neural Nomads", diff --git a/packages/opencode-config/package.json b/packages/opencode-config/package.json index 9e990320..fa8aa1ea 100644 --- a/packages/opencode-config/package.json +++ b/packages/opencode-config/package.json @@ -3,6 +3,6 @@ "version": "0.5.0", "private": true, "dependencies": { - "@opencode-ai/plugin": "1.1.1" + "@opencode-ai/plugin": "1.1.8" } } diff --git a/packages/server/package-lock.json b/packages/server/package-lock.json index 031eefab..7b2ffa8f 100644 --- a/packages/server/package-lock.json +++ b/packages/server/package-lock.json @@ -1,12 +1,12 @@ { "name": "@neuralnomads/codenomad", - "version": "0.5.1", + "version": "0.6.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@neuralnomads/codenomad", - "version": "0.5.1", + "version": "0.6.0", "dependencies": { "@fastify/cors": "^8.5.0", "commander": "^12.1.0", diff --git a/packages/server/package.json b/packages/server/package.json index a2e44461..eeeb5389 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -1,6 +1,6 @@ { "name": "@neuralnomads/codenomad", - "version": "0.5.1", + "version": "0.6.0", "description": "CodeNomad Server", "author": { "name": "Neural Nomads", diff --git a/packages/server/src/background-processes/manager.ts b/packages/server/src/background-processes/manager.ts index 18d79e7f..6864f180 100644 --- a/packages/server/src/background-processes/manager.ts +++ b/packages/server/src/background-processes/manager.ts @@ -11,6 +11,7 @@ const ROOT_DIR = ".codenomad/background_processes" const INDEX_FILE = "index.json" const OUTPUT_FILE = "output.txt" const STOP_TIMEOUT_MS = 2000 +const EXIT_WAIT_TIMEOUT_MS = 5000 const MAX_OUTPUT_BYTES = 20 * 1024 const OUTPUT_PUBLISH_INTERVAL_MS = 1000 @@ -21,6 +22,7 @@ interface ManagerDeps { } interface RunningProcess { + id: string child: ChildProcess outputPath: string exitPromise: Promise @@ -61,9 +63,15 @@ export class BackgroundProcessManager { const child = spawn("bash", ["-c", command], { cwd: workspace.path, stdio: ["ignore", "pipe", "pipe"], + detached: process.platform !== "win32", + }) + + child.on("exit", () => { + this.killProcessTree(child, "SIGTERM") }) const record: BackgroundProcess = { + id, workspaceId, title, @@ -91,7 +99,7 @@ export class BackgroundProcessManager { }) }) - this.running.set(id, { child, outputPath, exitPromise, workspaceId }) + this.running.set(id, { id, child, outputPath, exitPromise, workspaceId }) let lastPublishAt = 0 const maybePublishSize = () => { @@ -128,7 +136,7 @@ export class BackgroundProcessManager { const running = this.running.get(processId) if (running?.child && !running.child.killed) { - running.child.kill("SIGTERM") + this.killProcessTree(running.child, "SIGTERM") await this.waitForExit(running) } @@ -149,7 +157,7 @@ export class BackgroundProcessManager { const running = this.running.get(processId) if (running?.child && !running.child.killed) { - running.child.kill("SIGTERM") + this.killProcessTree(running.child, "SIGTERM") await this.waitForExit(running) } @@ -255,26 +263,64 @@ export class BackgroundProcessManager { private async cleanupWorkspace(workspaceId: string) { for (const [, running] of this.running.entries()) { if (running.workspaceId !== workspaceId) continue - running.child.kill("SIGTERM") + this.killProcessTree(running.child, "SIGTERM") await this.waitForExit(running) } + await this.removeWorkspaceDir(workspaceId) } + private killProcessTree(child: ChildProcess, signal: NodeJS.Signals) { + const pid = child.pid + if (!pid) return + + if (process.platform !== "win32") { + try { + process.kill(-pid, signal) + return + } catch { + // Fall back to killing the direct child. + } + } + + try { + child.kill(signal) + } catch { + // ignore + } + } + private async waitForExit(running: RunningProcess) { - let resolved = false - const timeout = setTimeout(() => { - if (!resolved) { - running.child.kill("SIGKILL") + let exited = false + const exitPromise = running.exitPromise.finally(() => { + exited = true + }) + + const killTimeout = setTimeout(() => { + if (!exited) { + this.killProcessTree(running.child, "SIGKILL") } }, STOP_TIMEOUT_MS) - await running.exitPromise.finally(() => { - resolved = true - clearTimeout(timeout) - }) + try { + await Promise.race([ + exitPromise, + new Promise((resolve) => { + setTimeout(resolve, EXIT_WAIT_TIMEOUT_MS) + }), + ]) + + if (!exited) { + this.killProcessTree(running.child, "SIGKILL") + this.running.delete(running.id) + this.deps.logger.warn({ pid: running.child.pid }, "Timed out waiting for background process to exit") + } + } finally { + clearTimeout(killTimeout) + } } + private statusFromExit(code: number | null): BackgroundProcessStatus { if (code === null) return "stopped" if (code === 0) return "stopped" diff --git a/packages/tauri-app/package.json b/packages/tauri-app/package.json index ff917284..c39f2a87 100644 --- a/packages/tauri-app/package.json +++ b/packages/tauri-app/package.json @@ -1,6 +1,6 @@ { "name": "@codenomad/tauri-app", - "version": "0.5.1", + "version": "0.6.0", "private": true, "scripts": { "dev": "tauri dev", diff --git a/packages/ui/package.json b/packages/ui/package.json index 4c081afb..d18b89e4 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@codenomad/ui", - "version": "0.5.1", + "version": "0.6.0", "private": true, "type": "module", "scripts": { diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx index 7dc7b73f..fce38bad 100644 --- a/packages/ui/src/components/alert-dialog.tsx +++ b/packages/ui/src/components/alert-dialog.tsx @@ -1,5 +1,5 @@ import { Dialog } from "@kobalte/core/dialog" -import { Component, Show, createEffect } from "solid-js" +import { Component, Show, createEffect, createSignal } from "solid-js" import { alertDialogState, dismissAlertDialog } from "../stores/alerts" import type { AlertVariant, AlertDialogState } from "../stores/alerts" @@ -27,8 +27,9 @@ const variantAccent: Record { const accent = variantAccent[variant] const title = payload.title || accent.fallbackTitle const isConfirm = payload.type === "confirm" - const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : "OK") + const isPrompt = payload.type === "prompt" + const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : isPrompt ? "Run" : "OK") const cancelLabel = payload.cancelLabel || "Cancel" + const [inputValue, setInputValue] = createSignal(payload.inputDefaultValue ?? "") + return ( { -
- {isConfirm && ( - - )} - -
+ +
+ + setInputValue(e.currentTarget.value)} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault() + dismiss(true, payload, inputValue()) + } + }} + /> +
+ + +
+ {(isConfirm || isPrompt) && ( + + )} + +
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx index 454ffdf0..74f6362f 100644 --- a/packages/ui/src/components/instance/instance-shell2.tsx +++ b/packages/ui/src/components/instance/instance-shell2.tsx @@ -26,21 +26,25 @@ import MenuIcon from "@suid/icons-material/Menu" import MenuOpenIcon from "@suid/icons-material/MenuOpen" import PushPinIcon from "@suid/icons-material/PushPin" import PushPinOutlinedIcon from "@suid/icons-material/PushPinOutlined" +import InfoOutlinedIcon from "@suid/icons-material/InfoOutlined" import type { Instance } from "../../types/instance" import type { Command } from "../../lib/commands" import type { BackgroundProcess } from "../../../../server/src/api-types" +import type { Session } from "../../types/session" import { activeParentSessionId, activeSessionId as activeSessionMap, getSessionFamily, getSessionInfo, + getSessionThreads, + sessions, + setActiveParentSession, setActiveSession, } from "../../stores/sessions" import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-registry" import { messageStoreBus } from "../../stores/message-v2/bus" import { clearSessionRenderCache } from "../message-block" -import { buildCustomCommandEntries } from "../../lib/command-utils" -import { getCommands as getInstanceCommands } from "../../stores/commands" + import { isOpen as isCommandPaletteOpen, hideCommandPalette, showCommandPalette } from "../../stores/command-palette" import SessionList from "../session-list" import KeyboardHint from "../keyboard-hint" @@ -50,6 +54,8 @@ import InstanceServiceStatus from "../instance-service-status" import AgentSelector from "../agent-selector" import ModelSelector from "../model-selector" import CommandPalette from "../command-palette" +import PermissionNotificationBanner from "../permission-notification-banner" +import PermissionApprovalModal from "../permission-approval-modal" import Kbd from "../kbd" import { TodoListView } from "../tool-call/renderers/todo" import ContextUsagePanel from "../session/context-usage-panel" @@ -86,7 +92,7 @@ const MAX_SESSION_SIDEBAR_WIDTH = 360 const RIGHT_DRAWER_WIDTH = 260 const MIN_RIGHT_DRAWER_WIDTH = 200 const MAX_RIGHT_DRAWER_WIDTH = 380 -const SESSION_CACHE_LIMIT = 2 +const SESSION_CACHE_LIMIT = 5 const APP_BAR_HEIGHT = 56 const LEFT_DRAWER_STORAGE_KEY = "opencode-session-sidebar-width-v8" const RIGHT_DRAWER_STORAGE_KEY = "opencode-session-right-drawer-width-v1" @@ -141,6 +147,7 @@ const InstanceShell2: Component = (props) => { ]) const [selectedBackgroundProcess, setSelectedBackgroundProcess] = createSignal(null) const [showBackgroundOutput, setShowBackgroundOutput] = createSignal(false) + const [permissionModalOpen, setPermissionModalOpen] = createSignal(false) const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instance.id)) @@ -266,6 +273,12 @@ const InstanceShell2: Component = (props) => { requestAnimationFrame(() => measureDrawerHost()) }) + const allInstanceSessions = createMemo>(() => { + return sessions().get(props.instance.id) ?? new Map() + }) + + const sessionThreads = createMemo(() => getSessionThreads(props.instance.id)) + const activeSessions = createMemo(() => { const parentId = activeParentSessionId().get(props.instance.id) if (!parentId) return new Map[number]>() @@ -373,9 +386,7 @@ const InstanceShell2: Component = (props) => { } } - const customCommands = createMemo(() => buildCustomCommandEntries(props.instance.id, getInstanceCommands(props.instance.id))) - - const instancePaletteCommands = createMemo(() => [...props.paletteCommands(), ...customCommands()]) + const instancePaletteCommands = createMemo(() => props.paletteCommands()) const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id)) const keyboardShortcuts = createMemo(() => @@ -477,7 +488,26 @@ const InstanceShell2: Component = (props) => { }) const handleSessionSelect = (sessionId: string) => { - setActiveSession(props.instance.id, sessionId) + if (sessionId === "info") { + setActiveSession(props.instance.id, sessionId) + return + } + + const session = allInstanceSessions().get(sessionId) + if (!session) return + + if (session.parentId === null) { + setActiveParentSession(props.instance.id, sessionId) + return + } + + const parentId = session.parentId + if (!parentId) return + + batch(() => { + setActiveParentSession(props.instance.id, parentId) + setActiveSession(props.instance.id, sessionId) + }) } @@ -522,23 +552,27 @@ const InstanceShell2: Component = (props) => { }) createEffect(() => { - const sessionsMap = activeSessions() - const parentId = parentSessionIdForInstance() + const instanceSessions = allInstanceSessions() const activeId = activeSessionIdForInstance() + setCachedSessionIds((current) => { - const next: string[] = [] - const append = (id: string | null) => { + const next = current.filter((id) => id !== "info" && instanceSessions.has(id)) + + const touch = (id: string | null) => { if (!id || id === "info") return - if (!sessionsMap.has(id)) return - if (next.includes(id)) return - next.push(id) + if (!instanceSessions.has(id)) return + + const index = next.indexOf(id) + if (index !== -1) { + next.splice(index, 1) + } + next.unshift(id) } - append(parentId) - append(activeId) + touch(activeId) + + const trimmed = next.length > SESSION_CACHE_LIMIT ? next.slice(0, SESSION_CACHE_LIMIT) : next - const limit = parentId ? SESSION_CACHE_LIMIT + 1 : SESSION_CACHE_LIMIT - const trimmed = next.length > limit ? next.slice(0, limit) : next const trimmedSet = new Set(trimmed) const removed = current.filter((id) => !trimmedSet.has(id)) if (removed.length) { @@ -654,7 +688,7 @@ const InstanceShell2: Component = (props) => { }) type DrawerViewState = "pinned" | "floating-open" | "floating-closed" - + const leftDrawerState = createMemo(() => { if (leftPinned()) return "pinned" @@ -695,7 +729,7 @@ const InstanceShell2: Component = (props) => { - const pinLeftDrawer = () => { + const pinLeftDrawer = () => { blurIfInside(leftDrawerContentEl()) batch(() => { setLeftPinned(true) @@ -814,33 +848,37 @@ const InstanceShell2: Component = (props) => { -
- - (leftPinned() ? unpinLeftDrawer() : pinLeftDrawer())} - > - {leftPinned() ? : } - - -
+
+ handleSessionSelect("info")} + > + + + + (leftPinned() ? unpinLeftDrawer() : pinLeftDrawer())} + > + {leftPinned() ? : } + + +
{ - const result = props.onCloseSession(id) - if (result instanceof Promise) { - void result.catch((error) => log.error("Failed to close session:", error)) - } - }} onNew={() => { const result = props.onNewSession() if (result instanceof Promise) { @@ -1222,6 +1260,10 @@ const InstanceShell2: Component = (props) => {
+ setPermissionModalOpen(true)} + />
= (props) => {
} > -
- - {leftAppBarButtonIcon()} - +
+ + {leftAppBarButtonIcon()} + - -
- Used - {formattedUsedTokens()} -
-
- Avail - {formattedAvailableTokens()} -
- -
+ +
+ Used + {formattedUsedTokens()} +
+
+ Avail + {formattedAvailableTokens()} +
+ +
-
- - - - -
+
+ setPermissionModalOpen(true)} + /> + + + + + + +
@@ -1429,6 +1479,12 @@ const InstanceShell2: Component = (props) => { process={selectedBackgroundProcess()} onClose={closeBackgroundOutput} /> + + setPermissionModalOpen(false)} + /> ) } diff --git a/packages/ui/src/components/message-timeline.tsx b/packages/ui/src/components/message-timeline.tsx index df3f28f3..a16f4b8e 100644 --- a/packages/ui/src/components/message-timeline.tsx +++ b/packages/ui/src/components/message-timeline.tsx @@ -5,7 +5,7 @@ import type { ClientPart } from "../types/message" import type { MessageRecord } from "../stores/message-v2/types" import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache" import { getToolIcon } from "./tool-call/utils" -import { User as UserIcon, Bot as BotIcon, FoldVertical } from "lucide-solid" +import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid" export type TimelineSegmentType = "user" | "assistant" | "tool" | "compaction" @@ -17,6 +17,7 @@ export interface TimelineSegment { tooltip: string shortLabel?: string variant?: "auto" | "manual" + toolPartIds?: string[] } interface MessageTimelineProps { @@ -47,6 +48,7 @@ interface PendingSegment { toolTitles: string[] toolTypeLabels: string[] toolIcons: string[] + toolPartIds: string[] hasPrimaryText: boolean } @@ -179,6 +181,7 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord) label, tooltip, shortLabel, + toolPartIds: isToolSegment ? pending.toolPartIds : undefined, }) segmentIndex += 1 pending = null @@ -187,7 +190,7 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord) const ensureSegment = (type: TimelineSegmentType): PendingSegment => { if (!pending || pending.type !== type) { flushPending() - pending = { type, texts: [], reasoningTexts: [], toolTitles: [], toolTypeLabels: [], toolIcons: [], hasPrimaryText: type !== "assistant" } + pending = { type, texts: [], reasoningTexts: [], toolTitles: [], toolTypeLabels: [], toolIcons: [], toolPartIds: [], hasPrimaryText: type !== "assistant" } } return pending! } @@ -204,6 +207,9 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord) target.toolTitles.push(getToolTitle(toolPart)) target.toolTypeLabels.push(getToolTypeLabel(toolPart)) target.toolIcons.push(getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool")) + if (typeof toolPart.id === "string" && toolPart.id.length > 0) { + target.toolPartIds.push(toolPart.id) + } continue } @@ -359,9 +365,25 @@ const MessageTimeline: Component = (props) => { {(segment) => { onCleanup(() => buttonRefs.delete(segment.id)) const isActive = () => props.activeMessageId === segment.messageId - const isHidden = () => segment.type === "tool" && !(showTools() || isActive()) + + const hasActivePermission = () => { + if (segment.type !== "tool") return false + const partIds = segment.toolPartIds ?? [] + if (partIds.length === 0) return false + for (const partId of partIds) { + const permissionState = store().getPermissionState(segment.messageId, partId) + if (permissionState?.active) return true + } + return false + } + + const isHidden = () => segment.type === "tool" && !(showTools() || isActive() || hasActivePermission()) + const shortLabelContent = () => { if (segment.type === "tool") { + if (hasActivePermission()) { + return
+ + + ) +} + +export default PermissionApprovalModal diff --git a/packages/ui/src/components/permission-notification-banner.tsx b/packages/ui/src/components/permission-notification-banner.tsx new file mode 100644 index 00000000..17e04907 --- /dev/null +++ b/packages/ui/src/components/permission-notification-banner.tsx @@ -0,0 +1,36 @@ +import { Show, createMemo, type Component } from "solid-js" +import { ShieldAlert } from "lucide-solid" +import { getPermissionQueueLength } from "../stores/instances" + +interface PermissionNotificationBannerProps { + instanceId: string + onClick: () => void +} + +const PermissionNotificationBanner: Component = (props) => { + const queueLength = createMemo(() => getPermissionQueueLength(props.instanceId)) + const hasPermissions = createMemo(() => queueLength() > 0) + const label = createMemo(() => { + const count = queueLength() + return `${count} permission${count === 1 ? "" : "s"} pending approval` + }) + + return ( + + + + ) +} + +export default PermissionNotificationBanner diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx index f0f621a1..6bd83631 100644 --- a/packages/ui/src/components/prompt-input.tsx +++ b/packages/ui/src/components/prompt-input.tsx @@ -7,9 +7,11 @@ import { resolvePastedPlaceholders } from "../lib/prompt-placeholders" import { createFileAttachment, createTextAttachment, createAgentAttachment } from "../types/attachment" import type { Attachment } from "../types/attachment" import type { Agent } from "../types/session" +import type { Command as SDKCommand } from "@opencode-ai/sdk/v2" import Kbd from "./kbd" import { getActiveInstance } from "../stores/instances" -import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt } from "../stores/sessions" +import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt, executeCustomCommand } from "../stores/sessions" +import { getCommands } from "../stores/commands" import { showAlertDialog } from "../stores/alerts" import { getLogger } from "../lib/logger" const log = getLogger("actions") @@ -36,6 +38,7 @@ export default function PromptInput(props: PromptInputProps) { const [historyDraft, setHistoryDraft] = createSignal(null) const [, setIsFocused] = createSignal(false) const [showPicker, setShowPicker] = createSignal(false) + const [pickerMode, setPickerMode] = createSignal<"mention" | "command">("mention") const [searchQuery, setSearchQuery] = createSignal("") const [atPosition, setAtPosition] = createSignal(null) const [isDragging, setIsDragging] = createSignal(false) @@ -560,14 +563,28 @@ export default function PromptInput(props: PromptInputProps) { const currentAttachments = attachments() if (props.disabled || (!text && currentAttachments.length === 0)) return - const resolvedPrompt = resolvePastedPlaceholders(text, currentAttachments) const isShellMode = mode() === "shell" + // Slash command routing (match OpenCode TUI): only run if the command exists. + const isSlashCandidate = !isShellMode && text.startsWith("/") + const firstSpace = isSlashCandidate ? text.indexOf(" ") : -1 + const commandToken = isSlashCandidate ? (firstSpace === -1 ? text : text.slice(0, firstSpace)) : "" + const commandName = isSlashCandidate ? commandToken.slice(1) : "" + const commandArgs = isSlashCandidate ? (firstSpace === -1 ? "" : text.slice(firstSpace + 1).trimStart()) : "" + + const isKnownSlashCommand = + isSlashCandidate && + commandName.length > 0 && + getCommands(props.instanceId).some((cmd) => cmd.name === commandName) + + const resolvedPrompt = isKnownSlashCommand ? text : resolvePastedPlaceholders(text, currentAttachments) + const historyEntry = resolvedPrompt + const refreshHistory = async () => { try { - await addToHistory(props.instanceFolder, resolvedPrompt) + await addToHistory(props.instanceFolder, historyEntry) setHistory((prev) => { - const next = [resolvedPrompt, ...prev] + const next = [historyEntry, ...prev] if (next.length > HISTORY_LIMIT) { next.length = HISTORY_LIMIT } @@ -580,12 +597,25 @@ export default function PromptInput(props: PromptInputProps) { } clearPrompt() - clearAttachments(props.instanceId, props.sessionId) - setIgnoredAtPositions(new Set()) - setPasteCount(0) - setImageCount(0) + + // Ignore attachments for slash commands, but keep them for next prompt. + if (!isKnownSlashCommand) { + clearAttachments(props.instanceId, props.sessionId) + setPasteCount(0) + setImageCount(0) + setIgnoredAtPositions(new Set()) + } else { + syncAttachmentCounters("", currentAttachments) + setIgnoredAtPositions(new Set()) + } + setHistoryDraft(null) + if (isKnownSlashCommand) { + // Record attempted slash commands even if execution fails. + void refreshHistory() + } + try { if (isShellMode) { if (props.onRunShell) { @@ -593,10 +623,14 @@ export default function PromptInput(props: PromptInputProps) { } else { await props.onSend(resolvedPrompt, []) } + } else if (isKnownSlashCommand) { + await executeCustomCommand(props.instanceId, props.sessionId, commandName, commandArgs) } else { await props.onSend(resolvedPrompt, currentAttachments) } - void refreshHistory() + if (!isKnownSlashCommand) { + void refreshHistory() + } } catch (error) { log.error("Failed to send message:", error) showAlertDialog("Failed to send message", { @@ -677,11 +711,27 @@ export default function PromptInput(props: PromptInputProps) { setHistoryDraft(null) const cursorPos = target.selectionStart + + // Slash command picker (only when editing the command token: "/") + if (value.startsWith("/") && cursorPos >= 1) { + const firstWhitespaceIndex = value.slice(1).search(/\s/) + const tokenEnd = firstWhitespaceIndex === -1 ? value.length : firstWhitespaceIndex + 1 + + if (cursorPos <= tokenEnd) { + setPickerMode("command") + setAtPosition(0) + setSearchQuery(value.substring(1, cursorPos)) + setShowPicker(true) + return + } + } + const textBeforeCursor = value.substring(0, cursorPos) const lastAtIndex = textBeforeCursor.lastIndexOf("@") const previousAtPosition = atPosition() + if (lastAtIndex === -1) { setIgnoredAtPositions(new Set()) } else if (previousAtPosition !== null && lastAtIndex !== previousAtPosition) { @@ -698,6 +748,7 @@ export default function PromptInput(props: PromptInputProps) { if (!hasSpace && cursorPos === lastAtIndex + textAfterAt.length + 1) { if (!ignoredAtPositions().has(lastAtIndex)) { + setPickerMode("mention") setAtPosition(lastAtIndex) setSearchQuery(textAfterAt) setShowPicker(true) @@ -716,9 +767,30 @@ export default function PromptInput(props: PromptInputProps) { | { type: "file" file: { path: string; relativePath?: string; isGitFile: boolean; isDirectory?: boolean } - }, + } + | { type: "command"; command: SDKCommand }, ) { - if (item.type === "agent") { + if (item.type === "command") { + const name = item.command.name + const currentPrompt = prompt() + + const afterSlash = currentPrompt.slice(1) + const firstWhitespaceIndex = afterSlash.search(/\s/) + const tokenEnd = firstWhitespaceIndex === -1 ? currentPrompt.length : firstWhitespaceIndex + 1 + + const before = "" + const after = currentPrompt.substring(tokenEnd) + const newPrompt = before + `/${name} ` + after + setPrompt(newPrompt) + + setTimeout(() => { + if (textareaRef) { + const newCursorPos = `/${name} `.length + textareaRef.setSelectionRange(newCursorPos, newCursorPos) + textareaRef.focus() + } + }, 0) + } else if (item.type === "agent") { const agentName = item.agent.name const existingAttachments = attachments() const alreadyAttached = existingAttachments.some( @@ -822,7 +894,7 @@ export default function PromptInput(props: PromptInputProps) { function handlePickerClose() { const pos = atPosition() - if (pos !== null) { + if (pickerMode() === "mention" && pos !== null) { setIgnoredAtPositions((prev) => new Set(prev).add(pos)) } setShowPicker(false) @@ -958,7 +1030,8 @@ export default function PromptInput(props: PromptInputProps) { return hasText || attachments().length > 0 } - const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "for shell mode" }) + const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "Shell mode" }) + const commandHint = () => ({ key: "/", text: "Commands" }) const shouldShowOverlay = () => prompt().length === 0 @@ -981,9 +1054,11 @@ export default function PromptInput(props: PromptInputProps) { - Enter for new line • to send • @ for files/agents • ↑↓ for history + Enter New line • Send • @ Files/agents • ↑↓ History 0}> • {attachments().length} file(s) attached @@ -1149,6 +1224,11 @@ export default function PromptInput(props: PromptInputProps) { • {shellHint().key} {shellHint().text} + + + • {commandHint().key} {commandHint().text} + + Shell mode active diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx index e9b25ef6..9bd7fa09 100644 --- a/packages/ui/src/components/session-list.tsx +++ b/packages/ui/src/components/session-list.tsx @@ -1,14 +1,22 @@ -import { Component, For, Show, createSignal, createMemo, JSX } from "solid-js" +import { Component, For, Show, createSignal, createMemo, createEffect, JSX, onCleanup } from "solid-js" import type { Session, SessionStatus } from "../types/session" +import type { SessionThread } from "../stores/session-state" import { getSessionStatus } from "../stores/session-status" -import { MessageSquare, Info, X, Copy, Trash2, Pencil, ShieldAlert } from "lucide-solid" +import { Bot, User, Copy, Trash2, Pencil, ShieldAlert, ChevronDown } from "lucide-solid" import KeyboardHint from "./keyboard-hint" -import Kbd from "./kbd" import SessionRenameDialog from "./session-rename-dialog" import { keyboardRegistry } from "../lib/keyboard-registry" -import { formatShortcut } from "../lib/keyboard-utils" import { showToastNotification } from "../lib/notifications" -import { deleteSession, loading, renameSession } from "../stores/sessions" +import { + deleteSession, + ensureSessionParentExpanded, + getVisibleSessionIds, + isSessionParentExpanded, + loading, + renameSession, + setActiveSessionFromList, + toggleSessionParentExpanded, +} from "../stores/sessions" import { getLogger } from "../lib/logger" import { copyToClipboard } from "../lib/clipboard" const log = getLogger("session") @@ -18,9 +26,9 @@ const log = getLogger("session") interface SessionListProps { instanceId: string sessions: Map + threads: SessionThread[] activeSessionId: string | null onSelect: (sessionId: string) => void - onClose: (sessionId: string) => void onNew: () => void showHeader?: boolean showFooter?: boolean @@ -39,35 +47,23 @@ function formatSessionStatus(status: SessionStatus): string { } } -function arraysEqual(prev: readonly string[] | undefined, next: readonly string[]): boolean { - if (!prev) { - return false - } - - if (prev.length !== next.length) { - return false - } - - for (let i = 0; i < prev.length; i++) { - if (prev[i] !== next[i]) { - return false - } - } - - return true -} - const SessionList: Component = (props) => { const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null) const [isRenaming, setIsRenaming] = createSignal(false) - const infoShortcut = keyboardRegistry.get("switch-to-info") - + const isSessionDeleting = (sessionId: string) => { const deleting = loading().deletingSession.get(props.instanceId) return deleting ? deleting.has(sessionId) : false } + const selectSession = (sessionId: string) => { + const session = props.sessions.get(sessionId) + const parentId = session?.parentId ?? session?.id + if (parentId) { + ensureSessionParentExpanded(props.instanceId, parentId) + } + props.onSelect(sessionId) } @@ -90,9 +86,45 @@ const SessionList: Component = (props) => { const handleDeleteSession = async (event: MouseEvent, sessionId: string) => { event.stopPropagation() if (isSessionDeleting(sessionId)) return - + + const shouldSelectFallback = props.activeSessionId === sessionId + let fallbackSessionId: string | undefined + + if (shouldSelectFallback) { + const visible = getVisibleSessionIds(props.instanceId) + const currentIndex = visible.indexOf(sessionId) + const remaining = visible.filter((id) => id !== sessionId) + + if (remaining.length > 0) { + if (currentIndex !== -1) { + for (let i = currentIndex; i < visible.length; i++) { + const candidate = visible[i] + if (candidate && candidate !== sessionId) { + fallbackSessionId = candidate + break + } + } + + if (!fallbackSessionId) { + for (let i = currentIndex - 1; i >= 0; i--) { + const candidate = visible[i] + if (candidate && candidate !== sessionId) { + fallbackSessionId = candidate + break + } + } + } + } + + fallbackSessionId ??= remaining[0] + } + } + try { await deleteSession(props.instanceId, sessionId) + if (fallbackSessionId) { + setActiveSessionFromList(props.instanceId, fallbackSessionId) + } } catch (error) { log.error(`Failed to delete session ${sessionId}:`, error) showToastNotification({ message: "Unable to delete session", variant: "error" }) @@ -127,7 +159,14 @@ const SessionList: Component = (props) => { } - const SessionRow: Component<{ sessionId: string; canClose?: boolean }> = (rowProps) => { + const SessionRow: Component<{ + sessionId: string + isChild?: boolean + isLastChild?: boolean + hasChildren?: boolean + expanded?: boolean + onToggleExpand?: () => void + }> = (rowProps) => { const session = () => props.sessions.get(rowProps.sessionId) if (!session()) { return <> @@ -144,41 +183,55 @@ const SessionList: Component = (props) => {
-
- +
listEl[1](el)}> + 0}> +
+ - 0}> -
-
- User Session -
- {(id) => } -
- + {(thread) => { + const expanded = () => isSessionParentExpanded(props.instanceId, thread.parent.id) + return ( + <> + 0} + expanded={expanded()} + onToggleExpand={() => toggleSessionParentExpanded(props.instanceId, thread.parent.id)} + /> - 0}> -
-
- Agent Sessions -
- {(id) => } + 0}> + + {(child, index) => ( + + )} + + + + ) + }} +
diff --git a/packages/ui/src/components/unified-picker.tsx b/packages/ui/src/components/unified-picker.tsx index d12e9899..fab200c9 100644 --- a/packages/ui/src/components/unified-picker.tsx +++ b/packages/ui/src/components/unified-picker.tsx @@ -1,5 +1,6 @@ -import { Component, createSignal, createEffect, For, Show, onCleanup } from "solid-js" +import { Component, createSignal, createEffect, createMemo, For, Show, onCleanup } from "solid-js" import type { Agent } from "../types/session" +import type { Command as SDKCommand } from "@opencode-ai/sdk/v2" import type { OpencodeClient } from "@opencode-ai/sdk/v2/client" import { serverApi } from "../lib/api-client" import { getLogger } from "../lib/logger" @@ -67,13 +68,18 @@ function mapEntriesToFileItems(entries: { path: string; type: "file" | "director }) } -type PickerItem = { type: "agent"; agent: Agent } | { type: "file"; file: FileItem } +type PickerItem = + | { type: "agent"; agent: Agent } + | { type: "file"; file: FileItem } + | { type: "command"; command: SDKCommand } interface UnifiedPickerProps { open: boolean + mode?: "mention" | "command" onSelect: (item: PickerItem) => void onClose: () => void agents: Agent[] + commands?: SDKCommand[] instanceClient: OpencodeClient | null searchQuery: string textareaRef?: HTMLTextAreaElement @@ -81,6 +87,8 @@ interface UnifiedPickerProps { } const UnifiedPicker: Component = (props) => { + const mode = () => props.mode ?? "mention" + const [files, setFiles] = createSignal([]) const [filteredAgents, setFilteredAgents] = createSignal([]) const [selectedIndex, setSelectedIndex] = createSignal(0) @@ -246,6 +254,11 @@ const UnifiedPicker: Component = (props) => { return } + if (mode() !== "mention") { + // Command mode doesn't use file snapshots. + return + } + const workspaceChanged = lastWorkspaceId !== props.workspaceId const queryChanged = lastQuery !== props.searchQuery @@ -262,6 +275,7 @@ const UnifiedPicker: Component = (props) => { createEffect(() => { if (!props.open) return + if (mode() !== "mention") return const query = props.searchQuery.toLowerCase() const filtered = query @@ -275,8 +289,25 @@ const UnifiedPicker: Component = (props) => { setFilteredAgents(filtered) }) + const filteredCommands = createMemo(() => { + if (mode() !== "command") return [] + const q = props.searchQuery.trim().toLowerCase() + const source = props.commands ?? [] + if (!q) return source + return source.filter((cmd) => { + const nameMatch = cmd.name.toLowerCase().includes(q) + const descMatch = (cmd.description ?? "").toLowerCase().includes(q) + return nameMatch || descMatch + }) + }) + const allItems = (): PickerItem[] => { const items: PickerItem[] = [] + if (mode() === "command") { + filteredCommands().forEach((command) => items.push({ type: "command", command })) + return items + } + filteredAgents().forEach((agent) => items.push({ type: "agent", agent })) files().forEach((file) => items.push({ type: "file", file })) return items @@ -329,9 +360,10 @@ const UnifiedPicker: Component = (props) => { } }) + const commandCount = () => filteredCommands().length const agentCount = () => filteredAgents().length const fileCount = () => files().length - const isLoading = () => loadingState() !== "idle" + const isLoading = () => mode() === "mention" && loadingState() !== "idle" const loadingMessage = () => { if (loadingState() === "search") { return "Searching..." @@ -351,7 +383,9 @@ const UnifiedPicker: Component = (props) => { >
- Select Agent or File + + Select Command + {loadingMessage()} @@ -359,11 +393,41 @@ const UnifiedPicker: Component = (props) => {
- +
No results found
 - 0}> + 0}> +
COMMANDS
+ + {(command) => { + const itemIndex = allItems().findIndex((item) => item.type === "command" && item.command.name === command.name) + return ( +
handleSelect({ type: "command", command })} + > +
+ + + +
+
/{command.name}
+ +
+ {(command.description ?? "").length > 80 ? (command.description ?? "").slice(0, 80) + "..." : command.description} +
+ +
+
+
+ ) + }} + + + + 0}>
AGENTS
@@ -418,7 +482,7 @@ const UnifiedPicker: Component = (props) => { - 0}> + 0}>
FILES
diff --git a/packages/ui/src/lib/command-utils.ts b/packages/ui/src/lib/command-utils.ts index 992586d5..7152d5a3 100644 --- a/packages/ui/src/lib/command-utils.ts +++ b/packages/ui/src/lib/command-utils.ts @@ -1,6 +1,6 @@ import type { Command } from "./commands" import type { Command as SDKCommand } from "@opencode-ai/sdk" -import { showAlertDialog } from "../stores/alerts" +import { showAlertDialog, showPromptDialog } from "../stores/alerts" import { activeSessionId, executeCustomCommand } from "../stores/sessions" import { getLogger } from "./logger" @@ -11,15 +11,29 @@ export function commandRequiresArguments(template?: string): boolean { return /\$(?:\d+|ARGUMENTS)/.test(template) } -export function promptForCommandArguments(command: SDKCommand): string | null { +export async function promptForCommandArguments(command: SDKCommand): Promise { if (!commandRequiresArguments(command.template)) { return "" } - const input = window.prompt(`Arguments for /${command.name}`, "") - if (input === null) { + + try { + return await showPromptDialog(`Arguments for /${command.name}`, { + title: "Custom command", + variant: "info", + inputLabel: "Arguments", + inputPlaceholder: "e.g. foo bar", + inputDefaultValue: "", + confirmLabel: "Run", + cancelLabel: "Cancel", + }) + } catch (error) { + log.error("Failed to prompt for command arguments", error) + showAlertDialog("Failed to open arguments prompt.", { + title: "Command arguments", + variant: "error", + }) return null } - return input } function formatCommandLabel(name: string): string { @@ -43,11 +57,11 @@ export function buildCustomCommandEntries(instanceId: string, commands: SDKComma }) return } - const args = promptForCommandArguments(cmd) - if (args === null) { - return - } try { + const args = await promptForCommandArguments(cmd) + if (args === null) { + return + } await executeCustomCommand(instanceId, sessionId, cmd.name, args) } catch (error) { log.error("Failed to run custom command", error) diff --git a/packages/ui/src/lib/hooks/use-commands.ts b/packages/ui/src/lib/hooks/use-commands.ts index 8a09c481..ee450bad 100644 --- a/packages/ui/src/lib/hooks/use-commands.ts +++ b/packages/ui/src/lib/hooks/use-commands.ts @@ -4,13 +4,7 @@ import type { Preferences, ExpansionPreference } from "../../stores/preferences" import { createCommandRegistry, type Command } from "../commands" import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances" import type { ClientPart, MessageInfo } from "../../types/message" -import { - activeParentSessionId, - activeSessionId as activeSessionMap, - getSessionFamily, - getSessions, - setActiveSession, -} from "../../stores/sessions" +import { getSessions, getVisibleSessionIds, setActiveSession, setActiveSessionFromList } from "../../stores/sessions" import { showAlertDialog } from "../../stores/alerts" import type { Instance } from "../../types/instance" import type { MessageRecord } from "../../stores/message-v2/types" @@ -186,15 +180,16 @@ export function useCommands(options: UseCommandsOptions) { action: () => { const instanceId = activeInstanceId() if (!instanceId) return - const parentId = activeParentSessionId().get(instanceId) - if (!parentId) return - const familySessions = getSessionFamily(instanceId, parentId) - const ids = familySessions.map((s) => s.id).concat(["info"]) + const ids = getVisibleSessionIds(instanceId) if (ids.length <= 1) return - const current = ids.indexOf(activeSessionMap().get(instanceId) || "") - const next = (current + 1) % ids.length - if (ids[next]) { - setActiveSession(instanceId, ids[next]) + + const currentActiveId = activeSessionIdForInstance() ?? "" + const currentIndex = ids.indexOf(currentActiveId) + const targetIndex = (currentIndex + 1 + ids.length) % ids.length + + const targetSessionId = ids[targetIndex] + if (targetSessionId) { + setActiveSessionFromList(instanceId, targetSessionId) emitSessionSidebarRequest({ instanceId, action: "show-session-list" }) } }, @@ -210,15 +205,17 @@ export function useCommands(options: UseCommandsOptions) { action: () => { const instanceId = activeInstanceId() if (!instanceId) return - const parentId = activeParentSessionId().get(instanceId) - if (!parentId) return - const familySessions = getSessionFamily(instanceId, parentId) - const ids = familySessions.map((s) => s.id).concat(["info"]) + const ids = getVisibleSessionIds(instanceId) if (ids.length <= 1) return - const current = ids.indexOf(activeSessionMap().get(instanceId) || "") - const prev = current <= 0 ? ids.length - 1 : current - 1 - if (ids[prev]) { - setActiveSession(instanceId, ids[prev]) + + const currentActiveId = activeSessionIdForInstance() ?? "" + const currentIndex = ids.indexOf(currentActiveId) + const targetIndex = + currentIndex === -1 ? ids.length - 1 : currentIndex <= 0 ? ids.length - 1 : currentIndex - 1 + + const targetSessionId = ids[targetIndex] + if (targetSessionId) { + setActiveSessionFromList(instanceId, targetSessionId) emitSessionSidebarRequest({ instanceId, action: "show-session-list" }) } }, diff --git a/packages/ui/src/lib/shortcuts/navigation.ts b/packages/ui/src/lib/shortcuts/navigation.ts index 987b2418..8dcea0f7 100644 --- a/packages/ui/src/lib/shortcuts/navigation.ts +++ b/packages/ui/src/lib/shortcuts/navigation.ts @@ -1,24 +1,11 @@ import { keyboardRegistry } from "../keyboard-registry" import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances" -import { getSessionFamily, activeSessionId, setActiveSession, activeParentSessionId } from "../../stores/sessions" +import { activeSessionId, getVisibleSessionIds, setActiveSession, setActiveSessionFromList } from "../../stores/sessions" export function registerNavigationShortcuts() { const isMac = () => navigator.platform.toLowerCase().includes("mac") - const buildNavigationOrder = (instanceId: string): string[] => { - const parentId = activeParentSessionId().get(instanceId) - if (!parentId) return [] - const familySessions = getSessionFamily(instanceId, parentId) - if (familySessions.length === 0) return [] - - const [parentSession, ...childSessions] = familySessions - if (!parentSession) return [] - - const sortedChildren = childSessions.slice().sort((a, b) => b.time.updated - a.time.updated) - - return [parentSession.id, "info", ...sortedChildren.map((session) => session.id)] - } keyboardRegistry.register({ id: "instance-prev", @@ -58,20 +45,23 @@ export function registerNavigationShortcuts() { const instanceId = activeInstanceId() if (!instanceId) return - const navigationIds = buildNavigationOrder(instanceId) + const navigationIds = getVisibleSessionIds(instanceId) if (navigationIds.length === 0) return - const currentActiveId = activeSessionId().get(instanceId) - let currentIndex = navigationIds.indexOf(currentActiveId || "") + const currentActiveId = activeSessionId().get(instanceId) ?? "" + const currentIndex = navigationIds.indexOf(currentActiveId) - if (currentIndex === -1) { - currentIndex = navigationIds.length - 1 - } + const targetIndex = + currentIndex === -1 + ? navigationIds.length - 1 + : currentIndex <= 0 + ? navigationIds.length - 1 + : currentIndex - 1 - const targetIndex = currentIndex <= 0 ? navigationIds.length - 1 : currentIndex - 1 const targetSessionId = navigationIds[targetIndex] - - setActiveSession(instanceId, targetSessionId) + if (targetSessionId) { + setActiveSessionFromList(instanceId, targetSessionId) + } }, description: "previous session", context: "global", @@ -85,20 +75,17 @@ export function registerNavigationShortcuts() { const instanceId = activeInstanceId() if (!instanceId) return - const navigationIds = buildNavigationOrder(instanceId) + const navigationIds = getVisibleSessionIds(instanceId) if (navigationIds.length === 0) return - const currentActiveId = activeSessionId().get(instanceId) - let currentIndex = navigationIds.indexOf(currentActiveId || "") + const currentActiveId = activeSessionId().get(instanceId) ?? "" + const currentIndex = navigationIds.indexOf(currentActiveId) + const targetIndex = (currentIndex + 1 + navigationIds.length) % navigationIds.length - if (currentIndex === -1) { - currentIndex = 0 - } - - const targetIndex = (currentIndex + 1) % navigationIds.length const targetSessionId = navigationIds[targetIndex] - - setActiveSession(instanceId, targetSessionId) + if (targetSessionId) { + setActiveSessionFromList(instanceId, targetSessionId) + } }, description: "next session", context: "global", diff --git a/packages/ui/src/stores/alerts.ts b/packages/ui/src/stores/alerts.ts index a3c7775b..720e0208 100644 --- a/packages/ui/src/stores/alerts.ts +++ b/packages/ui/src/stores/alerts.ts @@ -3,7 +3,7 @@ import { createSignal } from "solid-js" export type AlertVariant = "info" | "warning" | "error" export type AlertDialogState = { - type?: "alert" | "confirm" + type?: "alert" | "confirm" | "prompt" title?: string message: string detail?: string @@ -12,7 +12,17 @@ export type AlertDialogState = { cancelLabel?: string onConfirm?: () => void onCancel?: () => void + + // prompt-only + inputLabel?: string + inputPlaceholder?: string + inputDefaultValue?: string + + // confirm-only resolve?: (value: boolean) => void + + // prompt-only + resolvePrompt?: (value: string | null) => void } const [alertDialogState, setAlertDialogState] = createSignal(null) @@ -39,6 +49,23 @@ export function showConfirmDialog(message: string, options?: Omit, +): Promise { + const activeElement = typeof document !== "undefined" ? (document.activeElement as HTMLElement | null) : null + activeElement?.blur() + + return new Promise((resolvePrompt) => { + setAlertDialogState({ + type: "prompt", + message, + ...options, + resolvePrompt, + }) + }) +} + export function dismissAlertDialog() { setAlertDialogState(null) } diff --git a/packages/ui/src/stores/instances.ts b/packages/ui/src/stores/instances.ts index 282b945b..adaa4a8e 100644 --- a/packages/ui/src/stores/instances.ts +++ b/packages/ui/src/stores/instances.ts @@ -562,6 +562,14 @@ function clearPermissionQueue(instanceId: string): void { +function setActivePermissionIdForInstance(instanceId: string, permissionId: string): void { + setActivePermissionId((prev) => { + const next = new Map(prev) + next.set(instanceId, permissionId) + return next + }) +} + async function sendPermissionResponse( instanceId: string, sessionId: string, @@ -656,6 +664,7 @@ export { removePermissionFromQueue, clearPermissionQueue, sendPermissionResponse, + setActivePermissionIdForInstance, disconnectedInstance, acknowledgeDisconnectedInstance, fetchLspStatus, diff --git a/packages/ui/src/stores/session-state.ts b/packages/ui/src/stores/session-state.ts index 84b5aaf4..ce36090d 100644 --- a/packages/ui/src/stores/session-state.ts +++ b/packages/ui/src/stores/session-state.ts @@ -1,4 +1,4 @@ -import { createSignal } from "solid-js" +import { batch, createSignal } from "solid-js" import type { Session, SessionStatus, Agent, Provider } from "../types/session" import { deleteSession, loadMessages } from "./session-api" @@ -23,6 +23,12 @@ export interface SessionInfo { contextAvailableTokens: number | null } +export type SessionThread = { + parent: Session + children: Session[] + latestUpdated: number +} + const [sessions, setSessions] = createSignal>>(new Map()) const [activeSessionId, setActiveSessionId] = createSignal>(new Map()) const [activeParentSessionId, setActiveParentSessionId] = createSignal>(new Map()) @@ -40,6 +46,8 @@ const [loading, setLoading] = createSignal({ const [messagesLoaded, setMessagesLoaded] = createSignal>>(new Map()) const [sessionInfoByInstance, setSessionInfoByInstance] = createSignal>>(new Map()) +const [expandedSessionParents, setExpandedSessionParents] = createSignal>>(new Map()) + export type InstanceSessionIndicatorStatus = "permission" | SessionStatus type InstanceIndicatorCounts = { @@ -375,6 +383,140 @@ function getSessionFamily(instanceId: string, parentId: string): Session[] { return [parent, ...children] } +function getSessionThreads(instanceId: string): SessionThread[] { + const instanceSessions = sessions().get(instanceId) + if (!instanceSessions || instanceSessions.size === 0) return [] + + const parents: Session[] = [] + const childrenByParent = new Map() + + for (const session of instanceSessions.values()) { + if (session.parentId === null) { + parents.push(session) + continue + } + + const parentId = session.parentId + if (!parentId) continue + const children = childrenByParent.get(parentId) + if (children) { + children.push(session) + } else { + childrenByParent.set(parentId, [session]) + } + } + + const threads: SessionThread[] = [] + + for (const parent of parents) { + const children = childrenByParent.get(parent.id) ?? [] + if (children.length > 1) { + children.sort((a, b) => (b.time.updated ?? 0) - (a.time.updated ?? 0)) + } + + const parentUpdated = parent.time.updated ?? 0 + const latestChild = children[0]?.time.updated ?? 0 + const latestUpdated = Math.max(parentUpdated, latestChild) + + threads.push({ parent, children, latestUpdated }) + } + + threads.sort((a, b) => { + if (b.latestUpdated !== a.latestUpdated) return b.latestUpdated - a.latestUpdated + const bParentUpdated = b.parent.time.updated ?? 0 + const aParentUpdated = a.parent.time.updated ?? 0 + if (bParentUpdated !== aParentUpdated) return bParentUpdated - aParentUpdated + return b.parent.id.localeCompare(a.parent.id) + }) + + return threads +} + +function isSessionParentExpanded(instanceId: string, parentSessionId: string): boolean { + return Boolean(expandedSessionParents().get(instanceId)?.has(parentSessionId)) +} + +function setSessionParentExpanded(instanceId: string, parentSessionId: string, expanded: boolean): void { + setExpandedSessionParents((prev) => { + const next = new Map(prev) + const currentSet = next.get(instanceId) ?? new Set() + const updated = new Set(currentSet) + + if (expanded) { + updated.add(parentSessionId) + } else { + updated.delete(parentSessionId) + } + + if (updated.size === 0) { + next.delete(instanceId) + } else { + next.set(instanceId, updated) + } + + return next + }) +} + +function toggleSessionParentExpanded(instanceId: string, parentSessionId: string): void { + setExpandedSessionParents((prev) => { + const next = new Map(prev) + const currentSet = next.get(instanceId) ?? new Set() + const updated = new Set(currentSet) + + if (updated.has(parentSessionId)) { + updated.delete(parentSessionId) + } else { + updated.add(parentSessionId) + } + + next.set(instanceId, updated) + return next + }) +} + +function ensureSessionParentExpanded(instanceId: string, parentSessionId: string): void { + if (isSessionParentExpanded(instanceId, parentSessionId)) return + setSessionParentExpanded(instanceId, parentSessionId, true) +} + +function getVisibleSessionIds(instanceId: string): string[] { + const threads = getSessionThreads(instanceId) + if (threads.length === 0) return [] + + const expanded = expandedSessionParents().get(instanceId) + const ids: string[] = [] + + for (const thread of threads) { + ids.push(thread.parent.id) + if (expanded?.has(thread.parent.id)) { + for (const child of thread.children) { + ids.push(child.id) + } + } + } + + return ids +} + +function setActiveSessionFromList(instanceId: string, sessionId: string): void { + const session = sessions().get(instanceId)?.get(sessionId) + if (!session) return + + if (session.parentId === null) { + setActiveParentSession(instanceId, sessionId) + return + } + + const parentId = session.parentId + if (!parentId) return + + batch(() => { + setActiveParentSession(instanceId, parentId) + setActiveSession(instanceId, sessionId) + }) +} + function isSessionBusy(instanceId: string, sessionId: string): boolean { const instanceSessions = sessions().get(instanceId) if (!instanceSessions) return false @@ -530,6 +672,13 @@ export { getParentSessions, getChildSessions, getSessionFamily, + getSessionThreads, + getVisibleSessionIds, + isSessionParentExpanded, + setSessionParentExpanded, + toggleSessionParentExpanded, + ensureSessionParentExpanded, + setActiveSessionFromList, isSessionBusy, isSessionMessagesLoading, getSessionInfo, diff --git a/packages/ui/src/stores/sessions.ts b/packages/ui/src/stores/sessions.ts index 739e6e33..286f23dc 100644 --- a/packages/ui/src/stores/sessions.ts +++ b/packages/ui/src/stores/sessions.ts @@ -9,6 +9,7 @@ import { clearActiveParentSession, clearInstanceDraftPrompts, clearSessionDraftPrompt, + ensureSessionParentExpanded, getActiveParentSession, getActiveSession, getChildSessions, @@ -16,18 +17,24 @@ import { getSessionDraftPrompt, getSessionFamily, getSessionInfo, + getSessionThreads, getSessions, + getVisibleSessionIds, isSessionBusy, isSessionMessagesLoading, + isSessionParentExpanded, loading, providers, sessionInfoByInstance, sessions, setActiveParentSession, setActiveSession, + setActiveSessionFromList, setSessionDraftPrompt, + setSessionParentExpanded, setSessionStatus, - } from "./session-state" + toggleSessionParentExpanded, +} from "./session-state" import { getDefaultModel } from "./session-models" import { @@ -85,6 +92,7 @@ export { clearSessionDraftPrompt, createSession, deleteSession, + ensureSessionParentExpanded, executeCustomCommand, renameSession, runShellCommand, @@ -100,9 +108,12 @@ export { getSessionDraftPrompt, getSessionFamily, getSessionInfo, + getSessionThreads, getSessions, + getVisibleSessionIds, isSessionBusy, isSessionMessagesLoading, + isSessionParentExpanded, loadMessages, loading, providers, @@ -111,8 +122,11 @@ export { sessions, setActiveParentSession, setActiveSession, + setActiveSessionFromList, setSessionDraftPrompt, + setSessionParentExpanded, setSessionStatus, + toggleSessionParentExpanded, updateSessionAgent, updateSessionModel, } diff --git a/packages/ui/src/styles/components/permission-notification.css b/packages/ui/src/styles/components/permission-notification.css new file mode 100644 index 00000000..ccffd2c5 --- /dev/null +++ b/packages/ui/src/styles/components/permission-notification.css @@ -0,0 +1,237 @@ +/* Central permission UI (toolbar + modal). + Kept intentionally small; reuse existing tokens. */ + +.permission-center-trigger { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.5rem; + border-radius: 9999px; + border: 1px solid var(--session-status-permission-fg); + background-color: var(--session-status-permission-bg); + color: var(--session-status-permission-fg); + font-size: 0.75rem; + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; +} + +.permission-center-trigger:hover, +.permission-center-trigger:focus-visible { + outline: none; + background-color: color-mix(in srgb, var(--session-status-permission-bg) 70%, var(--surface-hover)); + transform: translateY(-1px); +} + +.permission-center-icon { + width: 1rem; + height: 1rem; +} + +.permission-center-count { + line-height: 1; +} + +.permission-center-modal-backdrop { + position: fixed; + inset: 0; + background: color-mix(in srgb, var(--text-inverted) 55%, transparent); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + padding: var(--space-lg); +} + +.permission-center-modal { + width: min(900px, 100%); + max-height: 90vh; + display: flex; + flex-direction: column; + border-radius: var(--radius-xl); + border: 1px solid var(--border-base); + background: var(--surface-base); + box-shadow: var(--panel-shadow, 0 12px 32px rgba(0, 0, 0, 0.25)); + overflow: hidden; +} + +.permission-center-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-md); + border-bottom: 1px solid var(--border-base); +} + +.permission-center-modal-title-row { + display: flex; + align-items: center; + gap: var(--space-sm); + min-width: 0; +} + +.permission-center-modal-title { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-semibold); + color: var(--text-primary); + margin: 0; +} + +.permission-center-modal-count { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 1.5rem; + height: 1.5rem; + padding: 0 0.4rem; + border-radius: 9999px; + background: var(--session-status-permission-bg); + color: var(--session-status-permission-fg); + border: 1px solid var(--session-status-permission-fg); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); +} + +.permission-center-modal-close { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: var(--radius-sm); + border: 1px solid var(--border-base); + background: var(--surface-secondary); + color: var(--text-primary); + cursor: pointer; +} + +.permission-center-modal-close:hover { + background: var(--surface-hover); +} + +.permission-center-modal-body { + flex: 1; + min-height: 0; + overflow: auto; + padding: var(--space-md); +} + +.permission-center-empty { + color: var(--text-secondary); + padding: var(--space-lg); + text-align: center; +} + +.permission-center-list { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.permission-center-item { + border: 1px solid var(--border-base); + border-radius: var(--radius-lg); + background: var(--surface-secondary); + overflow: hidden; +} + +.permission-center-item-active { + border-color: var(--session-status-permission-fg); +} + +.permission-center-item-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-sm) var(--space-md); + border-bottom: 1px solid var(--border-base); + background: var(--surface-base); +} + +.permission-center-item-heading { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.permission-center-item-kind { + font-size: var(--font-size-xs); + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--text-secondary); + font-weight: var(--font-weight-semibold); +} + +.permission-center-item-chip { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); + padding: 0.1rem 0.4rem; + border-radius: 9999px; + border: 1px solid var(--session-status-permission-fg); + background: var(--session-status-permission-bg); + color: var(--session-status-permission-fg); +} + +.permission-center-item-actions { + display: inline-flex; + align-items: center; + gap: var(--space-sm); +} + +.permission-center-item-action { + padding: 0.25rem 0.5rem; + border-radius: var(--radius-sm); + border: 1px solid var(--border-base); + background: var(--surface-secondary); + color: var(--text-primary); + font-size: var(--font-size-xs); + cursor: pointer; +} + +.permission-center-item-action:hover { + background: var(--surface-hover); +} + +.permission-center-item-action:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.permission-center-fallback { + padding: var(--space-md); +} + +.permission-center-fallback-title code { + font-family: var(--font-family-mono); + font-size: var(--font-size-sm); + color: var(--text-primary); +} + +.permission-center-fallback-hint { + margin-top: var(--space-sm); + color: var(--text-secondary); + font-size: var(--font-size-sm); +} + +/* Remove border from tool-call when inside permission items to avoid double borders */ +.permission-center-item .tool-call { + border: none; + border-radius: 0; + margin: 0; +} + +@media (max-width: 720px) { + .permission-center-modal-backdrop { + padding: 0; + } + + .permission-center-modal { + width: 100vw; + height: 100vh; + max-height: none; + border-radius: 0; + } +} \ No newline at end of file diff --git a/packages/ui/src/styles/controls.css b/packages/ui/src/styles/controls.css index e7b71479..44f02851 100644 --- a/packages/ui/src/styles/controls.css +++ b/packages/ui/src/styles/controls.css @@ -6,3 +6,4 @@ @import "./components/env-vars.css"; @import "./components/directory-browser.css"; @import "./components/remote-access.css"; +@import "./components/permission-notification.css"; diff --git a/packages/ui/src/styles/messaging/message-timeline.css b/packages/ui/src/styles/messaging/message-timeline.css index a639a9e5..4d8fda6a 100644 --- a/packages/ui/src/styles/messaging/message-timeline.css +++ b/packages/ui/src/styles/messaging/message-timeline.css @@ -146,6 +146,30 @@ background-color: var(--surface-secondary); } +.message-timeline-segment.message-timeline-segment-permission { + border-color: var(--session-status-permission-fg); + background-color: var(--session-status-permission-bg); + color: var(--session-status-permission-fg); +} + +.message-timeline-segment.message-timeline-segment-permission:hover, +.message-timeline-segment.message-timeline-segment-permission:focus-visible { + background-color: var(--session-status-permission-bg); + color: var(--session-status-permission-fg); + border-color: var(--session-status-permission-fg); + transform: translateY(-1px); +} + +.message-timeline-segment-active.message-timeline-segment-permission, +.message-timeline-segment-active.message-timeline-segment-permission:hover, +.message-timeline-segment-active.message-timeline-segment-permission:focus-visible { + background-color: var(--session-status-permission-bg) !important; + border-color: var(--session-status-permission-fg) !important; + color: var(--session-status-permission-fg) !important; + transform: none; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); +} + .message-timeline-compaction-auto { border-color: var(--session-status-compacting-fg); background-color: var(--surface-secondary); diff --git a/packages/ui/src/styles/panels.css b/packages/ui/src/styles/panels.css index 96dc0553..ba5f494e 100644 --- a/packages/ui/src/styles/panels.css +++ b/packages/ui/src/styles/panels.css @@ -483,214 +483,3 @@ background-color: var(--surface-secondary); } -/* Session view utility */ -.session-view { - @apply flex flex-1 min-h-0 flex-col; - background-color: var(--surface-base); - color: inherit; - overflow: hidden; -} - -/* Session list component */ -.session-list-container { - @apply flex flex-col flex-1 min-h-0 relative; - background-color: var(--surface-secondary); - min-width: 200px; - max-width: 500px; -} - -.session-sidebar { - @apply flex flex-col min-h-0; - background-color: var(--surface-secondary); -} - -.session-sidebar-header { - @apply flex flex-col gap-2 w-full; -} - -.session-sidebar-title { - color: var(--text-primary); -} - -.session-sidebar-shortcuts { - @apply flex flex-col gap-1; -} - -.session-sidebar-new { - @apply w-full; -} - -.session-sidebar-controls { - @apply flex flex-col gap-3; - background-color: var(--surface-secondary); -} - -.session-sidebar-controls > * { - @apply w-full; -} - -.session-sidebar-separator { - background-color: var(--border-base); - height: 1px; - width: 100%; -} - -.session-resize-handle { - @apply absolute top-0 w-1 h-full cursor-col-resize bg-transparent transition-colors; - z-index: 10; -} - -.session-resize-handle--left { - right: 0; -} - -.session-resize-handle--right { - left: 0; -} - -.session-resize-handle:hover { - background-color: var(--accent-primary); -} - -.session-resize-handle::before { - content: ""; - @apply absolute top-0 h-full w-2; -} - -.session-resize-handle--left::before { - right: 0; - transform: translateX(50%); -} - -.session-resize-handle--right::before { - left: 0; - transform: translateX(-50%); -} - -.session-list-header { - @apply border-b relative; - border-color: var(--border-base); -} - -.session-list-header h3 { - color: var(--text-primary); - font-size: var(--font-size-sm); - font-weight: var(--font-weight-semibold); -} - -.session-list { - @apply flex-1; -} - -.session-list-item { - @apply border-b last:border-b-0; - border-color: var(--border-base); -} - -.session-item-base { - @apply w-full flex flex-col gap-1 px-3 py-2.5 text-left transition-colors outline-none; - font-family: var(--font-family-sans); - font-size: var(--font-size-sm); -} - -.session-item-base:focus-visible { - @apply ring-2 ring-offset-1; - ring-color: var(--accent-primary); - ring-offset-color: var(--surface-secondary); -} - -.session-item-row { - @apply flex items-center gap-2 w-full; -} - -.session-item-header { - @apply justify-between; -} - -.session-item-title-row { - @apply flex items-center gap-2 min-w-0 flex-1; -} - -.session-item-meta { - @apply justify-between items-center; - font-size: var(--font-size-xs); - color: var(--text-secondary); - margin-top: 0.125rem; -} - -.session-item-active .session-item-meta { - color: var(--text-secondary); - opacity: 1; -} - -.session-item-actions { - @apply flex items-center gap-1; -} - -.session-item-active { - background-color: var(--list-item-highlight-bg); - color: var(--text-primary); - font-weight: var(--font-weight-medium); - box-shadow: inset 0 0 0 1px var(--list-item-highlight-border); -} - -.session-item-inactive { - color: var(--text-secondary); -} - -.session-item-inactive:hover { - background-color: var(--surface-hover); - color: var(--text-primary); -} - -.session-item-active .session-item-close:hover { - background-color: var(--surface-hover); - color: var(--text-primary); -} - -.session-item-title { - @apply flex-1 min-w-0; - font-weight: inherit; -} - -.session-item-close { - @apply flex-shrink-0 p-0.5 rounded transition-all; -} - -.session-item-close:focus-visible { - @apply ring-2 ring-offset-1; - ring-color: var(--accent-primary); - ring-offset-color: inherit; -} - -.session-list-footer { - @apply border-t; - border-color: var(--border-base); -} - -.session-new-button { - background-color: var(--surface-base); - color: var(--text-primary); - border: 1px solid var(--border-base); -} - -.session-new-button:hover { - background-color: var(--surface-hover); -} - -.session-new-button:focus-visible { - @apply ring-2 ring-offset-1; - ring-color: var(--accent-primary); - ring-offset-color: var(--surface-secondary); -} - -/* Responsive behavior for session list */ -@media (max-width: 768px) { - .session-list-container { - min-width: 200px; - } - - .session-item-base { - @apply px-2 py-2; - } -} diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css index 3db68f19..3273b0ed 100644 --- a/packages/ui/src/styles/panels/session-layout.css +++ b/packages/ui/src/styles/panels/session-layout.css @@ -206,6 +206,58 @@ session-sidebar-controls .selector-trigger-primary { font-size: var(--font-size-sm); } + +.session-item-base.session-item-child { + padding-left: 2.25rem; + position: relative; +} + +.session-item-base.session-item-child::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 1.125rem; + width: 1px; + background-color: var(--text-secondary); + opacity: 0.95; + pointer-events: none; +} + +.session-item-base.session-item-child.session-item-child-last::before { + bottom: 50%; +} + +.session-item-base.session-item-child::after { + content: ""; + position: absolute; + top: 50%; + left: 1.125rem; + width: 0.875rem; + height: 1px; + background-color: var(--text-secondary); + opacity: 0.95; + transform: translateY(-0.5px); + pointer-events: none; +} + +.session-item-base.session-item-border-user { + border-left: 4px solid var(--message-user-border); +} + +.session-item-base.session-item-border-assistant { + border-left: 4px solid var(--message-assistant-border); +} + +.session-item-expander { + @apply flex-shrink-0 p-0.5 rounded transition-colors; +} + +.session-item-expander--spacer { + width: calc(0.875rem + 0.25rem); + height: calc(0.875rem + 0.25rem); +} + .session-item-base:focus-visible { @apply ring-2 ring-offset-1; ring-color: var(--accent-primary); @@ -221,7 +273,7 @@ session-sidebar-controls .selector-trigger-primary { } .session-item-title-row { - @apply flex items-center gap-2 min-w-0 flex-1; + @apply flex items-start gap-2 min-w-0 flex-1; } .session-item-meta { @@ -247,6 +299,16 @@ session-sidebar-controls .selector-trigger-primary { box-shadow: inset 0 0 0 1px var(--list-item-highlight-border); } +.session-item-base.session-item-kind-user.session-item-active { + background-color: var(--session-user-active-bg); +} + +.session-item-base.session-item-kind-assistant.session-item-active { + background-color: var(--session-assistant-active-bg); +} + + + .session-item-inactive { color: var(--text-secondary); } @@ -256,6 +318,8 @@ session-sidebar-controls .selector-trigger-primary { color: var(--text-primary); } + + .session-item-active .session-item-close:hover { background-color: var(--surface-hover); color: var(--text-primary); @@ -266,6 +330,14 @@ session-sidebar-controls .selector-trigger-primary { font-weight: inherit; } +.session-item-title--clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + word-break: break-word; +} + .session-item-close { @apply flex-shrink-0 p-0.5 rounded transition-all; } diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css index c4b85b6f..95c5d768 100644 --- a/packages/ui/src/styles/tokens.css +++ b/packages/ui/src/styles/tokens.css @@ -35,6 +35,10 @@ --message-tool-bg: #f8f9fa; --message-tool-border: #6c757d; + /* Session list selection tints */ + --session-user-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-user-border)); + --session-assistant-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-assistant-border)); + /* Semantic component colors */ --session-status-working-fg: #b45309; --session-status-working-bg: rgba(245, 158, 11, 0.16);