saeeol 1.1.0 → 1.1.1

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

@@ -0,0 +1,188 @@
+import { For, Match, Show, Switch } from "solid-js"
+import { RGBA, addDefaultParsers } from "@opentui/core"
+import type { AssistantMessage, UserMessage } from "@saeeol/sdk/v2"
+import { Prompt } from "@tui/component/prompt"
+import { useCommandDialog } from "@tui/component/dialog-command"
+import { DialogMessage } from "./dialog-message"
+import { Sidebar } from "./sidebar"
+import { SubagentFooter } from "./subagent-footer.tsx"
+import { PermissionPrompt } from "./permission"
+import { QuestionPrompt } from "./question"
+import { SuggestPrompt } from "@/saeeol/suggestion/tui/prompt"
+import { NetworkPrompt } from "./network"
+import { TuiPluginRuntime } from "@/cli/cmd/tui/plugin/runtime"
+import { SessionIndexing } from "@/saeeol/components/session-indexing"
+import { Toast } from "../../ui/toast"
+import { context } from "./context"
+import { UserMessage as UserMessageComponent } from "./messages/user-message"
+import { AssistantMessage as AssistantMessageComponent } from "./messages/assistant-message"
+import { createSessionSetup } from "./session-setup"
+import { registerSessionCommands } from "./session-commands"
+import { RevertBanner } from "./session-revert-banner"
+import parsers from "../../../../../../parsers-config.ts"
+
+addDefaultParsers(parsers.parsers)
+
+export function Session() {
+  const s = createSessionSetup()
+  const command = useCommandDialog()
+
+  registerSessionCommands(command, {
+    session: s.session,
+    messages: s.messages,
+    route: s.route,
+    get scroll() { return s.refs.scroll! },
+    get prompt() { return s.refs.prompt },
+    children: s.ch,
+    sync: s.sync,
+    sdk: s.sdk,
+    toast: s.toast,
+    kv: s.kv,
+    dialog: s.dialog,
+    renderer: s.renderer,
+    keybind: s.keybind,
+    local: s.local,
+    navigate: s.navigate,
+    sidebarVisible: s.sidebarVisible,
+    setSidebar: s.setSidebar,
+    setSidebarOpen: s.setSidebarOpen,
+    setConceal: s.setConceal,
+    setTimestamps: s.setTimestamps,
+    setShowThinking: s.setShowThinking,
+    setShowDetails: s.setShowDetails,
+    setShowScrollbar: s.setShowScrollbar,
+    setShowGenericToolOutput: s.setShowGenericToolOutput,
+    showThinking: s.showThinking,
+    showDetails: s.showDetails,
+    showAssistantMetadata: s.showAssistantMetadata,
+    conceal: s.conceal,
+    showTimestamps: s.showTimestamps,
+    showGenericToolOutput: s.showGenericToolOutput,
+    toBottom: s.toBottom,
+    pointing: s.pointing,
+    setPointing: s.setPointing,
+  })
+
+  return (
+    <context.Provider
+      value={{
+        get width() { return s.contentWidth() },
+        sessionID: s.route.sessionID,
+        conceal: s.conceal, showThinking: s.showThinking, showTimestamps: s.showTimestamps,
+        showDetails: s.showDetails, showGenericToolOutput: s.showGenericToolOutput,
+        diffWrapMode: s.diffWrapMode, providers: s.providers, sync: s.sync, tui: s.tuiConfig,
+      }}
+    >
+      <box flexDirection="row">
+        <box flexGrow={1} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
+          <Show when={s.session()}>
+            <scrollbox
+              ref={(r) => { s.refs.scroll = r }}
+              viewportOptions={{ paddingRight: s.showScrollbar() ? 1 : 0 }}
+              verticalScrollbarOptions={{
+                paddingLeft: 1,
+                visible: s.showScrollbar(),
+                trackOptions: { backgroundColor: s.theme.backgroundElement, foregroundColor: s.theme.border },
+              }}
+              stickyScroll={true}
+              stickyStart="bottom"
+              flexGrow={1}
+              scrollAcceleration={s.scrollAcceleration()}
+            >
+              <box height={1} />
+              <Show when={s.session()?.parentID && s.messages().length === 0}>
+                <box paddingLeft={3}>
+                  <text fg={s.theme.textMuted}>↳ Initializing...</text>
+                </box>
+              </Show>
+              <For each={s.messages()}>
+                {(message, index) => (
+                  <Switch>
+                    <Match when={message.id === s.revert()?.messageID}>
+                      <RevertBanner revert={s.revert()!} />
+                    </Match>
+                    <Match when={s.revert()?.messageID && message.id >= s.revert()!.messageID}>
+                      <></>
+                    </Match>
+                    <Match when={message.role === "user"}>
+                      <UserMessageComponent
+                        index={index()}
+                        onMouseUp={() => {
+                          if (s.renderer.getSelection()?.getSelectedText()) return
+                          s.dialog.replace(() => <DialogMessage messageID={message.id} sessionID={s.route.sessionID} setPrompt={(pi) => s.refs.prompt?.set(pi)} />)
+                        }}
+                        message={message as UserMessage}
+                        parts={s.sync.data.part[message.id] ?? []}
+                        pending={s.pending()}
+                      />
+                    </Match>
+                    <Match when={message.role === "assistant"}>
+                      <AssistantMessageComponent
+                        last={s.lastAssistant()?.id === message.id}
+                        message={message as AssistantMessage}
+                        parts={s.sync.data.part[message.id] ?? []}
+                      />
+                    </Match>
+                  </Switch>
+                )}
+              </For>
+            </scrollbox>
+            <box flexShrink={0}>
+              <Show when={s.permissions().length > 0}>
+                <PermissionPrompt request={s.permissions()[0]} />
+              </Show>
+              <Show when={s.permissions().length === 0 && s.question()} keyed>
+                {(request) => <QuestionPrompt request={request} nonBlocking={request.blocking === false} inputFocused={() => s.refs.prompt?.focused ?? false} />}
+              </Show>
+              <Show when={s.permissions().length === 0 && !s.question()}>
+                <Show when={s.blockingSuggestion()} keyed>
+                  {(request) => <SuggestPrompt request={request} />}
+                </Show>
+              </Show>
+              <Show when={s.session()?.parentID}>
+                <SubagentFooter />
+              </Show>
+              <Show when={s.networkVisible()}>
+                <NetworkPrompt request={s.network()[0]} />
+              </Show>
+              <Show when={!s.session()?.parentID}>
+                <TuiPluginRuntime.Slot name="session_prompt" mode="replace" session_id={s.route.sessionID} visible={s.visible()} disabled={s.disabled()} on_submit={s.toBottom} ref={s.bind}>
+                  <Prompt
+                    visible={s.visible()}
+                    ref={s.bind}
+                    disabled={s.disabled()}
+                    onSubmit={() => s.toBottom()}
+                    sessionID={s.route.sessionID}
+                    right={
+                      <box flexDirection="row" gap={1} alignItems="center">
+                        <text fg={s.theme.textMuted} onMouseDown={() => { const vis = s.sidebarVisible(); s.setSidebar(() => (vis ? "hide" : "auto")); s.setSidebarOpen(!vis) }}>
+                          {s.sidebarVisible() ? "◂" : "▸"}
+                        </text>
+                        <text fg={s.theme.textMuted} onMouseDown={() => s.toBottom()}>↓</text>
+                        <TuiPluginRuntime.Slot name="session_prompt_right" session_id={s.route.sessionID} />
+                      </box>
+                    }
+                  />
+                </TuiPluginRuntime.Slot>
+              </Show>
+            </box>
+          </Show>
+          <SessionIndexing />
+          <Toast />
+        </box>
+        <Show when={s.sidebarVisible()}>
+          <Switch>
+            <Match when={s.wide()}>
+              <Sidebar sessionID={s.route.sessionID} />
+            </Match>
+            <Match when={!s.wide()}>
+              <box position="absolute" top={0} left={0} right={0} bottom={0} alignItems="flex-end" backgroundColor={RGBA.fromInts(0, 0, 0, 70)}>
+                <Sidebar sessionID={s.route.sessionID} />
+              </box>
+            </Match>
+          </Switch>
+        </Show>
+      </box>
+    </context.Provider>
+  )
+}

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

@@ -0,0 +1,183 @@
+/** @jsxImportSource @opentui/solid */
+
+import { createMemo, Show, Switch, Match, For } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { AssistantMessage, ReasoningPart, TextPart } from "@saeeol/sdk/v2"
+import { Flag } from "@saeeol/core/flag/flag"
+import { useTheme } from "@tui/context/theme"
+import { useLocal } from "@tui/context/local"
+import { useSync } from "@tui/context/sync"
+import { useKeybind } from "@tui/context/keybind"
+import { Locale } from "@/util/locale"
+import * as Model from "../../../util/model"
+import { SaeeolErrorBlock } from "@/saeeol/components/error-display" 
+import { SplitBorder } from "@tui/component/border"
+import { use } from "../context"
+import { ToolPart } from "./tool-router"
+
+function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: AssistantMessage }) {
+  const { theme, subtleSyntax } = useTheme()
+  const ctx = use()
+  const content = createMemo(() => {
+    return props.part.text.replace("[REDACTED]", "").trim()
+  })
+  return (
+    <Show when={content() && ctx.showThinking()}>
+      <box
+        id={"text-" + props.part.id}
+        paddingLeft={2}
+        marginTop={1}
+        flexDirection="column"
+        border={["left"]}
+        customBorderChars={SplitBorder.customBorderChars}
+        borderColor={theme.backgroundElement}
+      >
+        <code
+          filetype="markdown"
+          drawUnstyledText={false}
+          streaming={true}
+          syntaxStyle={subtleSyntax()}
+          content={"_Thinking:_ " + content()}
+          conceal={ctx.conceal()}
+          fg={theme.textMuted}
+        />
+      </box>
+    </Show>
+  )
+}
+
+function TextPartView(props: { last: boolean; part: TextPart; message: AssistantMessage }) {
+  const ctx = use()
+  const { theme, syntax } = useTheme()
+  return (
+    <Show when={props.part.text.trim()}>
+      <box id={"text-" + props.part.id} paddingLeft={3} marginTop={1} flexShrink={0}>
+        <Switch>
+          <Match when={Flag.SAEEOL_EXPERIMENTAL_MARKDOWN}>
+            <markdown
+              syntaxStyle={syntax()}
+              streaming={true}
+              content={props.part.text.trim()}
+              conceal={ctx.conceal()}
+              fg={theme.markdownText}
+              bg={theme.background}
+            />
+          </Match>
+          <Match when={!Flag.SAEEOL_EXPERIMENTAL_MARKDOWN}>
+            <code
+              filetype="markdown"
+              drawUnstyledText={false}
+              streaming={true}
+              syntaxStyle={syntax()}
+              content={props.part.text.trim()}
+              conceal={ctx.conceal()}
+              fg={theme.text}
+            />
+          </Match>
+        </Switch>
+      </box>
+    </Show>
+  )
+}
+
+const PART_MAPPING: Record<string, any> = {
+  text: TextPartView,
+  tool: ToolPart,
+  reasoning: ReasoningPart,
+}
+
+export function AssistantMessage(props: { message: AssistantMessage; parts: any[]; last: boolean }) {
+  const ctx = use()
+  const local = useLocal()
+  const { theme } = useTheme()
+  const sync = useSync()
+  const messages = createMemo(() => sync.data.message[props.message.sessionID] ?? [])
+  const model = createMemo(() => Model.name(ctx.providers(), props.message.providerID, props.message.modelID))
+
+  const final = createMemo(() => {
+    return props.message.finish && !["tool-calls", "unknown"].includes(props.message.finish)
+  })
+
+  const duration = createMemo(() => {
+    if (!final()) return 0
+    if (!props.message.time.completed) return 0
+    const user = messages().find((x) => x.role === "user" && x.id === props.message.parentID)
+    if (!user || !user.time) return 0
+    return props.message.time.completed - user.time.created
+  })
+
+  const keybind = useKeybind()
+
+  return (
+    <>
+      <For each={props.parts}>
+        {(part, index) => {
+          const component = createMemo(() => PART_MAPPING[part.type as keyof typeof PART_MAPPING])
+          return (
+            <Show when={component()}>
+              <Dynamic
+                last={index() === props.parts.length - 1}
+                component={component()}
+                part={part as any}
+                message={props.message}
+              />
+            </Show>
+          )
+        }}
+      </For>
+      <Show when={props.parts.some((x: any) => x.type === "tool" && x.tool === "task")}>
+        <box paddingTop={1} paddingLeft={3}>
+          <text fg={theme.text}>
+            {keybind.print("session_child_first")}
+            <span style={{ fg: theme.textMuted }}> view subagents</span>
+          </text>
+        </box>
+      </Show>
+      <Show when={props.message.error && props.message.error.name !== "MessageAbortedError"}>
+        <SaeeolErrorBlock
+          error={props.message.error!}
+          fallback={
+            <box
+              border={["left"]}
+              paddingTop={1}
+              paddingBottom={1}
+              paddingLeft={2}
+              marginTop={1}
+              backgroundColor={theme.backgroundPanel}
+              customBorderChars={SplitBorder.customBorderChars}
+              borderColor={theme.error}
+            >
+              <text fg={theme.textMuted}>{props.message.error?.data.message}</text>
+            </box>
+          }
+        />
+      </Show>
+      <Switch>
+        <Match when={props.last || final() || props.message.error?.name === "MessageAbortedError"}>
+          <box paddingLeft={3}>
+            <text marginTop={1}>
+              <span
+                style={{
+                  fg:
+                    props.message.error?.name === "MessageAbortedError"
+                      ? theme.textMuted
+                      : local.agent.color(props.message.agent),
+                }}
+              >
+                ▣{" "}
+              </span>{" "}
+              <span style={{ fg: theme.text }}>{Locale.titlecase(props.message.mode)}</span>
+              <span style={{ fg: theme.textMuted }}> · {model()}</span>
+              <Show when={duration()}>
+                <span style={{ fg: theme.textMuted }}> · {Locale.duration(duration())}</span>
+              </Show>
+              <Show when={props.message.error?.name === "MessageAbortedError"}>
+                <span style={{ fg: theme.textMuted }}> · interrupted</span>
+              </Show>
+            </text>
+          </box>
+        </Match>
+      </Switch>
+    </>
+  )
+}

package/src/cli/cmd/tui/routes/session/messages/message-utils.ts

@@ -0,0 +1,33 @@
+import path from "path"
+import { LANGUAGE_EXTENSIONS } from "@/lsp/language"
+
+export function normalizePath(input?: string) {
+  if (!input) return ""
+
+  const cwd = process.cwd()
+  const absolute = path.isAbsolute(input) ? input : path.resolve(cwd, input)
+  const relative = path.relative(cwd, absolute)
+
+  if (!relative) return "."
+  if (!relative.startsWith("..")) return relative
+
+  // cwd 외부 경로 — 절대 경로 사용
+  return absolute
+}
+
+export function input(input: Record<string, any>, omit?: string[]): string {
+  const primitives = Object.entries(input).filter(([key, value]) => {
+    if (omit?.includes(key)) return false
+    return typeof value === "string" || typeof value === "number" || typeof value === "boolean"
+  })
+  if (primitives.length === 0) return ""
+  return `[${primitives.map(([key, value]) => `${key}=${value}`).join(", ")}]`
+}
+
+export function filetype(input?: string) {
+  if (!input) return "none"
+  const ext = path.extname(input)
+  const language = LANGUAGE_EXTENSIONS[ext]
+  if (["typescriptreact", "javascriptreact", "javascript"].includes(language)) return "typescript"
+  return language
+}

package/src/cli/cmd/tui/routes/session/messages/tool-parts.tsx

@@ -0,0 +1,197 @@
+/** @jsxImportSource @opentui/solid */
+
+import { createMemo, createSignal, Match, Show, Switch } from "solid-js"
+import type { ToolPart as ToolPartType } from "@saeeol/sdk/v2"
+import type { Tool } from "@/tool/tool"
+import { BoxRenderable, TextAttributes, RGBA } from "@opentui/core"
+import { SplitBorder } from "@tui/component/border"
+import { Spinner } from "@tui/component/spinner"
+import { useTheme } from "@tui/context/theme"
+import { useSync } from "@tui/context/sync"
+import { useRenderer, type JSX } from "@opentui/solid"
+import { use } from "../context"
+import { input } from "./message-utils"
+
+export type ToolProps<T> = {
+  input: Partial<Tool.InferParameters<T>>
+  metadata: Partial<Tool.InferMetadata<T>>
+  permission: Record<string, any>
+  tool: string
+  output?: string
+  part: ToolPartType
+}
+
+export function GenericTool(props: ToolProps<any>) {
+  const { theme } = useTheme()
+  const ctx = use()
+  const output = createMemo(() => props.output?.trim() ?? "")
+  const [expanded, setExpanded] = createSignal(false)
+  const lines = createMemo(() => output().split("\n"))
+  const maxLines = 20
+  const overflow = createMemo(() => lines().length > maxLines)
+  const limited = createMemo(() => {
+    if (expanded() || !overflow()) return output()
+    return [...lines().slice(0, maxLines), "…"].join("\n")
+  })
+
+  return (
+    <Show
+      when={props.output && ctx.showGenericToolOutput()}
+      fallback={
+        <InlineTool icon="⚙" pending="Writing command..." complete={true} part={props.part}>
+          {props.tool} {input(props.input)}
+        </InlineTool>
+      }
+    >
+      <BlockTool
+        title={`# ${props.tool} ${input(props.input)}`}
+        part={props.part}
+        onClick={overflow() ? () => setExpanded((prev) => !prev) : undefined}
+      >
+        <box gap={1}>
+          <text fg={theme.text}>{limited()}</text>
+          <Show when={overflow()}>
+            <text fg={theme.textMuted}>{expanded() ? "Click to collapse" : "Click to expand"}</text>
+          </Show>
+        </box>
+      </BlockTool>
+    </Show>
+  )
+}
+
+export function InlineTool(props: {
+  icon: string
+  iconColor?: RGBA
+  complete: any
+  pending: string
+  spinner?: boolean
+  children: JSX.Element
+  part: ToolPartType
+  onClick?: () => void
+}) {
+  const [margin, setMargin] = createSignal(0)
+  const { theme } = useTheme()
+  const ctx = use()
+  const sync = useSync()
+  const renderer = useRenderer()
+  const [hover, setHover] = createSignal(false)
+
+  const permission = createMemo(() => {
+    const callID = sync.data.permission[ctx.sessionID]?.at(0)?.tool?.callID
+    if (!callID) return false
+    return callID === props.part.callID
+  })
+
+  const fg = createMemo(() => {
+    if (permission()) return theme.warning
+    if (hover() && props.onClick) return theme.text
+    if (props.complete) return theme.textMuted
+    return theme.text
+  })
+
+  const error = createMemo(() => (props.part.state.status === "error" ? props.part.state.error : undefined))
+
+  const denied = createMemo(
+    () =>
+      error()?.includes("QuestionRejectedError") ||
+      error()?.includes("rejected permission") ||
+      error()?.includes("specified a rule") ||
+      error()?.includes("user dismissed"),
+  )
+
+  return (
+    <box
+      marginTop={margin()}
+      paddingLeft={3}
+      onMouseOver={() => props.onClick && setHover(true)}
+      onMouseOut={() => setHover(false)}
+      onMouseUp={() => {
+        if (renderer.getSelection()?.getSelectedText()) return
+        props.onClick?.()
+      }}
+      renderBefore={function () {
+        const el = this as BoxRenderable
+        const parent = el.parent
+        if (!parent) return
+        if (el.height > 1) {
+          setMargin(1)
+          return
+        }
+        const children = parent.getChildren()
+        const index = children.indexOf(el)
+        const previous = children[index - 1]
+        if (!previous) {
+          setMargin(0)
+          return
+        }
+        if (previous.height > 1 || previous.id.startsWith("text-")) {
+          setMargin(1)
+          return
+        }
+      }}
+    >
+      <Switch>
+        <Match when={props.spinner}>
+          <Spinner color={fg()} children={props.children} />
+        </Match>
+        <Match when={true}>
+          <text paddingLeft={3} fg={fg()} attributes={denied() ? TextAttributes.STRIKETHROUGH : undefined}>
+            <Show fallback={<>~ {props.pending}</>} when={props.complete}>
+              <span style={{ fg: props.iconColor }}>{props.icon}</span> {props.children}
+            </Show>
+          </text>
+        </Match>
+      </Switch>
+      <Show when={error() && !denied()}>
+        <text fg={theme.error}>{error()}</text>
+      </Show>
+    </box>
+  )
+}
+
+export function BlockTool(props: {
+  title: string
+  children: JSX.Element
+  onClick?: () => void
+  part?: ToolPartType
+  spinner?: boolean
+}) {
+  const { theme } = useTheme()
+  const renderer = useRenderer()
+  const [hover, setHover] = createSignal(false)
+  const error = createMemo(() => (props.part?.state.status === "error" ? props.part.state.error : undefined))
+  return (
+    <box
+      border={["left"]}
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={2}
+      marginTop={1}
+      gap={1}
+      backgroundColor={hover() ? theme.backgroundMenu : theme.backgroundPanel}
+      customBorderChars={SplitBorder.customBorderChars}
+      borderColor={theme.background}
+      onMouseOver={() => props.onClick && setHover(true)}
+      onMouseOut={() => setHover(false)}
+      onMouseUp={() => {
+        if (renderer.getSelection()?.getSelectedText()) return
+        props.onClick?.()
+      }}
+    >
+      <Show
+        when={props.spinner}
+        fallback={
+          <text paddingLeft={3} fg={theme.textMuted}>
+            {props.title}
+          </text>
+        }
+      >
+        <Spinner color={theme.textMuted}>{props.title.replace(/^# /, "")}</Spinner>
+      </Show>
+      {props.children}
+      <Show when={error()}>
+        <text fg={theme.error}>{error()}</text>
+      </Show>
+    </box>
+  )
+}