nikcli 0.0.6

package/src/cli/cmd/tui/routes/session/dialog-fork-from-timeline.tsx

@@ -0,0 +1,65 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@nikcli-ai/sdk/v2"
+import { Locale } from "@/util/locale"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import { useDialog } from "../../ui/dialog"
+import type { PromptInfo } from "@tui/component/prompt/history"
+
+export function DialogForkFromTimeline(props: { sessionID: string; onMove: (messageID: string) => void }) {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const route = useRoute()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const result = [] as DialogSelectOption<string>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find(
+        (x) => x.type === "text" && !x.synthetic && !x.ignored,
+      ) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: async (dialog) => {
+          const forked = await sdk.client.session.fork({
+            sessionID: props.sessionID,
+            messageID: message.id,
+          })
+          const parts = sync.data.part[message.id] ?? []
+          const initialPrompt = parts.reduce(
+            (agg, part) => {
+              if (part.type === "text") {
+                if (!part.synthetic) agg.input += part.text
+              }
+              if (part.type === "file") agg.parts.push(part)
+              return agg
+            },
+            { input: "", parts: [] as PromptInfo["parts"] },
+          )
+          route.navigate({
+            sessionID: forked.data!.id,
+            type: "session",
+            initialPrompt,
+            workspaceID: forked.data!.workspaceID,
+          })
+          dialog.clear()
+        },
+      })
+    }
+    result.reverse()
+    return result
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Fork from message" options={options()} />
+}

package/src/cli/cmd/tui/routes/session/dialog-message.tsx

@@ -0,0 +1,110 @@
+import { createMemo } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import { Clipboard } from "@tui/util/clipboard"
+import type { PromptInfo } from "@tui/component/prompt/history"
+
+export function DialogMessage(props: {
+  messageID: string
+  sessionID: string
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
+  const sync = useSync()
+  const sdk = useSDK()
+  const message = createMemo(() => sync.data.message[props.sessionID]?.find((x) => x.id === props.messageID))
+  const route = useRoute()
+
+  return (
+    <DialogSelect
+      title="Message Actions"
+      options={[
+        {
+          title: "Revert",
+          value: "session.revert",
+          description: "undo messages and file changes",
+          onSelect: (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            sdk.client.session.revert({
+              sessionID: props.sessionID,
+              messageID: msg.id,
+            })
+
+            if (props.setPrompt) {
+              const parts = sync.data.part[msg.id]
+              const promptInfo = parts.reduce(
+                (agg, part) => {
+                  if (part.type === "text") {
+                    if (!part.synthetic) agg.input += part.text
+                  }
+                  if (part.type === "file") agg.parts.push(part)
+                  return agg
+                },
+                { input: "", parts: [] as PromptInfo["parts"] },
+              )
+              props.setPrompt(promptInfo)
+            }
+
+            dialog.clear()
+          },
+        },
+        {
+          title: "Copy",
+          value: "message.copy",
+          description: "message text to clipboard",
+          onSelect: async (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            const parts = sync.data.part[msg.id]
+            const text = parts.reduce((agg, part) => {
+              if (part.type === "text" && !part.synthetic) {
+                agg += part.text
+              }
+              return agg
+            }, "")
+
+            await Clipboard.copy(text)
+            dialog.clear()
+          },
+        },
+        {
+          title: "Fork",
+          value: "session.fork",
+          description: "create a new session",
+          onSelect: async (dialog) => {
+            const result = await sdk.client.session.fork({
+              sessionID: props.sessionID,
+              messageID: props.messageID,
+            })
+            const initialPrompt = (() => {
+              const msg = message()
+              if (!msg) return undefined
+              const parts = sync.data.part[msg.id]
+              return parts.reduce(
+                (agg, part) => {
+                  if (part.type === "text") {
+                    if (!part.synthetic) agg.input += part.text
+                  }
+                  if (part.type === "file") agg.parts.push(part)
+                  return agg
+                },
+                { input: "", parts: [] as PromptInfo["parts"] },
+              )
+            })()
+            route.navigate({
+              sessionID: result.data!.id,
+              type: "session",
+              initialPrompt,
+              workspaceID: result.data!.workspaceID,
+            })
+            dialog.clear()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/cli/cmd/tui/routes/session/dialog-subagent.tsx

@@ -0,0 +1,105 @@
+import { createMemo } from "solid-js"
+import { useRoute } from "@tui/context/route"
+import { useSync } from "@tui/context/sync"
+import { useKV } from "@tui/context/kv"
+import { useLocal } from "@tui/context/local"
+import { useSDK } from "@tui/context/sdk"
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { type DialogContext } from "@tui/ui/dialog"
+import { Keybind } from "@/util/keybind"
+import { useTheme } from "@tui/context/theme"
+
+function parseSubagentFromTitle(title: string): string | undefined {
+  const match = title.match(/\(@([^\s]+)\s+subagent\)$/)
+  return match?.[1]
+}
+
+function stripSubagentSuffix(title: string): string {
+  return title.replace(/\s*\(@[^\s]+\s+subagent\)$/, "")
+}
+
+type BackgroundSubtasksMap = Record<string, string[]>
+
+export function DialogSubagent(props: { sessionID: string }) {
+  const route = useRoute()
+  const sync = useSync()
+  const kv = useKV()
+  const local = useLocal()
+  const sdk = useSDK()
+  const dialog = useDialog()
+  const { theme } = useTheme()
+
+  const backgroundedIDs = createMemo(() => {
+    const map = (kv.get("background_subtasks", {}) ?? {}) as BackgroundSubtasksMap
+    return map[props.sessionID] ?? []
+  })
+
+  const options = createMemo(() => {
+    const sessionsByID = new Map(sync.data.session.map((s) => [s.id, s] as const))
+    const out: { title: string; value: string; description?: string; agent?: string }[] = []
+
+    for (const id of backgroundedIDs()) {
+      const session = sessionsByID.get(id)
+      if (!session) continue
+
+      const status = sync.data.session_status[id]?.type ?? "idle"
+      const agent = parseSubagentFromTitle(session.title)
+      const title = stripSubagentSuffix(session.title)
+
+      out.push({ title, value: id, description: status, agent })
+    }
+
+    out.sort((a, b) => a.title.localeCompare(b.title))
+    return out
+  })
+
+  function removeFromBackground(parentID: string, childID: string) {
+    const map = (kv.get("background_subtasks", {}) ?? {}) as BackgroundSubtasksMap
+    const list = map[parentID] ?? []
+    const next = list.filter((x) => x !== childID)
+    if (next.length === list.length) return
+    kv.set("background_subtasks", { ...map, [parentID]: next })
+  }
+
+  return (
+    <DialogSelect
+      title="Background Subtasks"
+      options={options().map((opt) => {
+        const color = opt.agent ? local.agent.color(opt.agent) : undefined
+        return {
+          title: opt.title,
+          value: opt.value,
+          description: opt.description,
+          bg: color,
+          gutter: opt.agent ? <text fg={color ?? theme.textMuted}>@{opt.agent}</text> : undefined,
+          onSelect: (ctx: DialogContext) => {
+            removeFromBackground(props.sessionID, opt.value)
+            route.navigate({
+              type: "session",
+              sessionID: opt.value,
+              workspaceID: sync.session.get(opt.value)?.workspaceID,
+            })
+            ctx.clear()
+          },
+        }
+      })}
+      keybind={[
+        {
+          keybind: Keybind.parse("k")[0],
+          title: "Kill",
+          onTrigger: (option) => {
+            sdk.client.session.abort({ sessionID: option.value }).catch(() => {})
+          },
+        },
+        {
+          keybind: Keybind.parse("escape")[0],
+          title: "Close",
+          onTrigger: () => {
+            dialog.clear()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/cli/cmd/tui/routes/session/dialog-timeline.tsx

@@ -0,0 +1,47 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@nikcli-ai/sdk/v2"
+import { Locale } from "@/util/locale"
+import { DialogMessage } from "./dialog-message"
+import { useDialog } from "../../ui/dialog"
+import type { PromptInfo } from "../../component/prompt/history"
+
+export function DialogTimeline(props: {
+  sessionID: string
+  onMove: (messageID: string) => void
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
+  const sync = useSync()
+  const dialog = useDialog()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const result = [] as DialogSelectOption<string>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find(
+        (x) => x.type === "text" && !x.synthetic && !x.ignored,
+      ) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: (dialog) => {
+          dialog.replace(() => (
+            <DialogMessage messageID={message.id} sessionID={props.sessionID} setPrompt={props.setPrompt} />
+          ))
+        },
+      })
+    }
+    result.reverse()
+    return result
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Timeline" options={options()} />
+}

package/src/cli/cmd/tui/routes/session/footer.tsx

@@ -0,0 +1,75 @@
+import { createMemo, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { useTheme } from "../../context/theme"
+import { useSync } from "../../context/sync"
+import { useDirectory } from "../../context/directory"
+import { useConnected } from "../../component/dialog-model"
+import { createStore } from "solid-js/store"
+import { useRoute } from "../../context/route"
+
+export function Footer() {
+  const { theme } = useTheme()
+  const sync = useSync()
+  const route = useRoute()
+  const mcp = createMemo(() => Object.values(sync.data.mcp).filter((x) => x.status === "connected").length)
+  const mcpError = createMemo(() => Object.values(sync.data.mcp).some((x) => x.status === "failed"))
+  const lsp = createMemo(() => Object.keys(sync.data.lsp))
+  const permissions = createMemo(() => {
+    if (route.data.type !== "session") return []
+    return sync.data.permission[route.data.sessionID] ?? []
+  })
+  const directory = useDirectory()
+  const connected = useConnected()
+
+  const [store, setStore] = createStore({
+    welcome: false,
+  })
+
+  onMount(() => {
+    const timer = setInterval(() => {
+      if (connected()) return
+      setStore("welcome", (prev) => !prev)
+    }, store.welcome ? 5000 : 10_000)
+
+    onCleanup(() => clearInterval(timer))
+  })
+
+  return (
+    <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
+      <text fg={theme.textMuted}>{directory()}</text>
+      <box gap={2} flexDirection="row" flexShrink={0}>
+        <Switch>
+          <Match when={store.welcome}>
+            <text fg={theme.text}>
+              Get started <span style={{ fg: theme.textMuted }}>/connect</span>
+            </text>
+          </Match>
+          <Match when={connected()}>
+            <Show when={permissions().length > 0}>
+              <text fg={theme.warning}>
+                <span style={{ fg: theme.warning }}>△</span> {permissions().length} Permission
+                {permissions().length > 1 ? "s" : ""}
+              </text>
+            </Show>
+            <text fg={theme.text}>
+              <span style={{ fg: lsp().length > 0 ? theme.success : theme.textMuted }}>•</span> {lsp().length} LSP
+            </text>
+            <Show when={mcp()}>
+              <text fg={theme.text}>
+                <Switch>
+                  <Match when={mcpError()}>
+                    <span style={{ fg: theme.error }}>⊙ </span>
+                  </Match>
+                  <Match when={true}>
+                    <span style={{ fg: theme.success }}>⊙ </span>
+                  </Match>
+                </Switch>
+                {mcp()} MCP
+              </text>
+            </Show>
+            <text fg={theme.textMuted}>/status</text>
+          </Match>
+        </Switch>
+      </box>
+    </box>
+  )
+}

package/src/cli/cmd/tui/routes/session/header.tsx

@@ -0,0 +1,177 @@
+import { type Accessor, createMemo, createSignal, Match, Show, Switch } from "solid-js"
+import { useRouteData } from "@tui/context/route"
+import { useSync } from "@tui/context/sync"
+import { pipe, sumBy } from "remeda"
+import { useTheme } from "@tui/context/theme"
+import { SplitBorder } from "@tui/component/border"
+import type { AssistantMessage, Session } from "@nikcli-ai/sdk/v2"
+import { useCommandDialog } from "@tui/component/dialog-command"
+import { useKeybind } from "../../context/keybind"
+import { Installation } from "@/installation"
+import { useTerminalDimensions } from "@opentui/solid"
+
+const Title = (props: { session: Accessor<Session> }) => {
+  const { theme } = useTheme()
+  return (
+    <text fg={theme.text}>
+      <span style={{ bold: true }}>#</span> <span style={{ bold: true }}>{props.session().title}</span>
+    </text>
+  )
+}
+
+const ContextInfo = (props: { context: Accessor<string | undefined>; cost: Accessor<string> }) => {
+  const { theme } = useTheme()
+  return (
+    <Show when={props.context()}>
+      <text fg={theme.textMuted} wrapMode="none" flexShrink={0}>
+        {props.context()} ({props.cost()})
+      </text>
+    </Show>
+  )
+}
+
+const WorkspaceInfo = (props: { workspace: Accessor<string | undefined> }) => {
+  const { theme } = useTheme()
+  return (
+    <Show when={props.workspace()}>
+      <text fg={theme.textMuted} wrapMode="none" flexShrink={0}>
+        {props.workspace()}
+      </text>
+    </Show>
+  )
+}
+
+export function Header() {
+  const route = useRouteData("session")
+  const sync = useSync()
+  const session = createMemo(() => sync.session.get(route.sessionID)!)
+  const messages = createMemo(() => sync.data.message[route.sessionID] ?? [])
+
+  const cost = createMemo(() => {
+    const total = pipe(
+      messages(),
+      sumBy((x) => (x.role === "assistant" ? x.cost : 0)),
+    )
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(total)
+  })
+
+  const context = createMemo(() => {
+    const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
+    if (!last) return
+    const total =
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+    const model = sync.data.provider.find((x) => x.id === last.providerID)?.models[last.modelID]
+    let result = total.toLocaleString()
+    if (model?.limit.context) {
+      result += "  " + Math.round((total / model.limit.context) * 100) + "%"
+    }
+    return result
+  })
+
+  const workspace = createMemo(() => {
+    const id = session()?.workspaceID
+    if (!id) return "Workspace local"
+    const info = sync.workspace.get(id)
+    if (!info) return `Workspace ${id}`
+    return `Workspace ${id} (${info.config.type})`
+  })
+
+  const { theme } = useTheme()
+  const keybind = useKeybind()
+  const command = useCommandDialog()
+  const [hover, setHover] = createSignal<"parent" | "prev" | "next" | "close" | null>(null)
+  const dimensions = useTerminalDimensions()
+  const narrow = createMemo(() => dimensions().width < 80)
+
+  return (
+    <box flexShrink={0}>
+      <box
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={1}
+        {...SplitBorder}
+        border={["left"]}
+        borderColor={theme.border}
+        flexShrink={0}
+        backgroundColor={theme.backgroundPanel}
+      >
+        <Switch>
+          <Match when={session()?.parentID}>
+            <box flexDirection="column" gap={1}>
+              <box flexDirection={narrow() ? "column" : "row"} justifyContent="space-between" gap={narrow() ? 1 : 0}>
+                <box flexDirection="column">
+                  <text fg={theme.text}>
+                    <b>Subagent session</b>
+                  </text>
+                  <WorkspaceInfo workspace={workspace} />
+                </box>
+                <box flexDirection="row" gap={1} flexShrink={0}>
+                  <ContextInfo context={context} cost={cost} />
+                  <text fg={theme.textMuted}>v{Installation.VERSION}</text>
+                </box>
+              </box>
+              <box flexDirection="row" gap={2}>
+                <box
+                  onMouseOver={() => setHover("parent")}
+                  onMouseOut={() => setHover(null)}
+                  onMouseUp={() => command.trigger("subtask.background")}
+                  backgroundColor={hover() === "parent" ? theme.backgroundElement : theme.backgroundPanel}
+                >
+                  <text fg={theme.text}>
+                    Parent <span style={{ fg: theme.textMuted }}>{keybind.print("subtask_background")}</span>
+                  </text>
+                </box>
+                <box
+                  onMouseOver={() => setHover("prev")}
+                  onMouseOut={() => setHover(null)}
+                  onMouseUp={() => command.trigger("session.child.previous")}
+                  backgroundColor={hover() === "prev" ? theme.backgroundElement : theme.backgroundPanel}
+                >
+                  <text fg={theme.text}>
+                    Prev <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle_reverse")}</span>
+                  </text>
+                </box>
+                <box
+                  onMouseOver={() => setHover("next")}
+                  onMouseOut={() => setHover(null)}
+                  onMouseUp={() => command.trigger("session.child.next")}
+                  backgroundColor={hover() === "next" ? theme.backgroundElement : theme.backgroundPanel}
+                >
+                  <text fg={theme.text}>
+                    Next <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle")}</span>
+                  </text>
+                </box>
+                <box
+                  onMouseOver={() => setHover("close")}
+                  onMouseOut={() => setHover(null)}
+                  onMouseUp={() => command.trigger("session.child.close")}
+                  backgroundColor={hover() === "close" ? theme.backgroundElement : theme.backgroundPanel}
+                >
+                  <text fg={theme.text}>
+                    Close <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_close")}</span>
+                  </text>
+                </box>
+              </box>
+            </box>
+          </Match>
+          <Match when={true}>
+            <box flexDirection={narrow() ? "column" : "row"} justifyContent="space-between" gap={1}>
+              <box flexDirection="column">
+                <Title session={session} />
+                <WorkspaceInfo workspace={workspace} />
+              </box>
+              <box flexDirection="row" gap={1} flexShrink={0}>
+                <ContextInfo context={context} cost={cost} />
+                <text fg={theme.textMuted}>v{Installation.VERSION}</text>
+              </box>
+            </box>
+          </Match>
+        </Switch>
+      </box>
+    </box>
+  )
+}