@nikcli-ai/app 0.0.6

package/src/pages/session/session-side-panel.tsx

@@ -0,0 +1,319 @@
+import { For, Match, Show, Switch, createMemo, onCleanup, type JSX, type ValidComponent } from "solid-js"
+import { Tabs } from "@nikcli-ai/ui/tabs"
+import { IconButton } from "@nikcli-ai/ui/icon-button"
+import { Tooltip, TooltipKeybind } from "@nikcli-ai/ui/tooltip"
+import { ResizeHandle } from "@nikcli-ai/ui/resize-handle"
+import { Mark } from "@nikcli-ai/ui/logo"
+import FileTree from "@/components/file-tree"
+import { SessionContextUsage } from "@/components/session-context-usage"
+import { SessionContextTab, SortableTab, FileVisual } from "@/components/session"
+import { DialogSelectFile } from "@/components/dialog-select-file"
+import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
+import { FileTabContent } from "@/pages/session/file-tabs"
+import { StickyAddButton } from "@/pages/session/review-tab"
+import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
+import { ConstrainDragYAxis } from "@/utils/solid-dnd"
+import type { DragEvent } from "@thisbeyond/solid-dnd"
+import { useComments } from "@/context/comments"
+import { useCommand } from "@/context/command"
+import { useDialog } from "@nikcli-ai/ui/context/dialog"
+import { useFile, type SelectedLineRange } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { useSync } from "@/context/sync"
+
+export function SessionSidePanel(props: {
+  open: boolean
+  reviewOpen: boolean
+  language: ReturnType<typeof useLanguage>
+  layout: ReturnType<typeof useLayout>
+  command: ReturnType<typeof useCommand>
+  dialog: ReturnType<typeof useDialog>
+  file: ReturnType<typeof useFile>
+  comments: ReturnType<typeof useComments>
+  sync: ReturnType<typeof useSync>
+  hasReview: boolean
+  reviewCount: number
+  reviewTab: boolean
+  contextOpen: () => boolean
+  openedTabs: () => string[]
+  activeTab: () => string
+  activeFileTab: () => string | undefined
+  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
+  openTab: (value: string) => void
+  showAllFiles: () => void
+  reviewPanel: () => JSX.Element
+  messages: () => unknown[]
+  visibleUserMessages: () => unknown[]
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  info: () => unknown
+  handoffFiles: () => Record<string, SelectedLineRange | null> | undefined
+  codeComponent: NonNullable<ValidComponent>
+  addCommentToContext: (input: {
+    file: string
+    selection: SelectedLineRange
+    comment: string
+    preview?: string
+    origin?: "review" | "file"
+  }) => void
+  activeDraggable: () => string | undefined
+  onDragStart: (event: unknown) => void
+  onDragEnd: () => void
+  onDragOver: (event: DragEvent) => void
+  fileTreeTab: () => "changes" | "all"
+  setFileTreeTabValue: (value: string) => void
+  diffsReady: boolean
+  diffFiles: string[]
+  kinds: Map<string, "add" | "del" | "mix">
+  activeDiff?: string
+  focusReviewDiff: (path: string) => void
+}) {
+  return (
+    <Show when={props.open}>
+      <aside
+        id="review-panel"
+        aria-label={props.language.t("session.panel.reviewAndFiles")}
+        class="relative min-w-0 h-full border-l border-border-weak-base flex"
+        classList={{
+          "flex-1": props.reviewOpen,
+          "shrink-0": !props.reviewOpen,
+        }}
+        style={{ width: props.reviewOpen ? undefined : `${props.layout.fileTree.width()}px` }}
+      >
+        <Show when={props.reviewOpen}>
+          <div class="flex-1 min-w-0 h-full">
+            <Show
+              when={props.layout.fileTree.opened() && props.fileTreeTab() === "changes"}
+              fallback={
+                <DragDropProvider
+                  onDragStart={props.onDragStart}
+                  onDragEnd={props.onDragEnd}
+                  onDragOver={props.onDragOver}
+                  collisionDetector={closestCenter}
+                >
+                  <DragDropSensors />
+                  <ConstrainDragYAxis />
+                  <Tabs value={props.activeTab()} onChange={props.openTab}>
+                    <div class="sticky top-0 shrink-0 flex">
+                      <Tabs.List
+                        ref={(el: HTMLDivElement) => {
+                          const stop = createFileTabListSync({ el, contextOpen: props.contextOpen })
+                          onCleanup(stop)
+                        }}
+                      >
+                        <Show when={props.reviewTab}>
+                          <Tabs.Trigger value="review" classes={{ button: "!pl-6" }}>
+                            <div class="flex items-center gap-1.5">
+                              <div>{props.language.t("session.tab.review")}</div>
+                              <Show when={props.hasReview}>
+                                <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
+                                  {props.reviewCount}
+                                </div>
+                              </Show>
+                            </div>
+                          </Tabs.Trigger>
+                        </Show>
+                        <Show when={props.contextOpen()}>
+                          <Tabs.Trigger
+                            value="context"
+                            closeButton={
+                              <Tooltip value={props.language.t("common.closeTab")} placement="bottom">
+                                <IconButton
+                                  icon="close-small"
+                                  variant="ghost"
+                                  class="h-5 w-5"
+                                  onClick={() => props.tabs().close("context")}
+                                  aria-label={props.language.t("common.closeTab")}
+                                />
+                              </Tooltip>
+                            }
+                            hideCloseButton
+                            onMiddleClick={() => props.tabs().close("context")}
+                          >
+                            <div class="flex items-center gap-2">
+                              <SessionContextUsage variant="indicator" />
+                              <div>{props.language.t("session.tab.context")}</div>
+                            </div>
+                          </Tabs.Trigger>
+                        </Show>
+                        <SortableProvider ids={props.openedTabs()}>
+                          <For each={props.openedTabs()}>
+                            {(tab) => <SortableTab tab={tab} onTabClose={props.tabs().close} />}
+                          </For>
+                        </SortableProvider>
+                        <StickyAddButton>
+                          <TooltipKeybind
+                            title={props.language.t("command.file.open")}
+                            keybind={props.command.keybind("file.open")}
+                            class="flex items-center"
+                          >
+                            <IconButton
+                              icon="plus-small"
+                              variant="ghost"
+                              iconSize="large"
+                              onClick={() =>
+                                props.dialog.show(() => (
+                                  <DialogSelectFile mode="files" onOpenFile={props.showAllFiles} />
+                                ))
+                              }
+                              aria-label={props.language.t("command.file.open")}
+                            />
+                          </TooltipKeybind>
+                        </StickyAddButton>
+                      </Tabs.List>
+                    </div>
+
+                    <Show when={props.reviewTab}>
+                      <Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
+                        <Show when={props.activeTab() === "review"}>{props.reviewPanel()}</Show>
+                      </Tabs.Content>
+                    </Show>
+
+                    <Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
+                      <Show when={props.activeTab() === "empty"}>
+                        <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
+                          <div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
+                            <Mark class="w-14 opacity-10" />
+                            <div class="text-14-regular text-text-weak max-w-56">
+                              {props.language.t("session.files.selectToOpen")}
+                            </div>
+                          </div>
+                        </div>
+                      </Show>
+                    </Tabs.Content>
+
+                    <Show when={props.contextOpen()}>
+                      <Tabs.Content value="context" class="flex flex-col h-full overflow-hidden contain-strict">
+                        <Show when={props.activeTab() === "context"}>
+                          <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
+                            <SessionContextTab
+                              messages={props.messages as never}
+                              visibleUserMessages={props.visibleUserMessages as never}
+                              view={props.view as never}
+                              info={props.info as never}
+                            />
+                          </div>
+                        </Show>
+                      </Tabs.Content>
+                    </Show>
+
+                    <Show when={props.activeFileTab()} keyed>
+                      {(tab) => (
+                        <FileTabContent
+                          tab={tab}
+                          activeTab={props.activeTab}
+                          tabs={props.tabs}
+                          view={props.view}
+                          handoffFiles={props.handoffFiles}
+                          file={props.file}
+                          comments={props.comments}
+                          language={props.language}
+                          codeComponent={props.codeComponent}
+                          addCommentToContext={props.addCommentToContext}
+                        />
+                      )}
+                    </Show>
+                  </Tabs>
+                  <DragOverlay>
+                    <Show when={props.activeDraggable()}>
+                      {(tab) => {
+                        const path = createMemo(() => props.file.pathFromTab(tab()))
+                        return (
+                          <div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
+                            <Show when={path()}>{(p) => <FileVisual active path={p()} />}</Show>
+                          </div>
+                        )
+                      }}
+                    </Show>
+                  </DragOverlay>
+                </DragDropProvider>
+              }
+            >
+              {props.reviewPanel()}
+            </Show>
+          </div>
+        </Show>
+
+        <Show when={props.layout.fileTree.opened()}>
+          <div
+            id="file-tree-panel"
+            class="relative shrink-0 h-full"
+            style={{ width: `${props.layout.fileTree.width()}px` }}
+          >
+            <div
+              class="h-full flex flex-col overflow-hidden group/filetree"
+              classList={{ "border-l border-border-weak-base": props.reviewOpen }}
+            >
+              <Tabs
+                variant="pill"
+                value={props.fileTreeTab()}
+                onChange={props.setFileTreeTabValue}
+                class="h-full"
+                data-scope="filetree"
+              >
+                <Tabs.List>
+                  <Tabs.Trigger value="changes" class="flex-1" classes={{ button: "w-full" }}>
+                    {props.reviewCount}{" "}
+                    {props.language.t(
+                      props.reviewCount === 1 ? "session.review.change.one" : "session.review.change.other",
+                    )}
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="all" class="flex-1" classes={{ button: "w-full" }}>
+                    {props.language.t("session.files.all")}
+                  </Tabs.Trigger>
+                </Tabs.List>
+                <Tabs.Content value="changes" class="bg-background-base px-3 py-0">
+                  <Switch>
+                    <Match when={props.hasReview}>
+                      <Show
+                        when={props.diffsReady}
+                        fallback={
+                          <div class="px-2 py-2 text-12-regular text-text-weak">
+                            {props.language.t("common.loading")}
+                            {props.language.t("common.loading.ellipsis")}
+                          </div>
+                        }
+                      >
+                        <FileTree
+                          path=""
+                          allowed={props.diffFiles}
+                          kinds={props.kinds}
+                          draggable={false}
+                          active={props.activeDiff}
+                          onFileClick={(node) => props.focusReviewDiff(node.path)}
+                        />
+                      </Show>
+                    </Match>
+                    <Match when={true}>
+                      <div class="mt-8 text-center text-12-regular text-text-weak">
+                        {props.language.t("session.review.noChanges")}
+                      </div>
+                    </Match>
+                  </Switch>
+                </Tabs.Content>
+                <Tabs.Content value="all" class="bg-background-base px-3 py-0">
+                  <FileTree
+                    path=""
+                    modified={props.diffFiles}
+                    kinds={props.kinds}
+                    onFileClick={(node) => props.openTab(props.file.tab(node.path))}
+                  />
+                </Tabs.Content>
+              </Tabs>
+            </div>
+            <ResizeHandle
+              direction="horizontal"
+              edge="start"
+              size={props.layout.fileTree.width()}
+              min={200}
+              max={480}
+              collapseThreshold={160}
+              onResize={props.layout.fileTree.resize}
+              onCollapse={props.layout.fileTree.close}
+            />
+          </div>
+        </Show>
+      </aside>
+    </Show>
+  )
+}

package/src/pages/session/terminal-label.ts

@@ -0,0 +1,16 @@
+export const terminalTabLabel = (input: {
+  title?: string
+  titleNumber?: number
+  t: (key: string, vars?: Record<string, string | number | boolean>) => string
+}) => {
+  const title = input.title ?? ""
+  const number = input.titleNumber ?? 0
+  const match = title.match(/^Terminal (\d+)$/)
+  const parsed = match ? Number(match[1]) : undefined
+  const isDefaultTitle = Number.isFinite(number) && number > 0 && Number.isFinite(parsed) && parsed === number
+
+  if (title && !isDefaultTitle) return title
+  if (number > 0) return input.t("terminal.title.numbered", { number })
+  if (title) return title
+  return input.t("terminal.title")
+}

package/src/pages/session/terminal-panel.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test"
+import { terminalTabLabel } from "./terminal-label"
+
+const t = (key: string, vars?: Record<string, string | number | boolean>) => {
+  if (key === "terminal.title.numbered") return `Terminal ${vars?.number}`
+  if (key === "terminal.title") return "Terminal"
+  return key
+}
+
+describe("terminalTabLabel", () => {
+  test("returns custom title unchanged", () => {
+    const label = terminalTabLabel({ title: "server", titleNumber: 3, t })
+    expect(label).toBe("server")
+  })
+
+  test("normalizes default numbered title", () => {
+    const label = terminalTabLabel({ title: "Terminal 2", titleNumber: 2, t })
+    expect(label).toBe("Terminal 2")
+  })
+
+  test("falls back to generic title", () => {
+    const label = terminalTabLabel({ title: "", titleNumber: 0, t })
+    expect(label).toBe("Terminal")
+  })
+})

package/src/pages/session/terminal-panel.tsx

@@ -0,0 +1,169 @@
+import { createMemo, For, Show } from "solid-js"
+import { Tabs } from "@nikcli-ai/ui/tabs"
+import { ResizeHandle } from "@nikcli-ai/ui/resize-handle"
+import { IconButton } from "@nikcli-ai/ui/icon-button"
+import { TooltipKeybind } from "@nikcli-ai/ui/tooltip"
+import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
+import type { DragEvent } from "@thisbeyond/solid-dnd"
+import { ConstrainDragYAxis } from "@/utils/solid-dnd"
+import { SortableTerminalTab } from "@/components/session"
+import { Terminal } from "@/components/terminal"
+import { useTerminal, type LocalPTY } from "@/context/terminal"
+import { useLanguage } from "@/context/language"
+import { useCommand } from "@/context/command"
+import { terminalTabLabel } from "@/pages/session/terminal-label"
+
+export function TerminalPanel(props: {
+  open: boolean
+  height: number
+  resize: (value: number) => void
+  close: () => void
+  terminal: ReturnType<typeof useTerminal>
+  language: ReturnType<typeof useLanguage>
+  command: ReturnType<typeof useCommand>
+  handoff: () => string[]
+  activeTerminalDraggable: () => string | undefined
+  handleTerminalDragStart: (event: unknown) => void
+  handleTerminalDragOver: (event: DragEvent) => void
+  handleTerminalDragEnd: () => void
+  onCloseTab: () => void
+}) {
+  return (
+    <Show when={props.open}>
+      <div
+        id="terminal-panel"
+        role="region"
+        aria-label={props.language.t("terminal.title")}
+        class="relative w-full flex flex-col shrink-0 border-t border-border-weak-base"
+        style={{ height: `${props.height}px` }}
+      >
+        <ResizeHandle
+          direction="vertical"
+          size={props.height}
+          min={100}
+          max={window.innerHeight * 0.6}
+          collapseThreshold={50}
+          onResize={props.resize}
+          onCollapse={props.close}
+        />
+        <Show
+          when={props.terminal.ready()}
+          fallback={
+            <div class="flex flex-col h-full pointer-events-none">
+              <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weak-base bg-background-stronger overflow-hidden">
+                <For each={props.handoff()}>
+                  {(title) => (
+                    <div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
+                      {title}
+                    </div>
+                  )}
+                </For>
+                <div class="flex-1" />
+                <div class="text-text-weak pr-2">
+                  {props.language.t("common.loading")}
+                  {props.language.t("common.loading.ellipsis")}
+                </div>
+              </div>
+              <div class="flex-1 flex items-center justify-center text-text-weak">
+                {props.language.t("terminal.loading")}
+              </div>
+            </div>
+          }
+        >
+          <DragDropProvider
+            onDragStart={props.handleTerminalDragStart}
+            onDragEnd={props.handleTerminalDragEnd}
+            onDragOver={props.handleTerminalDragOver}
+            collisionDetector={closestCenter}
+          >
+            <DragDropSensors />
+            <ConstrainDragYAxis />
+            <div class="flex flex-col h-full">
+              <Tabs
+                variant="alt"
+                value={props.terminal.active()}
+                onChange={(id) => props.terminal.open(id)}
+                class="!h-auto !flex-none"
+              >
+                <Tabs.List class="h-10">
+                  <SortableProvider ids={props.terminal.all().map((t: LocalPTY) => t.id)}>
+                    <For each={props.terminal.all()}>
+                      {(pty) => (
+                        <SortableTerminalTab
+                          terminal={pty}
+                          onClose={() => {
+                            props.close()
+                            props.onCloseTab()
+                          }}
+                        />
+                      )}
+                    </For>
+                  </SortableProvider>
+                  <div class="h-full flex items-center justify-center">
+                    <TooltipKeybind
+                      title={props.language.t("command.terminal.new")}
+                      keybind={props.command.keybind("terminal.new")}
+                      class="flex items-center"
+                    >
+                      <IconButton
+                        icon="plus-small"
+                        variant="ghost"
+                        iconSize="large"
+                        onClick={props.terminal.new}
+                        aria-label={props.language.t("command.terminal.new")}
+                      />
+                    </TooltipKeybind>
+                  </div>
+                </Tabs.List>
+              </Tabs>
+              <div class="flex-1 min-h-0 relative">
+                <For each={props.terminal.all()}>
+                  {(pty) => (
+                    <div
+                      id={`terminal-wrapper-${pty.id}`}
+                      class="absolute inset-0"
+                      style={{
+                        display: props.terminal.active() === pty.id ? "block" : "none",
+                      }}
+                    >
+                      <Show when={pty.id} keyed>
+                        <Terminal
+                          pty={pty}
+                          onCleanup={props.terminal.update}
+                          onConnectError={() => props.terminal.clone(pty.id)}
+                        />
+                      </Show>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+            <DragOverlay>
+              <Show when={props.activeTerminalDraggable()}>
+                {(draggedId) => {
+                  const pty = createMemo(() => props.terminal.all().find((t: LocalPTY) => t.id === draggedId()))
+                  return (
+                    <Show when={pty()}>
+                      {(t) => (
+                        <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
+                          {terminalTabLabel({
+                            title: t().title,
+                            titleNumber: t().titleNumber,
+                            t: props.language.t as (
+                              key: string,
+                              vars?: Record<string, string | number | boolean>,
+                            ) => string,
+                          })}
+                        </div>
+                      )}
+                    </Show>
+                  )
+                }}
+              </Show>
+            </DragOverlay>
+          </DragDropProvider>
+        </Show>
+      </div>
+    </Show>
+  )
+}

package/src/pages/session/use-session-commands.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "bun:test"
+import { canAddSelectionContext } from "./session-command-helpers"
+
+describe("canAddSelectionContext", () => {
+  test("returns false without active tab", () => {
+    expect(
+      canAddSelectionContext({
+        active: undefined,
+        pathFromTab: () => "src/a.ts",
+        selectedLines: () => ({ start: 1, end: 1 }),
+      }),
+    ).toBe(false)
+  })
+
+  test("returns false when active tab is not a file", () => {
+    expect(
+      canAddSelectionContext({
+        active: "context",
+        pathFromTab: () => undefined,
+        selectedLines: () => ({ start: 1, end: 1 }),
+      }),
+    ).toBe(false)
+  })
+
+  test("returns false without selected lines", () => {
+    expect(
+      canAddSelectionContext({
+        active: "file://src/a.ts",
+        pathFromTab: () => "src/a.ts",
+        selectedLines: () => null,
+      }),
+    ).toBe(false)
+  })
+
+  test("returns true when file and selection exist", () => {
+    expect(
+      canAddSelectionContext({
+        active: "file://src/a.ts",
+        pathFromTab: () => "src/a.ts",
+        selectedLines: () => ({ start: 1, end: 2 }),
+      }),
+    ).toBe(true)
+  })
+})