@@ -2248,60 +2434,248 @@ export default function Layout(props: ParentProps) {
)
}
- const SidebarContent = (sidebarProps: { mobile?: boolean }) => {
- const expanded = () => sidebarProps.mobile || layout.sidebar.opened()
-
- const sync = useGlobalSync()
- const project = createMemo(() => currentProject())
- const projectName = createMemo(() => {
- const current = project()
- if (!current) return ""
- return current.name || getFilename(current.worktree)
- })
- const projectId = createMemo(() => project()?.id ?? "")
- const workspaces = createMemo(() => workspaceIds(project()))
-
- const createWorkspace = async () => {
- const current = project()
- if (!current) return
-
- const created = await globalSDK.client.worktree
- .create({ directory: current.worktree })
- .then((x) => x.data)
- .catch((err) => {
- showToast({
- title: language.t("workspace.create.failed.title"),
- description: errorMessage(err),
- })
- return undefined
+ const createWorkspace = async (project: LocalProject) => {
+ if (!layout.sidebar.opened()) {
+ setState("hoverSession", undefined)
+ setState("hoverProject", undefined)
+ }
+ const created = await globalSDK.client.worktree
+ .create({ directory: project.worktree })
+ .then((x) => x.data)
+ .catch((err) => {
+ showToast({
+ title: language.t("workspace.create.failed.title"),
+ description: errorMessage(err),
})
-
- if (!created?.directory) return
-
- const local = current.worktree
- const key = workspaceKey(created.directory)
- const root = workspaceKey(local)
-
- setBusy(created.directory, true)
- WorktreeState.pending(created.directory)
- setStore("workspaceExpanded", key, true)
- if (key !== created.directory) {
- setStore("workspaceExpanded", created.directory, true)
- }
- setStore("workspaceOrder", current.worktree, (prev) => {
- const existing = prev ?? []
- const next = existing.filter((item) => {
- const id = workspaceKey(item)
- if (id === root) return false
- return id !== key
- })
- return [local, created.directory, ...next]
+ return undefined
})
- globalSync.child(created.directory)
- navigate(`/${base64Encode(created.directory)}/session`)
- layout.mobileSidebar.hide()
+ if (!created?.directory) return
+
+ const local = project.worktree
+ const key = workspaceKey(created.directory)
+ const root = workspaceKey(local)
+
+ setBusy(created.directory, true)
+ WorktreeState.pending(created.directory)
+ setStore("workspaceExpanded", key, true)
+ if (key !== created.directory) {
+ setStore("workspaceExpanded", created.directory, true)
}
+ setStore("workspaceOrder", project.worktree, (prev) => {
+ const existing = prev ?? []
+ const next = existing.filter((item) => {
+ const id = workspaceKey(item)
+ if (id === root) return false
+ return id !== key
+ })
+ return [local, created.directory, ...next]
+ })
+
+ globalSync.child(created.directory)
+ navigate(`/${base64Encode(created.directory)}/session`)
+ layout.mobileSidebar.hide()
+ }
+
+ const SidebarPanel = (panelProps: { project: LocalProject | undefined; mobile?: boolean }) => {
+ const projectName = createMemo(() => {
+ const project = panelProps.project
+ if (!project) return ""
+ return project.name || getFilename(project.worktree)
+ })
+ const projectId = createMemo(() => panelProps.project?.id ?? "")
+ const workspaces = createMemo(() => workspaceIds(panelProps.project))
+ const workspacesEnabled = createMemo(() => {
+ const project = panelProps.project
+ if (!project) return false
+ if (project.vcs !== "git") return false
+ return layout.sidebar.workspaces(project.worktree)()
+ })
+ const homedir = createMemo(() => globalSync.data.path.home)
+
+ return (
+
+
+ {(p) => (
+ <>
+
+
+
+ renameProject(p, next)}
+ class="text-16-medium text-text-strong truncate"
+ displayClass="text-16-medium text-text-strong truncate"
+ stopPropagation
+ />
+
+
+
+ {p.worktree.replace(homedir(), "~")}
+
+
+
+
+
+
+
+ dialog.show(() => {language.t("common.edit")}
+
+ {
+ const enabled = layout.sidebar.workspaces(p.worktree)()
+ if (enabled) {
+ layout.sidebar.toggleWorkspaces(p.worktree)
+ return
+ }
+ if (p.vcs !== "git") return
+ layout.sidebar.toggleWorkspaces(p.worktree)
+ }}
+ >
+
+ {layout.sidebar.workspaces(p.worktree)()
+ ? language.t("sidebar.workspaces.disable")
+ : language.t("sidebar.workspaces.enable")}
+
+
+ closeProject(p.worktree)}>
+ {language.t("common.close")}
+
+
+
+
+
+
+
+
+ {
+ if (!layout.sidebar.opened()) {
+ setState("hoverSession", undefined)
+ setState("hoverProject", undefined)
+ }
+ navigate(`/${base64Encode(p.worktree)}/session`)
+ layout.mobileSidebar.hide()
+ }}
+ >
+ {language.t("command.session.new")}
+
+
+
+
+
+
+ }
+ >
+ <>
+
+
+ createWorkspace(p)}>
+ {language.t("workspace.new")}
+
+
+
+
+
+ {
+ if (!panelProps.mobile) scrollContainerRef = el
+ }}
+ class="size-full flex flex-col py-2 gap-4 overflow-y-auto no-scrollbar [overflow-anchor:none]"
+ >
+
+
+ {(directory) => (
+
+
+
+
+
+
+
+
+ )}
+
+
0 && providers.paid().length === 0}>
+
+
+
+
{language.t("sidebar.gettingStarted.title")}
+
{language.t("sidebar.gettingStarted.line1")}
+
{language.t("sidebar.gettingStarted.line2")}
+
+
+ {language.t("command.provider.connect")}
+
+
+
+
+ )
+ }
+
+ const SidebarContent = (sidebarProps: { mobile?: boolean }) => {
+ const expanded = () => sidebarProps.mobile || layout.sidebar.opened()
command.register(() => [
{
@@ -2310,12 +2684,14 @@ export default function Layout(props: ParentProps) {
category: language.t("command.category.workspace"),
keybind: "mod+shift+w",
disabled: !workspaceSetting(),
- onSelect: createWorkspace,
+ onSelect: () => {
+ const project = currentProject()
+ if (!project) return
+ return createWorkspace(project)
+ },
},
])
- const homedir = createMemo(() => sync.data.path.home)
-
return (
@@ -2386,180 +2762,7 @@ export default function Layout(props: ParentProps) {
-
-
- {(p) => (
- <>
-
-
-
- project() && renameProject(project()!, next)}
- class="text-16-medium text-text-strong truncate"
- displayClass="text-16-medium text-text-strong truncate"
- stopPropagation
- />
-
-
-
- {project()?.worktree.replace(homedir(), "~")}
-
-
-
-
-
-
-
- dialog.show(() => {language.t("common.edit")}
-
- {
- const enabled = layout.sidebar.workspaces(p.worktree)()
- if (enabled) {
- layout.sidebar.toggleWorkspaces(p.worktree)
- return
- }
- if (p.vcs !== "git") return
- layout.sidebar.toggleWorkspaces(p.worktree)
- }}
- >
-
- {layout.sidebar.workspaces(p.worktree)()
- ? language.t("sidebar.workspaces.disable")
- : language.t("sidebar.workspaces.enable")}
-
-
- closeProject(p.worktree)}>
- {language.t("common.close")}
-
-
-
-
-
-
-
-
- {
- navigate(`/${base64Encode(p.worktree)}/session`)
- layout.mobileSidebar.hide()
- }}
- >
- {language.t("command.session.new")}
-
-
-
-
-
-
- }
- >
- <>
-
-
-
- {language.t("workspace.new")}
-
-
-
-
-
- {
- if (!sidebarProps.mobile) scrollContainerRef = el
- }}
- class="size-full flex flex-col py-2 gap-4 overflow-y-auto no-scrollbar"
- style={{ "overflow-anchor": "none" }}
- >
-
-
- {(directory) => (
-
-
-
-
-
-
-
-
- )}
-
-
0 && providers.paid().length === 0}>
-
-
-
-
{language.t("sidebar.gettingStarted.title")}
-
{language.t("sidebar.gettingStarted.line1")}
-
{language.t("sidebar.gettingStarted.line2")}
-
-
- {language.t("command.provider.connect")}
-
-
-
-
)
@@ -2576,10 +2779,35 @@ export default function Layout(props: ParentProps) {
"relative shrink-0": true,
}}
style={{ width: layout.sidebar.opened() ? `${Math.max(layout.sidebar.width(), 244)}px` : "64px" }}
+ ref={(el) => {
+ setState("nav", el)
+ }}
+ onMouseEnter={() => {
+ if (navLeave.current === undefined) return
+ clearTimeout(navLeave.current)
+ navLeave.current = undefined
+ }}
+ onMouseLeave={() => {
+ if (!sidebarHovering()) return
+
+ if (navLeave.current !== undefined) clearTimeout(navLeave.current)
+ navLeave.current = window.setTimeout(() => {
+ navLeave.current = undefined
+ setState("hoverProject", undefined)
+ setState("hoverSession", undefined)
+ }, 300)
+ }}
>
+
+ {(project) => (
+
+
+ )}
+
void
+ focusedFile?: string
+ onScrollRef?: (el: HTMLDivElement) => void
classes?: {
root?: string
header?: string
@@ -82,6 +98,44 @@ interface SessionReviewTabProps {
}
}
+function StickyAddButton(props: { children: JSX.Element }) {
+ const [stuck, setStuck] = createSignal(false)
+ let button: HTMLDivElement | undefined
+
+ createEffect(() => {
+ const node = button
+ if (!node) return
+
+ const scroll = node.parentElement
+ if (!scroll) return
+
+ const handler = () => {
+ const rect = node.getBoundingClientRect()
+ const scrollRect = scroll.getBoundingClientRect()
+ setStuck(rect.right >= scrollRect.right && scroll.scrollWidth > scroll.clientWidth)
+ }
+
+ scroll.addEventListener("scroll", handler, { passive: true })
+ const observer = new ResizeObserver(handler)
+ observer.observe(scroll)
+ handler()
+ onCleanup(() => {
+ scroll.removeEventListener("scroll", handler)
+ observer.disconnect()
+ })
+ })
+
+ return (
+
+ {props.children}
+
+ )
+}
+
function SessionReviewTab(props: SessionReviewTabProps) {
let scroll: HTMLDivElement | undefined
let frame: number | undefined
@@ -144,6 +198,7 @@ function SessionReviewTab(props: SessionReviewTabProps) {
{
scroll = el
+ props.onScrollRef?.(el)
restoreScroll()
}}
onScroll={handleScroll}
@@ -159,6 +214,7 @@ function SessionReviewTab(props: SessionReviewTabProps) {
diffStyle={props.diffStyle}
onDiffStyleChange={props.onDiffStyleChange}
onViewFile={props.onViewFile}
+ focusedFile={props.focusedFile}
readFile={readFile}
onLineComment={props.onLineComment}
comments={props.comments}
@@ -184,7 +240,45 @@ export default function Page() {
const prompt = usePrompt()
const comments = useComments()
const permission = usePermission()
- const [pendingMessage, setPendingMessage] = createSignal(undefined)
+
+ const request = createMemo(() => {
+ const sessionID = params.id
+ if (!sessionID) return
+ const next = sync.data.permission[sessionID]?.[0]
+ if (!next) return
+ if (next.tool) return
+ return next
+ })
+
+ const [ui, setUi] = createStore({
+ responding: false,
+ pendingMessage: undefined as string | undefined,
+ scrollGesture: 0,
+ autoCreated: false,
+ })
+
+ createEffect(
+ on(
+ () => request()?.id,
+ () => setUi("responding", false),
+ { defer: true },
+ ),
+ )
+
+ const decide = (response: "once" | "always" | "reject") => {
+ const perm = request()
+ if (!perm) return
+ if (ui.responding) return
+
+ setUi("responding", true)
+ sdk.client.permission
+ .respond({ sessionID: perm.sessionID, permissionID: perm.id, response })
+ .catch((err: unknown) => {
+ const message = err instanceof Error ? err.message : String(err)
+ showToast({ title: language.t("common.requestFailed"), description: message })
+ })
+ .finally(() => setUi("responding", false))
+ }
const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
const tabs = createMemo(() => layout.tabs(sessionKey))
const view = createMemo(() => layout.view(sessionKey))
@@ -283,7 +377,8 @@ export default function Page() {
})
const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
- const reviewCount = createMemo(() => info()?.summary?.files ?? 0)
+ const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
+ const reviewCount = createMemo(() => Math.max(info()?.summary?.files ?? 0, diffs().length))
const hasReview = createMemo(() => reviewCount() > 0)
const revertMessageID = createMemo(() => info()?.revert?.messageID)
const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
@@ -339,7 +434,7 @@ export default function Page() {
expanded: {} as Record,
messageId: undefined as string | undefined,
turnStart: 0,
- mobileTab: "session" as "session" | "review",
+ mobileTab: "session" as "session" | "changes",
newSessionWorktree: "main",
promptHeight: 0,
})
@@ -386,7 +481,35 @@ export default function Page() {
scrollToMessage(msgs[targetIndex], "auto")
}
- const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
+ const kinds = createMemo(() => {
+ const merge = (a: "add" | "del" | "mix" | undefined, b: "add" | "del" | "mix") => {
+ if (!a) return b
+ if (a === b) return a
+ return "mix" as const
+ }
+
+ const normalize = (p: string) => p.replaceAll("\\\\", "/").replace(/\/+$/, "")
+
+ const out = new Map()
+ for (const diff of diffs()) {
+ const file = normalize(diff.file)
+ const add = diff.additions > 0
+ const del = diff.deletions > 0
+ const kind = add && del ? "mix" : add ? "add" : del ? "del" : "mix"
+
+ out.set(file, kind)
+
+ const parts = file.split("/")
+ for (const [idx] of parts.slice(0, -1).entries()) {
+ const dir = parts.slice(0, idx + 1).join("/")
+ if (!dir) continue
+ out.set(dir, merge(out.get(dir), kind))
+ }
+ }
+ return out
+ })
+ const emptyDiffFiles: string[] = []
+ const diffFiles = createMemo(() => diffs().map((d) => d.file), emptyDiffFiles, { equals: same })
const diffsReady = createMemo(() => {
const id = params.id
if (!id) return true
@@ -399,9 +522,17 @@ export default function Page() {
let promptDock: HTMLDivElement | undefined
let scroller: HTMLDivElement | undefined
- const [scrollGesture, setScrollGesture] = createSignal(0)
const scrollGestureWindowMs = 250
+ const scrollIgnoreWindowMs = 250
+ let scrollIgnore = 0
+
+ const markScrollIgnore = () => {
+ scrollIgnore = Date.now()
+ }
+
+ const hasScrollIgnore = () => Date.now() - scrollIgnore < scrollIgnoreWindowMs
+
const markScrollGesture = (target?: EventTarget | null) => {
const root = scroller
if (!root) return
@@ -410,26 +541,24 @@ export default function Page() {
const nested = el?.closest("[data-scrollable]")
if (nested && nested !== root) return
- setScrollGesture(Date.now())
+ setUi("scrollGesture", Date.now())
}
- const hasScrollGesture = () => Date.now() - scrollGesture() < scrollGestureWindowMs
+ const hasScrollGesture = () => Date.now() - ui.scrollGesture < scrollGestureWindowMs
createEffect(() => {
if (!params.id) return
sync.session.sync(params.id)
})
- const [autoCreated, setAutoCreated] = createSignal(false)
-
createEffect(() => {
if (!view().terminal.opened()) {
- setAutoCreated(false)
+ setUi("autoCreated", false)
return
}
- if (!terminal.ready() || terminal.all().length !== 0 || autoCreated()) return
+ if (!terminal.ready() || terminal.all().length !== 0 || ui.autoCreated) return
terminal.new()
- setAutoCreated(true)
+ setUi("autoCreated", true)
})
createEffect(
@@ -545,26 +674,26 @@ export default function Page() {
command.register(() => [
{
id: "session.new",
- title: "New session",
- category: "Session",
+ title: language.t("command.session.new"),
+ category: language.t("command.category.session"),
keybind: "mod+shift+s",
slash: "new",
onSelect: () => navigate(`/${params.dir}/session`),
},
{
id: "file.open",
- title: "Open file",
- description: "Search files and commands",
- category: "File",
+ title: language.t("command.file.open"),
+ description: language.t("command.file.open.description"),
+ category: language.t("command.category.file"),
keybind: "mod+p",
slash: "open",
- onSelect: () => dialog.show(() => showAllFiles()} />),
},
{
id: "context.addSelection",
- title: "Add selection to context",
- description: "Add selected lines from the current file",
- category: "Context",
+ title: language.t("command.context.addSelection"),
+ description: language.t("command.context.addSelection.description"),
+ category: language.t("command.category.context"),
keybind: "mod+shift+l",
disabled: (() => {
const active = tabs().active()
@@ -582,8 +711,8 @@ export default function Page() {
const range = file.selectedLines(path)
if (!range) {
showToast({
- title: "No line selection",
- description: "Select a line range in a file tab first.",
+ title: language.t("toast.context.noLineSelection.title"),
+ description: language.t("toast.context.noLineSelection.description"),
})
return
}
@@ -593,20 +722,20 @@ export default function Page() {
},
{
id: "terminal.toggle",
- title: "Toggle terminal",
+ title: language.t("command.terminal.toggle"),
description: "",
- category: "View",
+ category: language.t("command.category.view"),
keybind: "ctrl+`",
slash: "terminal",
onSelect: () => view().terminal.toggle(),
},
{
- id: "review.toggle",
- title: "Toggle review",
+ id: "fileTree.toggle",
+ title: language.t("command.fileTree.toggle"),
description: "",
- category: "View",
+ category: language.t("command.category.view"),
keybind: "mod+shift+r",
- onSelect: () => view().reviewPanel.toggle(),
+ onSelect: () => layout.fileTree.toggle(),
},
{
id: "terminal.new",
@@ -621,9 +750,9 @@ export default function Page() {
},
{
id: "steps.toggle",
- title: "Toggle steps",
- description: "Show or hide steps for the current message",
- category: "View",
+ title: language.t("command.steps.toggle"),
+ description: language.t("command.steps.toggle.description"),
+ category: language.t("command.category.view"),
keybind: "mod+e",
slash: "steps",
disabled: !params.id,
@@ -635,62 +764,62 @@ export default function Page() {
},
{
id: "message.previous",
- title: "Previous message",
- description: "Go to the previous user message",
- category: "Session",
+ title: language.t("command.message.previous"),
+ description: language.t("command.message.previous.description"),
+ category: language.t("command.category.session"),
keybind: "mod+arrowup",
disabled: !params.id,
onSelect: () => navigateMessageByOffset(-1),
},
{
id: "message.next",
- title: "Next message",
- description: "Go to the next user message",
- category: "Session",
+ title: language.t("command.message.next"),
+ description: language.t("command.message.next.description"),
+ category: language.t("command.category.session"),
keybind: "mod+arrowdown",
disabled: !params.id,
onSelect: () => navigateMessageByOffset(1),
},
{
id: "model.choose",
- title: "Choose model",
- description: "Select a different model",
- category: "Model",
+ title: language.t("command.model.choose"),
+ description: language.t("command.model.choose.description"),
+ category: language.t("command.category.model"),
keybind: "mod+'",
slash: "model",
onSelect: () => dialog.show(() =>
- {/* Mobile tab bar - only shown on mobile when user opened review */}
-
+ {/* Mobile tab bar */}
+
setStore("mobileTab", "review")}
+ onClick={() => setStore("mobileTab", "changes")}
>
{language.t("session.review.filesChanged", { count: reviewCount() })}
- {language.t("session.tab.review")}
+ {language.t("session.review.change.other")}
@@ -1453,7 +1706,7 @@ export default function Page() {
"flex-1 md:flex-none pt-6 md:pt-3": true,
}}
style={{
- width: isDesktop() && showTabs() ? `${layout.session.width()}px` : "100%",
+ width: isDesktop() ? `${layout.session.width()}px` : "100%",
"--prompt-height": store.promptHeight ? `${store.promptHeight}px` : undefined,
}}
>
@@ -1462,7 +1715,7 @@ export default function Page() {
@@ -1479,11 +1732,13 @@ export default function Page() {
diffs={diffs}
view={view}
diffStyle="unified"
+ focusedFile={activeDiff()}
onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
comments={comments.all()}
focusedComment={comments.focus()}
onFocusedCommentChange={comments.setFocus}
onViewFile={(path) => {
+ showAllFiles()
const value = file.tab(path)
tabs().open(value)
file.load(path)
@@ -1499,7 +1754,7 @@ export default function Page() {
-
+
{language.t("session.review.empty")}
@@ -1536,9 +1791,10 @@ export default function Page() {
markScrollGesture(e.target)
}}
onScroll={(e) => {
- if (!hasScrollGesture()) return
+ const gesture = hasScrollGesture()
+ if (!hasScrollIgnore() || gesture) autoScroll.handleScroll()
+ if (!gesture) return
markScrollGesture(e.target)
- autoScroll.handleScroll()
if (isDesktop()) scheduleScrollSpy(e.currentTarget)
}}
onClick={autoScroll.handleInteraction}
@@ -1551,7 +1807,6 @@ export default function Page() {
"sticky top-0 z-30 bg-background-stronger": true,
"w-full": true,
"px-4 md:px-6": true,
- "md:max-w-200 md:mx-auto": !showTabs(),
}}
>
@@ -1576,13 +1831,7 @@ export default function Page() {
0}>
@@ -1592,7 +1841,7 @@ export default function Page() {
class="text-12-medium opacity-50"
onClick={() => setStore("turnStart", 0)}
>
- Render earlier messages
+ {language.t("session.messages.renderEarlier")}
@@ -1610,7 +1859,9 @@ export default function Page() {
sync.session.history.loadMore(id)
}}
>
- {historyLoading() ? "Loading earlier messages..." : "Load earlier messages"}
+ {historyLoading()
+ ? language.t("session.messages.loadingEarlier")
+ : language.t("session.messages.loadEarlier")}
@@ -1628,10 +1879,7 @@ export default function Page() {
(promptDock = el)}
class="absolute inset-x-0 bottom-0 pt-12 pb-4 flex flex-col justify-center items-center z-50 px-4 md:px-0 bg-gradient-to-t from-background-stronger via-background-stronger to-transparent pointer-events-none"
>
-
+
+
+ {(perm) => (
+
+
+ 0}>
+
+
+ {(pattern) => {pattern}}
+
+
+
+
+
+ {language.t("settings.permissions.tool.doom_loop.description")}
+
+
+
+
+
+ decide("reject")} disabled={ui.responding}>
+ {language.t("ui.permission.deny")}
+
+ decide("always")}
+ disabled={ui.responding}
+ >
+ {language.t("ui.permission.allowAlways")}
+
+ decide("once")} disabled={ui.responding}>
+ {language.t("ui.permission.allowOnce")}
+
+
+
+
+
- {handoff.prompt || "Loading prompt..."}
+ {handoff.prompt || language.t("prompt.loading")}
}
>
@@ -1710,7 +2003,7 @@ export default function Page() {
-
+
- {/* Desktop tabs panel (Review + Context + Files) - hidden on mobile */}
-
+ {/* Desktop side panel - hidden on mobile */}
+
-
-
-
-
-
-
-
-
-
-
-
{language.t("session.tab.review")}
-
-
- {info()?.summary?.files ?? 0}
-
-
-
-
-
-
-
- tabs().close("context")}
- aria-label={language.t("common.closeTab")}
- />
-
- }
- hideCloseButton
- onMiddleClick={() => tabs().close("context")}
- >
-
-
-
{language.t("session.tab.context")}
-
-
-
- {(tab) =>
-
-
-
- dialog.show(() =>
-
-
-
-
-
-
-
-
-
- {language.t("session.review.loadingChanges")}
-
+
+
+
+
+
+
+ tabs().close("context")}
+ aria-label={language.t("common.closeTab")}
+ />
+
}
+ hideCloseButton
+ onMiddleClick={() => tabs().close("context")}
>
- addCommentToContext({ ...comment, origin: "review" })}
- comments={comments.all()}
- focusedComment={comments.focus()}
- onFocusedCommentChange={comments.setFocus}
- onViewFile={(path) => {
- const value = file.tab(path)
- tabs().open(value)
- file.load(path)
- }}
+
+
+
{language.t("session.tab.context")}
+
+
+
+
+ {(tab) =>
+
+
+
+
+ dialog.show(() => showAllFiles()} />)
+ }
+ aria-label={language.t("command.file.open")}
/>
-
-
-
-
+
+
+
+
+
+
+
+
+
-
No changes in this session yet
+
+ {language.t("session.files.selectToOpen")}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(tab) => {
- let scroll: HTMLDivElement | undefined
- let scrollFrame: number | undefined
- let pending: { x: number; y: number } | undefined
- let codeScroll: HTMLElement[] = []
- let focusToken = 0
+
+
- const path = createMemo(() => file.pathFromTab(tab))
- const state = createMemo(() => {
- const p = path()
- if (!p) return
- return file.get(p)
- })
- const contents = createMemo(() => state()?.content?.content ?? "")
- const cacheKey = createMemo(() => checksum(contents()))
- const isImage = createMemo(() => {
- const c = state()?.content
- return (
- c?.encoding === "base64" && c?.mimeType?.startsWith("image/") && c?.mimeType !== "image/svg+xml"
- )
- })
- const isSvg = createMemo(() => {
- const c = state()?.content
- return c?.mimeType === "image/svg+xml"
- })
- const svgContent = createMemo(() => {
- if (!isSvg()) return
- const c = state()?.content
- if (!c) return
- if (c.encoding === "base64") return base64Decode(c.content)
- return c.content
- })
- const svgPreviewUrl = createMemo(() => {
- if (!isSvg()) return
- const c = state()?.content
- if (!c) return
- if (c.encoding === "base64") return `data:image/svg+xml;base64,${c.content}`
- return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(c.content)}`
- })
- const imageDataUrl = createMemo(() => {
- if (!isImage()) return
- const c = state()?.content
- return `data:${c?.mimeType};base64,${c?.content}`
- })
- const selectedLines = createMemo(() => {
- const p = path()
- if (!p) return null
- if (file.ready()) return file.selectedLines(p) ?? null
- return handoff.files[p] ?? null
- })
+
+
+
+
+
+
+
+
- let wrap: HTMLDivElement | undefined
+
+ {(tab) => {
+ let scroll: HTMLDivElement | undefined
+ let scrollFrame: number | undefined
+ let pending: { x: number; y: number } | undefined
+ let codeScroll: HTMLElement[] = []
- const fileComments = createMemo(() => {
- const p = path()
- if (!p) return []
- return comments.list(p)
- })
-
- const commentedLines = createMemo(() => fileComments().map((comment) => comment.selection))
-
- const [openedComment, setOpenedComment] = createSignal(null)
- const [commenting, setCommenting] = createSignal(null)
- const [draft, setDraft] = createSignal("")
- const [positions, setPositions] = createSignal>({})
- const [draftTop, setDraftTop] = createSignal(undefined)
-
- const empty = {} as Record
-
- const commentLabel = (range: SelectedLineRange) => {
- const start = Math.min(range.start, range.end)
- const end = Math.max(range.start, range.end)
- if (start === end) return `line ${start}`
- return `lines ${start}-${end}`
- }
-
- const getRoot = () => {
- const el = wrap
- if (!el) return
-
- const host = el.querySelector("diffs-container")
- if (!(host instanceof HTMLElement)) return
-
- const root = host.shadowRoot
- if (!root) return
-
- return root
- }
-
- const findMarker = (root: ShadowRoot, range: SelectedLineRange) => {
- const line = Math.max(range.start, range.end)
- const node = root.querySelector(`[data-line="${line}"]`)
- if (!(node instanceof HTMLElement)) return
- return node
- }
-
- const markerTop = (wrapper: HTMLElement, marker: HTMLElement) => {
- const wrapperRect = wrapper.getBoundingClientRect()
- const rect = marker.getBoundingClientRect()
- return rect.top - wrapperRect.top + Math.max(0, (rect.height - 20) / 2)
- }
-
- const equal = (a: Record, b: Record) => {
- const aKeys = Object.keys(a)
- const bKeys = Object.keys(b)
- if (aKeys.length !== bKeys.length) return false
- for (const key of aKeys) {
- if (a[key] !== b[key]) return false
- }
- return true
- }
-
- const updateComments = () => {
- const el = wrap
- const root = getRoot()
- if (!el || !root) {
- setPositions((prev) => (Object.keys(prev).length === 0 ? prev : empty))
- setDraftTop((prev) => (prev === undefined ? prev : undefined))
- return
- }
-
- const next: Record = {}
- for (const comment of fileComments()) {
- const marker = findMarker(root, comment.selection)
- if (!marker) continue
- next[comment.id] = markerTop(el, marker)
- }
-
- setPositions((prev) => (equal(prev, next) ? prev : next))
-
- const range = commenting()
- if (!range) {
- setDraftTop(undefined)
- return
- }
-
- const marker = findMarker(root, range)
- if (!marker) {
- setDraftTop(undefined)
- return
- }
-
- const nextTop = markerTop(el, marker)
- setDraftTop((prev) => (prev === nextTop ? prev : nextTop))
- }
-
- let commentFrame: number | undefined
-
- const scheduleComments = () => {
- if (commentFrame !== undefined) return
- commentFrame = requestAnimationFrame(() => {
- commentFrame = undefined
- updateComments()
- })
- }
-
- createEffect(() => {
- fileComments()
- scheduleComments()
- })
-
- createEffect(() => {
- commenting()
- scheduleComments()
- })
-
- createEffect(() => {
- const range = commenting()
- if (!range) return
- setDraft("")
- })
-
- createEffect(() => {
- const focus = comments.focus()
- const p = path()
- if (!focus || !p) return
- if (focus.file !== p) return
- if (activeTab() !== tab) return
-
- const target = fileComments().find((comment) => comment.id === focus.id)
- if (!target) return
-
- focusToken++
- const token = focusToken
-
- setOpenedComment(target.id)
- setCommenting(null)
- file.setSelectedLines(p, target.selection)
-
- const scrollTo = (attempt: number) => {
- if (token !== focusToken) return
-
- const root = scroll
- if (!root) {
- if (attempt >= 120) return
- requestAnimationFrame(() => scrollTo(attempt + 1))
- return
- }
-
- const anchor = root.querySelector(`[data-comment-id="${target.id}"]`)
- const ready =
- anchor instanceof HTMLElement &&
- anchor.style.pointerEvents !== "none" &&
- anchor.style.opacity !== "0"
-
- const shadow = getRoot()
- const marker = shadow ? findMarker(shadow, target.selection) : undefined
- const node = (ready ? anchor : (marker ?? wrap)) as HTMLElement | undefined
- if (!node) {
- if (attempt >= 120) return
- requestAnimationFrame(() => scrollTo(attempt + 1))
- return
- }
-
- const rootRect = root.getBoundingClientRect()
- const targetRect = node.getBoundingClientRect()
- const offset = targetRect.top - rootRect.top
- const next = root.scrollTop + offset - rootRect.height / 2 + targetRect.height / 2
- root.scrollTop = Math.max(0, next)
-
- if (ready || marker) return
- if (attempt >= 120) return
- requestAnimationFrame(() => scrollTo(attempt + 1))
- }
-
- requestAnimationFrame(() => scrollTo(0))
- requestAnimationFrame(() => comments.clearFocus())
- })
-
- const renderCode = (source: string, wrapperClass: string) => (
- {
- wrap = el
- scheduleComments()
- }}
- class={`relative overflow-hidden ${wrapperClass}`}
- >
-
{
- requestAnimationFrame(restoreScroll)
- requestAnimationFrame(scheduleComments)
- }}
- onLineSelected={(range: SelectedLineRange | null) => {
+ const path = createMemo(() => file.pathFromTab(tab))
+ const state = createMemo(() => {
const p = path()
if (!p) return
- file.setSelectedLines(p, range)
- if (!range) setCommenting(null)
- }}
- onLineSelectionEnd={(range: SelectedLineRange | null) => {
- if (!range) {
- setCommenting(null)
+ return file.get(p)
+ })
+ const contents = createMemo(() => state()?.content?.content ?? "")
+ const cacheKey = createMemo(() => checksum(contents()))
+ const isImage = createMemo(() => {
+ const c = state()?.content
+ return (
+ c?.encoding === "base64" &&
+ c?.mimeType?.startsWith("image/") &&
+ c?.mimeType !== "image/svg+xml"
+ )
+ })
+ const isSvg = createMemo(() => {
+ const c = state()?.content
+ return c?.mimeType === "image/svg+xml"
+ })
+ const svgContent = createMemo(() => {
+ if (!isSvg()) return
+ const c = state()?.content
+ if (!c) return
+ if (c.encoding !== "base64") return c.content
+ return decode64(c.content)
+ })
+
+ const svgDecodeFailed = createMemo(() => {
+ if (!isSvg()) return false
+ const c = state()?.content
+ if (!c) return false
+ if (c.encoding !== "base64") return false
+ return svgContent() === undefined
+ })
+
+ const svgToast = { shown: false }
+ createEffect(() => {
+ if (!svgDecodeFailed()) return
+ if (svgToast.shown) return
+ svgToast.shown = true
+ showToast({
+ variant: "error",
+ title: language.t("toast.file.loadFailed.title"),
+ description: "Invalid base64 content.",
+ })
+ })
+ const svgPreviewUrl = createMemo(() => {
+ if (!isSvg()) return
+ const c = state()?.content
+ if (!c) return
+ if (c.encoding === "base64") return `data:image/svg+xml;base64,${c.content}`
+ return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(c.content)}`
+ })
+ const imageDataUrl = createMemo(() => {
+ if (!isImage()) return
+ const c = state()?.content
+ return `data:${c?.mimeType};base64,${c?.content}`
+ })
+ const selectedLines = createMemo(() => {
+ const p = path()
+ if (!p) return null
+ if (file.ready()) return file.selectedLines(p) ?? null
+ return handoff.files[p] ?? null
+ })
+
+ let wrap: HTMLDivElement | undefined
+
+ const fileComments = createMemo(() => {
+ const p = path()
+ if (!p) return []
+ return comments.list(p)
+ })
+
+ const commentedLines = createMemo(() => fileComments().map((comment) => comment.selection))
+
+ const [note, setNote] = createStore({
+ openedComment: null as string | null,
+ commenting: null as SelectedLineRange | null,
+ draft: "",
+ positions: {} as Record,
+ draftTop: undefined as number | undefined,
+ })
+
+ const openedComment = () => note.openedComment
+ const setOpenedComment = (
+ value:
+ | typeof note.openedComment
+ | ((value: typeof note.openedComment) => typeof note.openedComment),
+ ) => setNote("openedComment", value)
+
+ const commenting = () => note.commenting
+ const setCommenting = (
+ value: typeof note.commenting | ((value: typeof note.commenting) => typeof note.commenting),
+ ) => setNote("commenting", value)
+
+ const draft = () => note.draft
+ const setDraft = (
+ value: typeof note.draft | ((value: typeof note.draft) => typeof note.draft),
+ ) => setNote("draft", value)
+
+ const positions = () => note.positions
+ const setPositions = (
+ value: typeof note.positions | ((value: typeof note.positions) => typeof note.positions),
+ ) => setNote("positions", value)
+
+ const draftTop = () => note.draftTop
+ const setDraftTop = (
+ value: typeof note.draftTop | ((value: typeof note.draftTop) => typeof note.draftTop),
+ ) => setNote("draftTop", value)
+
+ const commentLabel = (range: SelectedLineRange) => {
+ const start = Math.min(range.start, range.end)
+ const end = Math.max(range.start, range.end)
+ if (start === end) return `line ${start}`
+ return `lines ${start}-${end}`
+ }
+
+ const getRoot = () => {
+ const el = wrap
+ if (!el) return
+
+ const host = el.querySelector("diffs-container")
+ if (!(host instanceof HTMLElement)) return
+
+ const root = host.shadowRoot
+ if (!root) return
+
+ return root
+ }
+
+ const findMarker = (root: ShadowRoot, range: SelectedLineRange) => {
+ const line = Math.max(range.start, range.end)
+ const node = root.querySelector(`[data-line="${line}"]`)
+ if (!(node instanceof HTMLElement)) return
+ return node
+ }
+
+ const markerTop = (wrapper: HTMLElement, marker: HTMLElement) => {
+ const wrapperRect = wrapper.getBoundingClientRect()
+ const rect = marker.getBoundingClientRect()
+ return rect.top - wrapperRect.top + Math.max(0, (rect.height - 20) / 2)
+ }
+
+ const updateComments = () => {
+ const el = wrap
+ const root = getRoot()
+ if (!el || !root) {
+ setPositions({})
+ setDraftTop(undefined)
return
}
- setOpenedComment(null)
- setCommenting(range)
- }}
- overflow="scroll"
- class="select-text"
- />
-
- {(comment) => (
-
+
+ {(range) => (
+
+ setDraft(value)}
+ onCancel={() => setCommenting(null)}
+ onSubmit={(value) => {
+ const p = path()
+ if (!p) return
+ addCommentToContext({
+ file: p,
+ selection: range(),
+ comment: value,
+ origin: "file",
+ })
+ setCommenting(null)
+ }}
+ onPopoverFocusOut={(e: FocusEvent) => {
+ const current = e.currentTarget as HTMLDivElement
+ const target = e.relatedTarget
+ if (target instanceof Node && current.contains(target)) return
- const getCodeScroll = () => {
- const el = scroll
- if (!el) return []
-
- const host = el.querySelector("diffs-container")
- if (!(host instanceof HTMLElement)) return []
-
- const root = host.shadowRoot
- if (!root) return []
-
- return Array.from(root.querySelectorAll("[data-code]")).filter(
- (node): node is HTMLElement => node instanceof HTMLElement && node.clientWidth > 0,
- )
- }
-
- const queueScrollUpdate = (next: { x: number; y: number }) => {
- pending = next
- if (scrollFrame !== undefined) return
-
- scrollFrame = requestAnimationFrame(() => {
- scrollFrame = undefined
-
- const next = pending
- pending = undefined
- if (!next) return
-
- view().setScroll(tab, next)
- })
- }
-
- const handleCodeScroll = (event: Event) => {
- const el = scroll
- if (!el) return
-
- const target = event.currentTarget
- if (!(target instanceof HTMLElement)) return
-
- queueScrollUpdate({
- x: target.scrollLeft,
- y: el.scrollTop,
- })
- }
-
- const syncCodeScroll = () => {
- const next = getCodeScroll()
- if (next.length === codeScroll.length && next.every((el, i) => el === codeScroll[i])) return
-
- for (const item of codeScroll) {
- item.removeEventListener("scroll", handleCodeScroll)
- }
-
- codeScroll = next
-
- for (const item of codeScroll) {
- item.addEventListener("scroll", handleCodeScroll)
- }
- }
-
- const restoreScroll = () => {
- const el = scroll
- if (!el) return
-
- const s = view()?.scroll(tab)
- if (!s) return
-
- syncCodeScroll()
-
- if (codeScroll.length > 0) {
- for (const item of codeScroll) {
- if (item.scrollLeft !== s.x) item.scrollLeft = s.x
- }
- }
-
- if (el.scrollTop !== s.y) el.scrollTop = s.y
-
- if (codeScroll.length > 0) return
-
- if (el.scrollLeft !== s.x) el.scrollLeft = s.x
- }
-
- const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
- if (codeScroll.length === 0) syncCodeScroll()
-
- queueScrollUpdate({
- x: codeScroll[0]?.scrollLeft ?? event.currentTarget.scrollLeft,
- y: event.currentTarget.scrollTop,
- })
- }
-
- createEffect(
- on(
- () => state()?.loaded,
- (loaded) => {
- if (!loaded) return
- requestAnimationFrame(restoreScroll)
- },
- { defer: true },
- ),
- )
-
- createEffect(
- on(
- () => file.ready(),
- (ready) => {
- if (!ready) return
- requestAnimationFrame(restoreScroll)
- },
- { defer: true },
- ),
- )
-
- createEffect(
- on(
- () => tabs().active() === tab,
- (active) => {
- if (!active) return
- if (!state()?.loaded) return
- requestAnimationFrame(restoreScroll)
- },
- ),
- )
-
- onCleanup(() => {
- if (commentFrame !== undefined) cancelAnimationFrame(commentFrame)
- for (const item of codeScroll) {
- item.removeEventListener("scroll", handleCodeScroll)
- }
-
- if (scrollFrame === undefined) return
- cancelAnimationFrame(scrollFrame)
- })
-
- return (
- {
- scroll = el
- restoreScroll()
- }}
- onScroll={handleScroll}
- >
-
-
-
-
requestAnimationFrame(restoreScroll)}
- />
-
-
-
- {renderCode(svgContent() ?? "", "")}
-
-
-
-
+ )}
- {renderCode(contents(), "pb-40")}
-
- {language.t("common.loading")}...
-
-
- {(err) => {err()}
}
-
-
-
- )
- }}
-
-
-
-
- {(tab) => {
- const path = createMemo(() => file.pathFromTab(tab()))
- return (
-
- {(p) =>
-
- )
- }}
-
-
-
+ )
+
+ const getCodeScroll = () => {
+ const el = scroll
+ if (!el) return []
+
+ const host = el.querySelector("diffs-container")
+ if (!(host instanceof HTMLElement)) return []
+
+ const root = host.shadowRoot
+ if (!root) return []
+
+ return Array.from(root.querySelectorAll("[data-code]")).filter(
+ (node): node is HTMLElement => node instanceof HTMLElement && node.clientWidth > 0,
+ )
+ }
+
+ const queueScrollUpdate = (next: { x: number; y: number }) => {
+ pending = next
+ if (scrollFrame !== undefined) return
+
+ scrollFrame = requestAnimationFrame(() => {
+ scrollFrame = undefined
+
+ const next = pending
+ pending = undefined
+ if (!next) return
+
+ view().setScroll(tab, next)
+ })
+ }
+
+ const handleCodeScroll = (event: Event) => {
+ const el = scroll
+ if (!el) return
+
+ const target = event.currentTarget
+ if (!(target instanceof HTMLElement)) return
+
+ queueScrollUpdate({
+ x: target.scrollLeft,
+ y: el.scrollTop,
+ })
+ }
+
+ const syncCodeScroll = () => {
+ const next = getCodeScroll()
+ if (next.length === codeScroll.length && next.every((el, i) => el === codeScroll[i])) return
+
+ for (const item of codeScroll) {
+ item.removeEventListener("scroll", handleCodeScroll)
+ }
+
+ codeScroll = next
+
+ for (const item of codeScroll) {
+ item.addEventListener("scroll", handleCodeScroll)
+ }
+ }
+
+ const restoreScroll = () => {
+ const el = scroll
+ if (!el) return
+
+ const s = view()?.scroll(tab)
+ if (!s) return
+
+ syncCodeScroll()
+
+ if (codeScroll.length > 0) {
+ for (const item of codeScroll) {
+ if (item.scrollLeft !== s.x) item.scrollLeft = s.x
+ }
+ }
+
+ if (el.scrollTop !== s.y) el.scrollTop = s.y
+
+ if (codeScroll.length > 0) return
+
+ if (el.scrollLeft !== s.x) el.scrollLeft = s.x
+ }
+
+ const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+ if (codeScroll.length === 0) syncCodeScroll()
+
+ queueScrollUpdate({
+ x: codeScroll[0]?.scrollLeft ?? event.currentTarget.scrollLeft,
+ y: event.currentTarget.scrollTop,
+ })
+ }
+
+ createEffect(
+ on(
+ () => state()?.loaded,
+ (loaded) => {
+ if (!loaded) return
+ requestAnimationFrame(restoreScroll)
+ },
+ { defer: true },
+ ),
+ )
+
+ createEffect(
+ on(
+ () => file.ready(),
+ (ready) => {
+ if (!ready) return
+ requestAnimationFrame(restoreScroll)
+ },
+ { defer: true },
+ ),
+ )
+
+ createEffect(
+ on(
+ () => tabs().active() === tab,
+ (active) => {
+ if (!active) return
+ if (!state()?.loaded) return
+ requestAnimationFrame(restoreScroll)
+ },
+ ),
+ )
+
+ onCleanup(() => {
+ for (const item of codeScroll) {
+ item.removeEventListener("scroll", handleCodeScroll)
+ }
+
+ if (scrollFrame === undefined) return
+ cancelAnimationFrame(scrollFrame)
+ })
+
+ return (
+ {
+ scroll = el
+ restoreScroll()
+ }}
+ onScroll={handleScroll}
+ >
+
+
+
+
requestAnimationFrame(restoreScroll)}
+ />
+
+
+
+ {renderCode(svgContent() ?? "", "")}
+
+
+
+
+
+ {renderCode(contents(), "pb-40")}
+
+ {language.t("common.loading")}...
+
+
+ {(err) => {err()}
}
+
+
+
+ )
+ }}
+
+
+
+
+ {(tab) => {
+ const path = createMemo(() => file.pathFromTab(tab()))
+ return (
+
+ {(p) =>
+
+ )
+ }}
+
+
+
+ }
+ >
+
+
+
+
+ {language.t("session.review.loadingChanges")}
+ }
+ >
+
addCommentToContext({ ...comment, origin: "review" })}
+ comments={comments.all()}
+ focusedComment={comments.focus()}
+ onFocusedCommentChange={comments.setFocus}
+ onViewFile={(path) => {
+ showAllFiles()
+ const value = file.tab(path)
+ tabs().open(value)
+ file.load(path)
+ }}
+ />
+
+
+
+
+
+
+ {language.t("session.review.empty")}
+
+
+
+
+
+
+
+
+
+ {reviewCount()}{" "}
+ {language.t(reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other")}
+
+
+ {language.t("session.files.all")}
+
+
+
+
+
+
+ {language.t("common.loading")}
+ {language.t("common.loading.ellipsis")}
+
+ }
+ >
+
focusReviewDiff(node.path)}
+ />
+
+
+
+
+ {language.t("session.review.noChanges")}
+
+
+
+
+
+ openTab(file.tab(node.path))}
+ />
+
+
+
+
@@ -2407,9 +2771,14 @@ export default function Page() {
)}
-
Loading...
+
+ {language.t("common.loading")}
+ {language.t("common.loading.ellipsis")}
+
+
+
+ {language.t("terminal.loading")}
- Loading terminal...
+ 
