salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve session sidebar UX and tool rendering

Browse Source
This commit is contained in:
Shantur Rathore
2025-11-07 22:53:45 +00:00
parent 5483932196
commit 4b2cb9d212
9 changed files with 419 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/App.tsx
View File

@@ -42,6 +42,7 @@ import {
setActiveParentSession,
clearActiveParentSession,
createSession,
forkSession,
deleteSession,
getSessionFamily,
activeParentSessionId,
@@ -53,6 +54,7 @@ import {
updateSessionModel,
agents,
isSessionBusy,
getSessionInfo,
} from "./stores/sessions"
import { setupTabKeyboardShortcuts } from "./lib/keyboard"
import { isOpen as isCommandPaletteOpen, showCommandPalette, hideCommandPalette } from "./stores/command-palette"
@@ -61,6 +63,7 @@ import { registerInputShortcuts } from "./lib/shortcuts/input"
import { registerAgentShortcuts } from "./lib/shortcuts/agent"
import { registerEscapeShortcut, setEscapeStateChangeHandler } from "./lib/shortcuts/escape"
import { keyboardRegistry } from "./lib/keyboard-registry"
import type { KeyboardShortcut } from "./lib/keyboard-registry"
const SessionView: Component<{
sessionId: string
@@ -81,8 +84,27 @@ const SessionView: Component<{
async function handleSendMessage(prompt: string, attachments: Attachment[]) {
await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
}
function getUserMessageText(messageId: string): string | null {
const currentSession = session()
if (!currentSession) return null
const targetMessage = currentSession.messages.find((m) => m.id === messageId)
const targetInfo = currentSession.messagesInfo.get(messageId)
if (!targetMessage || targetInfo?.role !== "user") {
return null
}
const textParts = targetMessage.parts.filter((p: any) => p.type === "text")
if (textParts.length === 0) {
return null
}
return textParts.map((p: any) => p.text).join("\n")
}
async function handleRevert(messageId: string) {
const instance = instances().get(props.instanceId)
if (!instance || !instance.client) return
@@ -94,25 +116,17 @@ const SessionView: Component<{
body: { messageID: messageId },
})
// Restore the message to input
const currentSession = session()
if (currentSession) {
const revertedMessage = currentSession.messages.find((m) => m.id === messageId)
const revertedInfo = currentSession.messagesInfo.get(messageId)
if (revertedMessage && revertedInfo?.role === "user") {
const textParts = revertedMessage.parts.filter((p: any) => p.type === "text")
if (textParts.length > 0) {
const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
if (textarea) {
textarea.value = textParts.map((p: any) => p.text).join("\n")
textarea.dispatchEvent(new Event("input", { bubbles: true }))
textarea.focus()
}
}
const restoredText = getUserMessageText(messageId)
if (restoredText) {
const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
if (textarea) {
textarea.value = restoredText
textarea.dispatchEvent(new Event("input", { bubbles: true }))
textarea.focus()
}
}
console.log("Reverted to message - UI will update via SSE")
} catch (error) {
console.error("Failed to revert:", error)
@@ -120,6 +134,40 @@ const SessionView: Component<{
}
}
async function handleFork(messageId?: string) {
if (!messageId) {
console.warn("Fork requires a user message id")
return
}
const restoredText = getUserMessageText(messageId)
try {
const forkedSession = await forkSession(props.instanceId, props.sessionId, { messageId })
const parentToActivate = forkedSession.parentId ?? forkedSession.id
setActiveParentSession(props.instanceId, parentToActivate)
if (forkedSession.parentId) {
setActiveSession(props.instanceId, forkedSession.id)
}
await loadMessages(props.instanceId, forkedSession.id).catch(console.error)
if (restoredText) {
const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
if (textarea) {
textarea.value = restoredText
textarea.dispatchEvent(new Event("input", { bubbles: true }))
textarea.focus()
}
}
} catch (error) {
console.error("Failed to fork session:", error)
alert("Failed to fork session")
}
}
return (
<Show
when={session()}
@@ -138,6 +186,7 @@ const SessionView: Component<{
messagesInfo={s().messagesInfo}
revert={s().revert}
onRevert={handleRevert}
onFork={handleFork}
/>
<PromptInput
instanceId={props.instanceId}
@@ -152,6 +201,71 @@ const SessionView: Component<{
)
}
const formatTokenTotal = (value: number) => {
if (value >= 1_000_000) {
return `${(value / 1_000_000).toFixed(1)}M`
}
if (value >= 1_000) {
return `${(value / 1_000).toFixed(0)}K`
}
return value.toLocaleString()
}
const ContextUsagePanel: Component<{ instanceId: string; sessionId: string }> = (props) => {
const info = createMemo(
() =>
getSessionInfo(props.instanceId, props.sessionId) ?? {
tokens: 0,
cost: 0,
contextWindow: 0,
isSubscriptionModel: false,
},
)
const tokens = createMemo(() => info().tokens)
const contextWindow = createMemo(() => info().contextWindow)
const percentage = createMemo(() => {
const windowSize = contextWindow()
if (!windowSize || windowSize <= 0) return null
const percent = Math.round((tokens() / windowSize) * 100)
return Math.min(100, Math.max(0, percent))
})
const costLabel = createMemo(() => {
if (info().isSubscriptionModel || info().cost <= 0) return "Included in plan"
return `$${info().cost.toFixed(2)} spent`
})
return (
<div class="session-context-panel border-r border-base border-b px-3 py-3">
<div class="flex items-center justify-between gap-4">
<div>
<div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Tokens (last call)</div>
<div class="text-lg font-semibold text-primary">{formatTokenTotal(tokens())}</div>
</div>
<div class="text-xs text-primary/70 text-right leading-tight">{costLabel()}</div>
</div>
<div class="mt-4">
<div class="flex items-center justify-between mb-1">
<div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Context window usage</div>
<div class="text-sm font-medium text-primary">{percentage() !== null ? `${percentage()}%` : "--"}</div>
</div>
<div class="text-sm text-primary/90">
{contextWindow()
? `${formatTokenTotal(tokens())} of ${formatTokenTotal(contextWindow())}`
: "Window size unavailable"}
</div>
</div>
<div class="mt-3 h-1.5 rounded-full bg-base relative overflow-hidden">
<div
class="absolute inset-y-0 left-0 rounded-full bg-accent-primary transition-[width]"
style={{ width: percentage() === null ? "0%" : `${percentage()}%` }}
/>
</div>
</div>
)
}
const App: Component = () => {
const { isDark } = useTheme()
const commandRegistry = createCommandRegistry()
@@ -356,10 +470,10 @@ const App: Component = () => {
commandRegistry.register({
id: "switch-to-info",
label: "Switch to Info",
description: "Jump to info view for current instance",
category: "Session",
keywords: ["info", "info", "console", "output"],
label: "Instance Info",
description: "Open the instance overview for logs and status",
category: "Instance",
keywords: ["info", "logs", "console", "output"],
shortcut: { key: "L", meta: true, shift: true },
action: () => {
const instance = activeInstance()
@@ -826,59 +940,55 @@ const App: Component = () => {
class="session-sidebar flex flex-col bg-surface-secondary"
style={{ width: `${sessionSidebarWidth()}px` }}
>
<SessionList
instanceId={instance().id}
sessions={activeSessions()}
activeSessionId={activeSessionIdForInstance()}
onSelect={(id) => setActiveSession(instance().id, id)}
onClose={(id) => handleCloseSession(instance().id, id)}
onNew={() => handleNewSession(instance().id)}
showHeader
showFooter={false}
headerContent={
<div class="session-sidebar-header">
<span class="session-sidebar-title text-sm font-semibold text-primary">Sessions</span>
<div class="session-sidebar-shortcuts">
{(() => {
const shortcut = keyboardRegistry.get("session-prev")
return shortcut ? <KeyboardHint shortcuts={[shortcut]} separator="" /> : null
})()}
{(() => {
const shortcut = keyboardRegistry.get("session-next")
return shortcut ? <KeyboardHint shortcuts={[shortcut]} separator="" /> : null
})()}
</div>
<button
class="session-sidebar-new inline-flex items-center justify-center gap-1.5 rounded-md border border-base px-3 py-2 text-xs font-semibold transition-colors hover:border-accent-primary hover:text-accent-primary"
onClick={() => handleNewSession(instance().id)}
type="button"
aria-label="Create new session"
title="New session (Cmd/Ctrl+Shift+N)"
>
<span class="leading-none">New Session</span>
</button>
</div>
}
<SessionList
instanceId={instance().id}
sessions={activeSessions()}
activeSessionId={activeSessionIdForInstance()}
onSelect={(id) => setActiveSession(instance().id, id)}
onClose={(id) => handleCloseSession(instance().id, id)}
onNew={() => handleNewSession(instance().id)}
showHeader
showFooter={false}
headerContent={
<div class="session-sidebar-header">
<span class="session-sidebar-title text-sm font-semibold uppercase text-primary">Sessions</span>
<div class="session-sidebar-shortcuts">
{(() => {
const shortcuts = [
keyboardRegistry.get("session-prev"),
keyboardRegistry.get("session-next"),
].filter((shortcut): shortcut is KeyboardShortcut => Boolean(shortcut))
return shortcuts.length ? (
<KeyboardHint shortcuts={shortcuts} separator=" " showDescription={false} />
) : null
})()}
</div>
</div>
}
onWidthChange={setSessionSidebarWidth}
/>
onWidthChange={setSessionSidebarWidth}
/>
<div class="session-sidebar-separator border-t border-base" />
<Show when={activeSessionForInstance()}>
{(activeSession) => (
<div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
<AgentSelector
instanceId={instance().id}
sessionId={activeSession().id}
currentAgent={activeSession().agent}
onAgentChange={handleSidebarAgentChange}
/>
<ModelSelector
instanceId={instance().id}
sessionId={activeSession().id}
currentModel={activeSession().model}
onModelChange={handleSidebarModelChange}
/>
</div>
<>
<ContextUsagePanel instanceId={instance().id} sessionId={activeSession().id} />
<div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
<AgentSelector
instanceId={instance().id}
sessionId={activeSession().id}
currentAgent={activeSession().agent}
onAgentChange={handleSidebarAgentChange}
/>
<ModelSelector
instanceId={instance().id}
sessionId={activeSession().id}
currentModel={activeSession().model}
onModelChange={handleSidebarModelChange}
/>
</div>
</>
)}
</Show>
</div>

3
src/components/command-palette.tsx
View File

@@ -104,7 +104,8 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
setSelectedIndex((i) => Math.min(i + 1, filtered.length - 1))
} else if (e.key === "ArrowUp") {
e.preventDefault()
setSelectedIndex((i) => Math.max(i - 1, 0))
if (filtered.length === 0) return
setSelectedIndex((i) => (i <= 0 ? filtered.length - 1 : i - 1))
} else if (e.key === "Enter") {
e.preventDefault()
const selected = filtered[selectedIndex()]

3
src/components/keyboard-hint.tsx
View File

@@ -7,6 +7,7 @@ import HintRow from "./hint-row"
const KeyboardHint: Component<{
shortcuts: KeyboardShortcut[]
separator?: string
showDescription?: boolean
}> = (props) => {
function buildShortcutString(shortcut: KeyboardShortcut): string {
const parts: string[] = []
@@ -31,7 +32,7 @@ const KeyboardHint: Component<{
{(shortcut, i) => (
<>
{i() > 0 && <span class="mx-1">{props.separator || "•"}</span>}
<span class="mr-1">{shortcut.description}</span>
{props.showDescription !== false && <span class="mr-1">{shortcut.description}</span>}
<Kbd shortcut={buildShortcutString(shortcut)} />
</>
)}

15
src/components/message-item.tsx
View File

@@ -10,6 +10,7 @@ interface MessageItemProps {
isQueued?: boolean
parts?: any[]
onRevert?: (messageId: string) => void
onFork?: (messageId?: string) => void
}
export default function MessageItem(props: MessageItemProps) {
@@ -73,12 +74,22 @@ export default function MessageItem(props: MessageItemProps) {
<span class="text-[11px] text-[var(--text-muted)]">{timestamp()}</span>
<Show when={isUser() && props.onRevert}>
<button
class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-2 py-0.5 rounded text-sm leading-none transition-all duration-200 flex items-center justify-center min-w-7 h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
onClick={handleRevert}
title="Revert to this message"
aria-label="Revert to this message"
>
↶
Revert to
</button>
</Show>
<Show when={isUser() && props.onFork}>
<button
class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
onClick={() => props.onFork?.(props.message.id)}
title="Fork from this message"
aria-label="Fork from this message"
>
Fork
</button>
</Show>
</div>

22
src/components/message-stream.tsx
View File

@@ -89,24 +89,17 @@ function formatTokens(tokens: number): string {
return tokens.toString()
}
// Format session info like TUI (e.g., "110K/73% ($0.42)" or "110K/73%")
function formatSessionInfo(tokens: number, cost: number, contextWindow: number, isSubscriptionModel: boolean): string {
// Format session info for the session view header
function formatSessionInfo(tokens: number, _cost: number, contextWindow: number, _isSubscriptionModel: boolean): string {
const tokensStr = formatTokens(tokens)
// Calculate percentage if we have context window
if (contextWindow > 0) {
const percentage = Math.round((tokens / contextWindow) * 100)
if (isSubscriptionModel) {
return `${tokensStr}/${percentage}%`
}
return `${tokensStr}/${percentage}% ($${cost.toFixed(2)})`
const windowStr = formatTokens(contextWindow)
const percentage = Math.min(100, Math.max(0, Math.round((tokens / contextWindow) * 100)))
return `${tokensStr} of ${windowStr} (${percentage}%)`
}
// Fallback without context window
if (isSubscriptionModel) {
return tokensStr
}
return `${tokensStr} ($${cost.toFixed(2)})`
return tokensStr
}
interface MessageStreamProps {
@@ -122,6 +115,7 @@ interface MessageStreamProps {
}
loading?: boolean
onRevert?: (messageId: string) => void
onFork?: (messageId?: string) => void
}
interface MessageDisplayItem {
@@ -609,7 +603,9 @@ export default function MessageStream(props: MessageStreamProps) {
isQueued={item.isQueued}
parts={item.combinedParts}
onRevert={props.onRevert}
onFork={props.onFork}
/>
)
}

128
src/components/session-list.tsx
View File

@@ -1,8 +1,10 @@
import { Component, For, Show, createSignal, createEffect, onCleanup, onMount, createMemo, JSX } from "solid-js"
import type { Session } from "../types/session"
import { MessageSquare, Info, Plus, X } from "lucide-solid"
import { MessageSquare, Info, X } from "lucide-solid"
import KeyboardHint from "./keyboard-hint"
import Kbd from "./kbd"
import { keyboardRegistry } from "../lib/keyboard-registry"
import { formatShortcut } from "../lib/keyboard-utils"
interface SessionListProps {
instanceId: string
@@ -46,6 +48,7 @@ const SessionList: Component<SessionListProps> = (props) => {
const [isResizing, setIsResizing] = createSignal(false)
const [startX, setStartX] = createSignal(0)
const [startWidth, setStartWidth] = createSignal(DEFAULT_WIDTH)
const infoShortcut = keyboardRegistry.get("switch-to-info")
let mouseMoveHandler: ((event: MouseEvent) => void) | null = null
let mouseUpHandler: (() => void) | null = null
@@ -159,7 +162,7 @@ const SessionList: Component<SessionListProps> = (props) => {
removeTouchListeners()
})
const parentSessionIds = createMemo(
const userSessionIds = createMemo(
() => {
const ids: string[] = []
for (const session of props.sessions.values()) {
@@ -167,7 +170,6 @@ const SessionList: Component<SessionListProps> = (props) => {
ids.push(session.id)
}
}
ids.push("info")
return ids
},
undefined,
@@ -219,67 +221,73 @@ const SessionList: Component<SessionListProps> = (props) => {
</Show>
<div class="session-list flex-1 overflow-y-auto">
<div class="session-section">
<div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
User Session & Info
<div class="session-section">
<div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
Instance
</div>
<div class="session-list-item group">
<button
class={`session-item-base ${props.activeSessionId === "info" ? "session-item-active" : "session-item-inactive"}`}
onClick={() => props.onSelect("info")}
title="Instance Info"
role="button"
aria-selected={props.activeSessionId === "info"}
>
<div class="flex items-center gap-2 flex-1">
<Info class="w-4 h-4 flex-shrink-0" />
<span class="session-item-title truncate">Instance Info</span>
</div>
{infoShortcut && <Kbd shortcut={formatShortcut(infoShortcut)} class="ml-2 not-italic" />}
</button>
</div>
</div>
<For each={parentSessionIds()}>
{(id) => {
if (id === "info") {
const isActive = () => props.activeSessionId === "info"
<Show when={userSessionIds().length > 0}>
<div class="session-section">
<div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
User Sessions
</div>
<For each={userSessionIds()}>
{(id) => {
const session = () => props.sessions.get(id)
if (!session()) {
return null
}
const isActive = () => props.activeSessionId === id
const title = () => session()?.title || "Untitled"
return (
<div class="session-list-item group">
<button
class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"} session-item-special`}
onClick={() => props.onSelect("info")}
title="Info"
class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"}`}
onClick={() => props.onSelect(id)}
title={title()}
role="button"
aria-selected={isActive()}
>
<Info class="w-4 h-4 flex-shrink-0" />
<span class="session-item-title truncate">Info</span>
<MessageSquare class="w-4 h-4 flex-shrink-0" />
<span class="session-item-title truncate">{title()}</span>
<span
class="session-item-close opacity-0 group-hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
onClick={(event) => {
event.stopPropagation()
props.onClose(id)
}}
role="button"
tabIndex={0}
aria-label="Close session"
>
<X class="w-3 h-3" />
</span>
</button>
</div>
)
}
const session = () => props.sessions.get(id)
if (!session()) {
return null
}
const isActive = () => props.activeSessionId === id
const title = () => session()?.title || "Untitled"
return (
<div class="session-list-item group">
<button
class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"}`}
onClick={() => props.onSelect(id)}
title={title()}
role="button"
aria-selected={isActive()}
>
<MessageSquare class="w-4 h-4 flex-shrink-0" />
<span class="session-item-title truncate">{title()}</span>
<span
class="session-item-close opacity-0 group-hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
onClick={(event) => {
event.stopPropagation()
props.onClose(id)
}}
role="button"
tabIndex={0}
aria-label="Close session"
>
<X class="w-3 h-3" />
</span>
</button>
</div>
)
}}
</For>
</div>
}}
</For>
</div>
</Show>
<Show when={childSessionIds().length > 0}>
<div class="session-section">
@@ -318,17 +326,7 @@ const SessionList: Component<SessionListProps> = (props) => {
<Show when={props.showFooter !== false}>
<div class="session-list-footer p-3 border-t border-base">
{props.footerContent ?? (
<button
class="session-new-button w-full flex items-center gap-2 px-3 py-2 rounded-md transition-colors text-sm font-medium"
onClick={props.onNew}
title="New session (Cmd/Ctrl+T)"
aria-label="New session"
>
<Plus class="w-4 h-4" />
<span>New Session</span>
</button>
)}
{props.footerContent ?? null}
</div>
</Show>
</div>

110
src/components/tool-call.tsx
View File

@@ -136,12 +136,29 @@ export default function ToolCall(props: ToolCallProps) {
const expanded = () => isToolCallExpanded(toolCallId())
const [initializedId, setInitializedId] = createSignal<string | null>(null)
let markdownContainerRef: HTMLDivElement | undefined
let scrollContainerRef: HTMLDivElement | undefined
const handleMarkdownRendered = () => {
const handleScrollRendered = () => {
const id = toolCallId()
if (!id || !markdownContainerRef) return
restoreScrollState(id, markdownContainerRef)
if (!id || !scrollContainerRef) return
restoreScrollState(id, scrollContainerRef)
}
const initializeScrollContainer = (element: HTMLDivElement | null | undefined) => {
const resolvedElement = element || undefined
scrollContainerRef = resolvedElement
const id = toolCallId()
if (!resolvedElement || !id) return
if (!toolScrollState.has(id)) {
requestAnimationFrame(() => {
if (!scrollContainerRef || toolCallId() !== id) return
scrollContainerRef.scrollTop = scrollContainerRef.scrollHeight
updateScrollState(id, scrollContainerRef)
})
} else {
restoreScrollState(id, resolvedElement)
}
}
createEffect(() => {
@@ -165,6 +182,15 @@ export default function ToolCall(props: ToolCallProps) {
})
})
createEffect(() => {
if (props.toolCall?.tool !== "task") return
const summarySignature = JSON.stringify(props.toolCall?.state?.metadata?.summary ?? [])
requestAnimationFrame(() => {
void summarySignature
handleScrollRendered()
})
})
const statusIcon = () => {
const status = props.toolCall?.state?.status || ""
switch (status) {
@@ -348,28 +374,14 @@ export default function ToolCall(props: ToolCallProps) {
return (
<div
class={messageClass}
ref={(element) => {
markdownContainerRef = element || undefined
const id = toolCallId()
if (!element || !id) return
if (!toolScrollState.has(id)) {
requestAnimationFrame(() => {
if (!markdownContainerRef || toolCallId() !== id) return
markdownContainerRef.scrollTop = markdownContainerRef.scrollHeight
updateScrollState(id, markdownContainerRef)
})
} else {
restoreScrollState(id, element)
}
}}
ref={(element) => initializeScrollContainer(element)}
onScroll={(event) => updateScrollState(toolCallId(), event.currentTarget)}
>
<Markdown
part={markdownPart}
isDark={isDark()}
disableHighlight={disableHighlight}
onRendered={handleMarkdownRendered}
onRendered={handleScrollRendered}
/>
</div>
)
@@ -537,34 +549,40 @@ export default function ToolCall(props: ToolCallProps) {
}
return (
<div class="tool-call-task-summary">
<For each={summary}>
{(item) => {
const tool = item.tool || "unknown"
const itemInput = item.state?.input || {}
const icon = getToolIcon(tool)
<div
class="message-text tool-call-markdown tool-call-markdown-large tool-call-task-container"
ref={(element) => initializeScrollContainer(element)}
onScroll={(event) => updateScrollState(toolCallId(), event.currentTarget)}
>
<div class="tool-call-task-summary">
<For each={summary}>
{(item) => {
const tool = item.tool || "unknown"
const itemInput = item.state?.input || {}
const icon = getToolIcon(tool)
let description = ""
switch (tool) {
case "bash":
description = itemInput.description || itemInput.command || ""
break
case "edit":
case "read":
case "write":
description = `${tool} ${getRelativePath(itemInput.filePath || "")}`
break
default:
description = tool
}
let description = ""
switch (tool) {
case "bash":
description = itemInput.description || itemInput.command || ""
break
case "edit":
case "read":
case "write":
description = `${tool} ${getRelativePath(itemInput.filePath || "")}`
break
default:
description = tool
}
return (
<div class="tool-call-task-item">
{icon} {description}
</div>
)
}}
</For>
return (
<div class="tool-call-task-item">
{icon} {description}
</div>
)
}}
</For>
</div>
</div>
)
}

82
src/stores/sessions.ts
View File

@@ -581,6 +581,87 @@ async function createSession(instanceId: string, agent?: string): Promise<Sessio
}
}
async function forkSession(
instanceId: string,
sourceSessionId: string,
options?: { messageId?: string },
): Promise<Session> {
const instance = instances().get(instanceId)
if (!instance || !instance.client) {
throw new Error("Instance not ready")
}
const request: {
path: { id: string }
body?: { messageID: string }
} = {
path: { id: sourceSessionId },
}
if (options?.messageId) {
request.body = { messageID: options.messageId }
}
const response = await instance.client.session.fork(request)
if (!response.data) {
throw new Error("Failed to fork session: No data returned")
}
const info = response.data
const forkedSession: Session = {
id: info.id,
instanceId,
title: info.title || "Forked Session",
parentId: info.parentID || null,
agent: info.agent || "",
model: {
providerId: info.model?.providerID || "",
modelId: info.model?.modelID || "",
},
time: {
created: info.time?.created || Date.now(),
updated: info.time?.updated || Date.now(),
},
revert: info.revert
? {
messageID: info.revert.messageID,
partID: info.revert.partID,
snapshot: info.revert.snapshot,
diff: info.revert.diff,
}
: undefined,
messages: [],
messagesInfo: new Map(),
}
setSessions((prev) => {
const next = new Map(prev)
const instanceSessions = next.get(instanceId) || new Map()
instanceSessions.set(forkedSession.id, forkedSession)
next.set(instanceId, instanceSessions)
return next
})
setSessionInfoByInstance((prev) => {
const next = new Map(prev)
const instanceInfo = new Map(prev.get(instanceId))
instanceInfo.set(forkedSession.id, {
tokens: 0,
cost: 0,
contextWindow: 0,
isSubscriptionModel: false,
})
next.set(instanceId, instanceInfo)
return next
})
getSessionIndex(instanceId, forkedSession.id)
return forkedSession
}
async function deleteSession(instanceId: string, sessionId: string): Promise<void> {
const instance = instances().get(instanceId)
if (!instance || !instance.client) {
@@ -1614,6 +1695,7 @@ export {
getSessionInfo,
fetchSessions,
createSession,
forkSession,
deleteSession,
fetchAgents,
fetchProviders,

9
src/styles/components.css
View File

@@ -907,6 +907,10 @@ button.button-primary {
background-color: rgba(0, 128, 255, 0.22);
}
.tool-call-task-container {
padding: 12px;
}
.tool-call-task-summary {
@apply my-2 flex flex-col gap-1.5;
}
@@ -1825,11 +1829,6 @@ button.button-primary {
color: var(--text-primary);
}
.session-item-special {
color: var(--text-muted);
font-style: italic;
}
.session-item-active .session-item-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}