+ {visibleView === "parsed" && chunks.length > 0 ? (
+
+
+
+
+ ) : null}
{hasOriginalFile ? (
)
+ ) : isTreeModeVisible ? (
+
+ {isTreeModeVisible ? (
+
@@ -245,6 +430,532 @@ export function ChunksPanel({
);
}
+type ChunkSectionTreeNode = ReturnType;
+
+type RenderableChunkTreeNodeKind = "root" | "section" | "chunk";
+
+type RenderableChunkTreeNode = {
+ readonly id: string;
+ readonly kind: RenderableChunkTreeNodeKind;
+ readonly label: string;
+ readonly chunkCount: number;
+ readonly chunk?: ParsedChunkView;
+ readonly children: readonly RenderableChunkTreeNode[];
+};
+
+type ChunkSectionTreeLayout = {
+ readonly height: number;
+ readonly links: readonly HierarchyPointLink[];
+ readonly nodes: readonly HierarchyPointNode[];
+ readonly width: number;
+ readonly xOffset: number;
+ readonly yOffset: number;
+};
+
+type SectionTreeZoomDirection = "in" | "out";
+
+type SectionTreePan = {
+ readonly x: number;
+ readonly y: number;
+};
+
+type SectionTreeDragState = {
+ readonly panStartX: number;
+ readonly panStartY: number;
+ readonly pointerStartX: number;
+ readonly pointerStartY: number;
+};
+
+const sectionTreeNodeWidth = 208;
+const sectionTreeNodeHeight = 58;
+const sectionTreeColumnGap = 254;
+const sectionTreeRowGap = 78;
+const sectionTreeMinimumWidth = 720;
+const sectionTreeMinimumHeight = 260;
+const sectionTreeCardHorizontalPadding = 32;
+const sectionTreeDefaultZoomPercent = 100;
+const sectionTreeMinimumZoomPercent = 30;
+const sectionTreeMaximumZoomPercent = 140;
+const sectionTreeZoomStepPercent = 10;
+const initialSectionTreePan: SectionTreePan = {
+ x: 0,
+ y: 0,
+};
+const sectionTreePadding = {
+ top: 38,
+ right: 42,
+ bottom: 38,
+ left: 24,
+} as const;
+
+function ChunkSectionTree({
+ chunks,
+ focusedChunkId,
+ isLoadingAllChunks,
+ sourceTitle,
+ zoomPercent,
+ onChunkFocus,
+ onWheelZoom,
+}: {
+ readonly chunks: readonly ParsedChunkView[];
+ readonly focusedChunkId: string | null;
+ readonly isLoadingAllChunks: boolean;
+ readonly sourceTitle: string;
+ readonly zoomPercent: number;
+ readonly onChunkFocus: (chunkId: string | null) => void;
+ readonly onWheelZoom: (direction: SectionTreeZoomDirection) => void;
+}): ReactNode {
+ const [sectionTreePan, setSectionTreePan] =
+ useState(initialSectionTreePan);
+ const [sectionTreeDragState, setSectionTreeDragState] =
+ useState(null);
+ const sectionTreeZoomSurfaceRef = useRef(null);
+ const sectionTree = useMemo(
+ () => chunksPanelState.buildSectionTree(chunks, sourceTitle),
+ [chunks, sourceTitle],
+ );
+ const layout = useMemo(
+ () => getChunkSectionTreeLayout(sectionTree),
+ [sectionTree],
+ );
+ const scaledLayoutWidth: number = Math.round(
+ (layout.width * zoomPercent) / 100,
+ );
+ const scaledLayoutHeight: number = Math.round(
+ (layout.height * zoomPercent) / 100,
+ );
+ const zoomScale: string = formatSectionTreeZoomScale(zoomPercent);
+ const handlePanStart = useCallback(
+ (event: ReactMouseEvent): void => {
+ if (event.button !== 0 || isInteractiveSectionTreeTarget(event.target)) {
+ return;
+ }
+
+ event.preventDefault();
+ setSectionTreeDragState({
+ pointerStartX: event.clientX,
+ pointerStartY: event.clientY,
+ panStartX: sectionTreePan.x,
+ panStartY: sectionTreePan.y,
+ });
+ },
+ [sectionTreePan.x, sectionTreePan.y],
+ );
+
+ useEffect(() => {
+ const zoomSurface = sectionTreeZoomSurfaceRef.current;
+ if (!zoomSurface) return;
+
+ const handleWheelZoom = (event: WheelEvent): void => {
+ if (event.deltaY === 0) return;
+
+ event.preventDefault();
+ onWheelZoom(event.deltaY < 0 ? "in" : "out");
+ };
+
+ zoomSurface.addEventListener("wheel", handleWheelZoom, {
+ passive: false,
+ });
+
+ return () => {
+ zoomSurface.removeEventListener("wheel", handleWheelZoom);
+ };
+ }, [onWheelZoom]);
+
+ useEffect(() => {
+ if (!sectionTreeDragState) return;
+
+ const handlePanMove = (event: MouseEvent): void => {
+ setSectionTreePan({
+ x:
+ sectionTreeDragState.panStartX +
+ event.clientX -
+ sectionTreeDragState.pointerStartX,
+ y:
+ sectionTreeDragState.panStartY +
+ event.clientY -
+ sectionTreeDragState.pointerStartY,
+ });
+ };
+ const handlePanEnd = (): void => {
+ setSectionTreeDragState(null);
+ };
+
+ window.addEventListener("mousemove", handlePanMove);
+ window.addEventListener("mouseup", handlePanEnd);
+
+ return () => {
+ window.removeEventListener("mousemove", handlePanMove);
+ window.removeEventListener("mouseup", handlePanEnd);
+ };
+ }, [sectionTreeDragState]);
+
+ return (
+
+
+ );
+}
+
+function SectionTreeItem({
+ focusedChunkId,
+ node,
+ xOffset,
+ yOffset,
+ onChunkFocus,
+}: {
+ readonly focusedChunkId: string | null;
+ readonly node: HierarchyPointNode;
+ readonly xOffset: number;
+ readonly yOffset: number;
+ readonly onChunkFocus: (chunkId: string | null) => void;
+}): ReactNode {
+ const itemStyle: CSSProperties = {
+ left: node.y + yOffset,
+ position: "absolute",
+ top: node.x + xOffset - sectionTreeNodeHeight / 2,
+ width: sectionTreeNodeWidth,
+ };
+ const isFocusedChunk =
+ node.data.kind === "chunk" && node.data.chunk?.chunkId === focusedChunkId;
+
+ return (
+ (
+ renderableTree,
+ (node) => (node.children.length > 0 ? [...node.children] : undefined),
+ );
+ const positionedRoot = createD3Tree()
+ .nodeSize([sectionTreeRowGap, sectionTreeColumnGap])(root);
+ const nodes = positionedRoot.descendants();
+ const links = positionedRoot.links();
+ const xPositions = nodes.map((node) => node.x);
+ const yPositions = nodes.map((node) => node.y);
+ const minX = Math.min(...xPositions);
+ const maxX = Math.max(...xPositions);
+ const maxY = Math.max(...yPositions);
+ const width = Math.max(
+ sectionTreeMinimumWidth,
+ maxY +
+ sectionTreePadding.left +
+ sectionTreeNodeWidth +
+ sectionTreePadding.right,
+ );
+ const height = Math.max(
+ sectionTreeMinimumHeight,
+ maxX - minX + sectionTreePadding.top + sectionTreePadding.bottom,
+ );
+
+ return {
+ height,
+ links,
+ nodes,
+ width,
+ xOffset: sectionTreePadding.top - minX,
+ yOffset: sectionTreePadding.left,
+ };
+}
+
+function formatSectionTreeZoomScale(zoomPercent: number): string {
+ return (zoomPercent / 100).toFixed(2).replace(/\.?0+$/, "");
+}
+
+function toRenderableChunkTreeNode(
+ node: ChunkSectionTreeNode,
+): RenderableChunkTreeNode {
+ const sectionChildren = node.children.map(toRenderableChunkTreeNode);
+ const chunkChildren = node.chunks.map((chunk): RenderableChunkTreeNode => ({
+ id: `${node.id}/chunk/${chunk.chunkId}`,
+ kind: "chunk",
+ label: getChunkTreeLabel(chunk),
+ chunk,
+ chunkCount: 1,
+ children: [],
+ }));
+
+ return {
+ id: node.id,
+ kind: node.kind,
+ label: node.label,
+ chunkCount: node.chunkCount,
+ children: [...sectionChildren, ...chunkChildren],
+ };
+}
+
+function getSectionTreeLinkPath(
+ link: HierarchyPointLink,
+ layout: ChunkSectionTreeLayout,
+): string {
+ const sourceX = link.source.x + layout.xOffset;
+ const sourceY = link.source.y + layout.yOffset + sectionTreeNodeWidth;
+ const targetX = link.target.x + layout.xOffset;
+ const targetY = link.target.y + layout.yOffset;
+ const middleY = (sourceY + targetY) / 2;
+
+ return [
+ `M${sourceY},${sourceX}`,
+ `C${middleY},${sourceX}`,
+ `${middleY},${targetX}`,
+ `${targetY},${targetX}`,
+ ].join(" ");
+}
+
+function getTreeItemAriaLabel(node: RenderableChunkTreeNode): string {
+ if (node.kind === "chunk") {
+ return `${node.label} ${getChunkTreeDetail(node.chunk!)}`;
+ }
+ return `${node.label} section with ${formatChunkCount(node.chunkCount)}`;
+}
+
+function getChunkTreeLabel(chunk: ParsedChunkView): string {
+ if (chunk.filePath) {
+ return chunksPanelState.formatReferenceLabel(`[${chunk.filePath}]`);
+ }
+
+ const summary = chunk.summary?.split(/\r?\n/, 1)[0]?.trim();
+ if (summary) return truncateTreeLabel(summary);
+
+ const content = chunk.content.replace(/\s+/g, " ").trim();
+ if (content) return truncateTreeLabel(content);
+
+ return `${getChunkTypeLabel(chunk.type)} chunk`;
+}
+
+function getChunkTreeDetail(chunk: ParsedChunkView): string {
+ const pageLabel = getChunkPageLabel(chunk);
+ return pageLabel
+ ? `${getChunkTypeLabel(chunk.type)} ยท ${pageLabel}`
+ : getChunkTypeLabel(chunk.type);
+}
+
+function getChunkPageLabel(chunk: ParsedChunkView): string | null {
+ const pageNumbers = chunk.pageNums ?? [];
+ const validPageNumbers = pageNumbers.filter(
+ (pageNumber) => Number.isFinite(pageNumber) && pageNumber > 0,
+ );
+ if (validPageNumbers.length === 0) return null;
+
+ const firstPageNumber = Math.min(...validPageNumbers);
+ return `Page ${firstPageNumber}`;
+}
+
+function getChunkTypeLabel(type: ParsedChunkView["type"]): string {
+ if (type === "image") return "Image";
+ if (type === "table") return "Table";
+ return "Text";
+}
+
+function formatChunkCount(chunkCount: number): string {
+ return `${chunkCount} ${chunkCount === 1 ? "chunk" : "chunks"}`;
+}
+
+function truncateTreeLabel(value: string): string {
+ const maxLength = 42;
+ if (value.length <= maxLength) return value;
+ return `${value.slice(0, maxLength - 3).trim()}...`;
+}
+
function EmptySourceUploadState({
onLoginClick,
onSourceUploaded,
diff --git a/src/components/source-original-docx-workflow.test.ts b/src/components/source-original-docx-workflow.test.ts
index 74bb78a..97f0e29 100644
--- a/src/components/source-original-docx-workflow.test.ts
+++ b/src/components/source-original-docx-workflow.test.ts
@@ -77,17 +77,13 @@ describe("useSourceOriginalDocxWorkflow", () => {
expect(document.querySelector("script")).toBeNull()
})
- it("aborts in-flight DOCX requests on cleanup", async () => {
- const signals: AbortSignal[] = []
+ it("leaves shared DOCX requests uncancelled on cleanup", async () => {
+ const signals: Array = []
vi.stubGlobal(
"fetch",
vi.fn((_input, init) => {
- if (init?.signal instanceof AbortSignal) signals.push(init.signal)
- return new Promise((_resolve, reject) => {
- init?.signal?.addEventListener("abort", () => {
- reject(new DOMException("Aborted", "AbortError"))
- })
- })
+ signals.push(init?.signal ?? undefined)
+ return new Promise(() => undefined)
}),
)
@@ -100,7 +96,7 @@ describe("useSourceOriginalDocxWorkflow", () => {
unmount()
- expect(signals[0]?.aborted).toBe(true)
+ expect(signals[0]).toBeUndefined()
})
})
diff --git a/src/components/source-original-preview-request.test.ts b/src/components/source-original-preview-request.test.ts
index f16c708..7bf8c4d 100644
--- a/src/components/source-original-preview-request.test.ts
+++ b/src/components/source-original-preview-request.test.ts
@@ -40,29 +40,25 @@ describe("sourceOriginalPreviewRequest", () => {
expect([...new Uint8Array(data)]).toEqual([1, 2]);
});
- it("passes cancellation signals to the underlying request", async () => {
+ it("does not bind caller cancellation signals to the shared request", async () => {
const fetchSignals: Array = [];
vi.stubGlobal(
"fetch",
vi.fn((_input, init) => {
fetchSignals.push(init?.signal ?? null);
- return new Promise((_resolve, reject) => {
- init?.signal?.addEventListener("abort", () => {
- reject(new DOMException("Aborted", "AbortError"));
- });
- });
+ return Promise.resolve(new Response("hello", { status: 200 }));
}),
);
const controller = new AbortController();
- const request = sourceOriginalPreviewRequest
- .getText("https://example.com/notes.txt", controller.signal)
- .catch(() => undefined);
- await Promise.resolve();
+ const text = await sourceOriginalPreviewRequest.getText(
+ "https://example.com/notes.txt",
+ controller.signal,
+ );
controller.abort();
- await request;
- expect(fetchSignals[0]?.aborted).toBe(true);
+ expect(text).toBe("hello");
+ expect(fetchSignals[0]).toBeNull();
});
it("reuses a warmed binary download for the preview request", async () => {
@@ -83,6 +79,36 @@ describe("sourceOriginalPreviewRequest", () => {
expect(fetchOriginal).toHaveBeenCalledTimes(1);
});
+ it("keeps a shared preview download alive when a warmup caller aborts", async () => {
+ let resolveFetch: (response: Response) => void = () => undefined;
+ const fetchOriginal = vi.fn((_input, init) => {
+ return new Promise((resolve, reject) => {
+ resolveFetch = resolve;
+ init?.signal?.addEventListener("abort", () => {
+ reject(new DOMException("Aborted", "AbortError"));
+ });
+ });
+ });
+ vi.stubGlobal("fetch", fetchOriginal);
+ const warmupController = new AbortController();
+ const previewController = new AbortController();
+
+ sourceOriginalPreviewRequest.prefetchArrayBuffer(
+ "https://example.com/report.pdf",
+ warmupController.signal,
+ );
+ const preview = sourceOriginalPreviewRequest.getArrayBuffer(
+ "https://example.com/report.pdf",
+ previewController.signal,
+ );
+
+ warmupController.abort();
+ resolveFetch(new Response(new Uint8Array([1, 2]), { status: 200 }));
+
+ await expect(preview).resolves.toEqual(new Uint8Array([1, 2]).buffer);
+ expect(fetchOriginal).toHaveBeenCalledTimes(1);
+ });
+
it("returns fresh binary buffers from cached downloads", async () => {
const fetchOriginal = vi.fn(() =>
Promise.resolve(new Response(new Uint8Array([1, 2]), { status: 200 })),
diff --git a/src/components/source-original-preview-request.ts b/src/components/source-original-preview-request.ts
index 994f4c9..1f6cc44 100644
--- a/src/components/source-original-preview-request.ts
+++ b/src/components/source-original-preview-request.ts
@@ -12,8 +12,9 @@ const textCache = new Map>();
const arrayBufferCache = new Map>();
async function getText(url: string, signal: AbortSignal): Promise {
+ assertSignalIsActive(signal);
return getCachedValue(textCache, url, () =>
- Effect.runPromise(getTextEffect(url, signal)),
+ Effect.runPromise(getTextEffect(url)),
);
}
@@ -21,8 +22,9 @@ async function getArrayBuffer(
url: string,
signal: AbortSignal,
): Promise {
+ assertSignalIsActive(signal);
const bytes = await getCachedValue(arrayBufferCache, url, async () =>
- toUint8Array(await Effect.runPromise(getArrayBufferEffect(url, signal))),
+ toUint8Array(await Effect.runPromise(getArrayBufferEffect(url))),
);
return copyArrayBuffer(bytes);
}
@@ -57,8 +59,8 @@ function getCachedValue(
}
const getTextEffect = Effect.fn("getSourceOriginalText")(
- function* (url: string, signal: AbortSignal) {
- const response = yield* fetchSourceOriginal(url, signal, "Text");
+ function* (url: string) {
+ const response = yield* fetchSourceOriginal(url, "Text");
if (!isSuccessfulStatus(response.status)) {
return yield* new SourceOriginalPreviewRequestError({
message: "Text download failed.",
@@ -76,8 +78,8 @@ const getTextEffect = Effect.fn("getSourceOriginalText")(
);
const getArrayBufferEffect = Effect.fn("getSourceOriginalArrayBuffer")(
- function* (url: string, signal: AbortSignal) {
- const response = yield* fetchSourceOriginal(url, signal, "Binary");
+ function* (url: string) {
+ const response = yield* fetchSourceOriginal(url, "Binary");
if (!isSuccessfulStatus(response.status)) {
return yield* new SourceOriginalPreviewRequestError({
message: "Binary download failed.",
@@ -95,9 +97,12 @@ const getArrayBufferEffect = Effect.fn("getSourceOriginalArrayBuffer")(
);
const fetchSourceOriginal = Effect.fn("fetchSourceOriginal")(
- function* (url: string, signal: AbortSignal, label: "Binary" | "Text") {
+ function* (url: string, label: "Binary" | "Text") {
return yield* Effect.tryPromise({
- try: () => fetch(url, { signal }),
+ // Downloads are shared between warmup and visible preview callers.
+ // A caller-owned AbortSignal must not cancel the cached request for all
+ // other consumers.
+ try: () => fetch(url),
catch: () =>
new SourceOriginalPreviewRequestError({
message: `${label} download failed.`,
@@ -117,6 +122,12 @@ function isSuccessfulStatus(status: number): boolean {
return status >= 200 && status < 300;
}
+function assertSignalIsActive(signal: AbortSignal): void {
+ if (signal.aborted) {
+ throw new DOMException("Aborted", "AbortError");
+ }
+}
+
function toUint8Array(data: ArrayBuffer): Uint8Array {
return new Uint8Array(data);
}
diff --git a/src/components/source-original-preview.test.ts b/src/components/source-original-preview.test.ts
index 0ceb1e9..afbd5f9 100644
--- a/src/components/source-original-preview.test.ts
+++ b/src/components/source-original-preview.test.ts
@@ -487,7 +487,7 @@ describe("SourceOriginalPreview", () => {
});
});
- it("aborts text preview downloads when the preview unmounts", async () => {
+ it("leaves shared text preview downloads uncancelled when the preview unmounts", async () => {
const fetchSignals: Array = [];
vi.stubGlobal(
"fetch",
@@ -510,11 +510,10 @@ describe("SourceOriginalPreview", () => {
await waitFor(() => {
expect(fetchSignals).toHaveLength(1);
});
- expect(fetchSignals[0]?.aborted).toBe(false);
unmount();
- expect(fetchSignals[0]?.aborted).toBe(true);
+ expect(fetchSignals[0]).toBeUndefined();
});
it("falls back to download-only for large text previews", () => {
@@ -633,7 +632,7 @@ describe("SourceOriginalPreview", () => {
).toBeTruthy();
});
- it("aborts DOCX preview downloads when the preview unmounts", async () => {
+ it("leaves shared DOCX preview downloads uncancelled when the preview unmounts", async () => {
const fetchSignals: Array = [];
vi.stubGlobal(
"fetch",
@@ -657,11 +656,10 @@ describe("SourceOriginalPreview", () => {
await waitFor(() => {
expect(fetchSignals).toHaveLength(1);
});
- expect(fetchSignals[0]?.aborted).toBe(false);
unmount();
- expect(fetchSignals[0]?.aborted).toBe(true);
+ expect(fetchSignals[0]).toBeUndefined();
});
it("renders DOCX previews without the library fixed page width", async () => {
diff --git a/src/components/source-original-text-preview.test.ts b/src/components/source-original-text-preview.test.ts
index 9d16fe1..195d774 100644
--- a/src/components/source-original-text-preview.test.ts
+++ b/src/components/source-original-text-preview.test.ts
@@ -40,7 +40,7 @@ describe("SourceOriginalTextPreview", () => {
expect(screen.queryByText(/
/)).toBeNull(); }); - it("aborts text downloads when the preview unmounts", async () => { + it("leaves shared text downloads uncancelled when the preview unmounts", async () => { const fetchSignals: Array = [];
vi.stubGlobal(
"fetch",
@@ -65,6 +65,6 @@ describe("SourceOriginalTextPreview", () => {
});
unmount();
- expect(fetchSignals[0]?.aborted).toBe(true);
+ expect(fetchSignals[0]).toBeUndefined();
});
});
diff --git a/src/components/source-original-text-workflow.test.ts b/src/components/source-original-text-workflow.test.ts
index 6c75e65..e0bfdf9 100644
--- a/src/components/source-original-text-workflow.test.ts
+++ b/src/components/source-original-text-workflow.test.ts
@@ -34,17 +34,13 @@ describe("useSourceOriginalTextWorkflow", () => {
expect(screen.getByTestId("text-value").textContent).toBe("Notebook text")
})
- it("aborts in-flight text requests on cleanup", async () => {
- const signals: AbortSignal[] = []
+ it("leaves shared text requests uncancelled on cleanup", async () => {
+ const signals: Array = []
vi.stubGlobal(
"fetch",
vi.fn((_input, init) => {
- if (init?.signal instanceof AbortSignal) signals.push(init.signal)
- return new Promise((_resolve, reject) => {
- init?.signal?.addEventListener("abort", () => {
- reject(new DOMException("Aborted", "AbortError"))
- })
- })
+ signals.push(init?.signal ?? undefined)
+ return new Promise(() => undefined)
}),
)
@@ -59,7 +55,7 @@ describe("useSourceOriginalTextWorkflow", () => {
})
unmount()
- expect(signals[0]?.aborted).toBe(true)
+ expect(signals[0]).toBeUndefined()
})
})
diff --git a/src/components/source-row.test.ts b/src/components/source-row.test.ts
index 2bfc428..fa4e40f 100644
--- a/src/components/source-row.test.ts
+++ b/src/components/source-row.test.ts
@@ -74,4 +74,33 @@ describe("SourceRow", () => {
expect(within(deleteButton).getByRole("status", { name: "Loading" }))
.toBeTruthy();
});
+
+ it("keeps the title truncating while the delete action stays in a trailing column", () => {
+ const { container } = render(
+ React.createElement(SourceRow, {
+ isArchiving: false,
+ isSelected: true,
+ onArchiveClick: vi.fn(),
+ onSelect: vi.fn(),
+ source: {
+ id: "source_1",
+ mimeType: "application/pdf",
+ title: "very-long-quarterly-report-filename.pdf",
+ status: "ready",
+ chunkCount: 3,
+ },
+ }),
+ );
+
+ const row = container.querySelector("[data-testid='source-row']");
+ const deleteButton = screen.getByRole("button", {
+ name: "Delete very-long-quarterly-report-filename.pdf",
+ });
+
+ expect(row?.className).toContain("grid-cols-[auto_minmax(0,1fr)_auto]");
+ expect(
+ screen.getByText("very-long-quarterly-report-filename.pdf").className,
+ ).toContain("truncate");
+ expect(deleteButton.className).toContain("shrink-0");
+ });
});
diff --git a/src/components/source-row.tsx b/src/components/source-row.tsx
index c49654a..3fc2746 100644
--- a/src/components/source-row.tsx
+++ b/src/components/source-row.tsx
@@ -9,6 +9,7 @@ import type { SourceView } from "@/domains/sources/types";
export type SourceRowProps = {
readonly isArchiving: boolean;
+ readonly isNarrow?: boolean;
readonly isSelected: boolean;
readonly onArchiveClick?: (sourceId: string) => void;
readonly onSelect: () => void;
@@ -19,6 +20,7 @@ export type SourceRowProps = {
export function SourceRow({
source,
isSelected,
+ isNarrow = false,
onSelect,
onToggleIncluded,
onArchiveClick,
@@ -32,10 +34,13 @@ export function SourceRow({
return (
+type DesktopSidePanelKey = Exclude
const desktopPanelKeys = ["sources", "chunks", "chat"] as const
@@ -28,11 +31,20 @@ type DesktopPanelResizeInput = {
type WorkspaceShellStateModule = {
readonly desktopPanelGutterWidth: number
+ readonly collapsedDesktopPanelWidth: number
+ readonly desktopSidePanelCompactThreshold: number
readonly minimumDesktopPanelWidths: typeof minimumDesktopPanelWidths
readonly defaultDesktopPanelWidths: typeof defaultDesktopPanelWidths
- readonly getMinimumDesktopPanelWidth: () => number
+ readonly getMinimumDesktopPanelWidth: (
+ currentWidths?: Readonly,
+ ) => number
readonly fitDesktopPanelWidthsToContainer: (
containerWidth: number,
+ currentWidths?: Readonly,
+ ) => DesktopPanelWidths
+ readonly expandDesktopPanelWidth: (
+ currentWidths: Readonly,
+ panel: DesktopSidePanelKey,
) => DesktopPanelWidths
readonly resizeDesktopPanelWidths: (
currentWidths: Readonly,
@@ -40,69 +52,87 @@ type WorkspaceShellStateModule = {
) => DesktopPanelWidths
}
-function getMinimumDesktopPanelWidth(): number {
+function getMinimumDesktopPanelWidth(
+ currentWidths: Readonly = defaultDesktopPanelWidths,
+): number {
return (
- minimumDesktopPanelWidths.sources +
- minimumDesktopPanelWidths.chunks +
- minimumDesktopPanelWidths.chat +
- desktopPanelGutterWidth * 2
+ getMinimumDesktopPanelContentWidth(currentWidths) +
+ getVisibleDesktopPanelGutterCount(currentWidths) * desktopPanelGutterWidth
)
}
-function getDefaultDesktopPanelContentWidth(): number {
- return (
- defaultDesktopPanelWidths.sources +
- defaultDesktopPanelWidths.chunks +
- defaultDesktopPanelWidths.chat
+function getDefaultDesktopPanelContentWidth(
+ currentWidths: Readonly,
+): number {
+ return getVisibleDesktopPanelKeys(currentWidths).reduce(
+ (totalWidth, panel) =>
+ totalWidth + getDefaultDesktopPanelWidth(panel, currentWidths),
+ 0,
)
}
-function getMinimumDesktopPanelContentWidth(): number {
- return (
- minimumDesktopPanelWidths.sources +
- minimumDesktopPanelWidths.chunks +
- minimumDesktopPanelWidths.chat
+function getMinimumDesktopPanelContentWidth(
+ currentWidths: Readonly,
+): number {
+ return getVisibleDesktopPanelKeys(currentWidths).reduce(
+ (totalWidth, panel) =>
+ totalWidth + getMinimumDesktopPanelWidthForPanel(panel, currentWidths),
+ 0,
)
}
function fitDesktopPanelWidthsToContainer(
containerWidth: number,
+ currentWidths: Readonly = defaultDesktopPanelWidths,
): DesktopPanelWidths {
if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
- return { ...defaultDesktopPanelWidths }
+ return getDefaultDesktopPanelWidths(currentWidths)
}
- const availableContentWidth = containerWidth - desktopPanelGutterWidth * 2
- const defaultContentWidth = getDefaultDesktopPanelContentWidth()
+ const visiblePanels = getVisibleDesktopPanelKeys(currentWidths)
+ const availableContentWidth =
+ containerWidth -
+ getVisibleDesktopPanelGutterCount(currentWidths) * desktopPanelGutterWidth
+ const defaultContentWidth = getDefaultDesktopPanelContentWidth(currentWidths)
if (availableContentWidth >= defaultContentWidth) {
- return { ...defaultDesktopPanelWidths }
+ return getDefaultDesktopPanelWidths(currentWidths)
}
- const minimumContentWidth = getMinimumDesktopPanelContentWidth()
+ const minimumContentWidth = getMinimumDesktopPanelContentWidth(currentWidths)
if (availableContentWidth <= minimumContentWidth) {
- return { ...minimumDesktopPanelWidths }
+ return getMinimumDesktopPanelWidths(currentWidths)
}
const defaultExtraWidth = defaultContentWidth - minimumContentWidth
const availableExtraWidth = availableContentWidth - minimumContentWidth
- const fittedWidths = {} as DesktopPanelWidths
+ const fittedWidths = getMinimumDesktopPanelWidths(currentWidths)
+ const flexiblePanels = visiblePanels.filter(
+ (panel) =>
+ getDefaultDesktopPanelWidth(panel, currentWidths) >
+ getMinimumDesktopPanelWidthForPanel(panel, currentWidths),
+ )
let assignedWidth = 0
- for (const [index, panel] of desktopPanelKeys.entries()) {
- const isLastPanel = index === desktopPanelKeys.length - 1
+ for (const [index, panel] of flexiblePanels.entries()) {
+ const isLastPanel = index === flexiblePanels.length - 1
if (isLastPanel) {
- fittedWidths[panel] = availableContentWidth - assignedWidth
+ fittedWidths[panel] =
+ getMinimumDesktopPanelWidthForPanel(panel, currentWidths) +
+ availableExtraWidth -
+ assignedWidth
break
}
const panelExtraWidth =
- defaultDesktopPanelWidths[panel] - minimumDesktopPanelWidths[panel]
+ getDefaultDesktopPanelWidth(panel, currentWidths) -
+ getMinimumDesktopPanelWidthForPanel(panel, currentWidths)
const fittedWidth = Math.round(
- minimumDesktopPanelWidths[panel] +
+ getMinimumDesktopPanelWidthForPanel(panel, currentWidths) +
(panelExtraWidth / defaultExtraWidth) * availableExtraWidth,
)
fittedWidths[panel] = fittedWidth
- assignedWidth += fittedWidth
+ assignedWidth +=
+ fittedWidth - getMinimumDesktopPanelWidthForPanel(panel, currentWidths)
}
return fittedWidths
@@ -128,15 +158,148 @@ function resizeDesktopPanelWidths(
}
}
+function expandDesktopPanelWidth(
+ currentWidths: Readonly,
+ panel: DesktopSidePanelKey,
+): DesktopPanelWidths {
+ if (panel === "sources") {
+ const totalWidth = currentWidths.sources + currentWidths.chunks
+ const expandedWidth = getExpandedSidePanelWidth(panel, totalWidth)
+
+ return {
+ ...currentWidths,
+ sources: expandedWidth,
+ chunks: Math.max(
+ minimumDesktopPanelWidths.chunks,
+ totalWidth - expandedWidth,
+ ),
+ }
+ }
+
+ const totalWidth = currentWidths.chunks + currentWidths.chat
+ const expandedWidth = getExpandedSidePanelWidth(panel, totalWidth)
+
+ return {
+ ...currentWidths,
+ chunks: Math.max(
+ minimumDesktopPanelWidths.chunks,
+ totalWidth - expandedWidth,
+ ),
+ chat: expandedWidth,
+ }
+}
+
+function getExpandedSidePanelWidth(
+ panel: DesktopSidePanelKey,
+ totalWidth: number,
+): number {
+ const preferredWidth = defaultDesktopPanelWidths[panel]
+ const minimumWidth = minimumDesktopPanelWidths[panel]
+ const maximumSideWidth = totalWidth - minimumDesktopPanelWidths.chunks
+
+ if (maximumSideWidth >= preferredWidth) return preferredWidth
+ if (maximumSideWidth >= minimumWidth) return maximumSideWidth
+ return minimumWidth
+}
+
+function getVisibleDesktopPanelKeys(
+ currentWidths: Readonly,
+): DesktopPanelKey[] {
+ return desktopPanelKeys.filter((panel) => {
+ if (panel === "chunks") return true
+ return currentWidths[panel] > 0
+ })
+}
+
+function getVisibleDesktopPanelGutterCount(
+ currentWidths: Readonly,
+): number {
+ return getVisibleDesktopPanelKeys(currentWidths).length - 1
+}
+
+function getDefaultDesktopPanelWidths(
+ currentWidths: Readonly,
+): DesktopPanelWidths {
+ return getDesktopPanelWidthsForVisibility(
+ currentWidths,
+ defaultDesktopPanelWidths,
+ )
+}
+
+function getMinimumDesktopPanelWidths(
+ currentWidths: Readonly,
+): DesktopPanelWidths {
+ return getDesktopPanelWidthsForVisibility(
+ currentWidths,
+ minimumDesktopPanelWidths,
+ )
+}
+
+function getDesktopPanelWidthsForVisibility(
+ currentWidths: Readonly,
+ visibleWidths: Readonly,
+): DesktopPanelWidths {
+ return {
+ sources:
+ isDesktopPanelCollapsed(currentWidths, "sources")
+ ? collapsedDesktopPanelWidth
+ : visibleWidths.sources,
+ chunks: visibleWidths.chunks,
+ chat:
+ isDesktopPanelCollapsed(currentWidths, "chat")
+ ? collapsedDesktopPanelWidth
+ : visibleWidths.chat,
+ }
+}
+
+function getDefaultDesktopPanelWidth(
+ panel: DesktopPanelKey,
+ currentWidths: Readonly,
+): number {
+ if (panel === "sources" || panel === "chat") {
+ if (isDesktopPanelCollapsed(currentWidths, panel)) {
+ return collapsedDesktopPanelWidth
+ }
+ }
+
+ return defaultDesktopPanelWidths[panel]
+}
+
+function getMinimumDesktopPanelWidthForPanel(
+ panel: DesktopPanelKey,
+ currentWidths: Readonly,
+): number {
+ if (panel === "sources" || panel === "chat") {
+ if (isDesktopPanelCollapsed(currentWidths, panel)) {
+ return collapsedDesktopPanelWidth
+ }
+ }
+
+ return minimumDesktopPanelWidths[panel]
+}
+
+function isDesktopPanelCollapsed(
+ currentWidths: Readonly,
+ panel: DesktopSidePanelKey,
+): boolean {
+ return (
+ currentWidths[panel] > 0 &&
+ currentWidths[panel] <= desktopSidePanelCompactThreshold
+ )
+}
+
function clamp(value: number, min: number, max: number): number {
return Math.min(Math.max(value, min), max)
}
export const workspaceShellState: WorkspaceShellStateModule = {
desktopPanelGutterWidth,
+ collapsedDesktopPanelWidth,
+ desktopSidePanelCompactThreshold,
minimumDesktopPanelWidths,
defaultDesktopPanelWidths,
getMinimumDesktopPanelWidth,
fitDesktopPanelWidthsToContainer,
+ expandDesktopPanelWidth,
resizeDesktopPanelWidths,
}
diff --git a/src/components/workspace-shell.test.ts b/src/components/workspace-shell.test.ts
index 4a2609c..8bad459 100644
--- a/src/components/workspace-shell.test.ts
+++ b/src/components/workspace-shell.test.ts
@@ -66,7 +66,7 @@ describe("WorkspaceShell", () => {
);
});
- it("lets desktop users resize neighboring panels without folding below minimum widths", () => {
+ it("lets desktop users resize neighboring panels and collapse sources below the threshold", () => {
render(React.createElement(C, { sources: [] }));
const firstHandle = screen.getByRole("separator", {
@@ -82,13 +82,19 @@ describe("WorkspaceShell", () => {
expect(sourcesPanel.style.width).toBe("470px");
expect(chunksPanel.style.width).toBe("600px");
- fireEvent.pointerDown(firstHandle, { clientX: 120 });
+ const resizedHandle = screen.getByRole("separator", {
+ name: "Resize sources and parsed chunks",
+ });
+ fireEvent.pointerDown(resizedHandle, { clientX: 120 });
fireEvent.pointerMove(window, { clientX: -1000 });
fireEvent.pointerUp(window);
- expect(sourcesPanel.style.width).toBe(
- `${DESKTOP_PANEL_MIN_WIDTHS.sources}px`,
+ expect(screen.getByTestId("desktop-sources-panel").style.width).toBe(
+ "72px",
);
+ expect(
+ screen.getByRole("button", { name: "Show sources panel" }),
+ ).toBeTruthy();
});
it("lets desktop users expand the chat panel by shrinking parsed chunks further", () => {
diff --git a/src/components/workspace-shell.tsx b/src/components/workspace-shell.tsx
index e931cf6..5bab04a 100644
--- a/src/components/workspace-shell.tsx
+++ b/src/components/workspace-shell.tsx
@@ -102,6 +102,7 @@ function WorkspaceShellContent({
minimumDesktopPanelWidth,
handleDesktopLayoutElementChange,
handleDesktopPanelElementChange,
+ handleDesktopPanelExpand,
handleDesktopPanelResize,
handleDesktopPanelResizeEnd,
handleDesktopPanelResizeStart,
@@ -132,6 +133,7 @@ function WorkspaceShellContent({
hasMoreSelectedChunks={citationFocus.hasMoreSelectedChunks}
isCreatingThread={chatWorkflow.isCreatingThread}
isGuest={isGuest}
+ isSelectedAllChunksLoading={citationFocus.isSelectedAllChunksLoading}
isSelectedChunksLoading={citationFocus.isSelectedChunksLoading}
isSelectedChunksLoadingMore={citationFocus.isSelectedChunksLoadingMore}
loadingThreadId={chatWorkflow.loadingThreadId}
@@ -153,9 +155,11 @@ function WorkspaceShellContent({
onCreateChatThread={chatWorkflow.handleCreateChatThread}
onDesktopLayoutElementChange={handleDesktopLayoutElementChange}
onDesktopPanelElementChange={handleDesktopPanelElementChange}
+ onDesktopPanelExpand={handleDesktopPanelExpand}
onDesktopPanelResize={handleDesktopPanelResize}
onDesktopPanelResizeEnd={handleDesktopPanelResizeEnd}
onDesktopPanelResizeStart={handleDesktopPanelResizeStart}
+ onLoadAllChunks={citationFocus.handleLoadAllChunks}
onLoadMoreChunks={citationFocus.handleLoadMoreChunks}
onLoginClick={redirectToLogin}
onMobilePanelChange={setMobilePanel}
+
+ ) : null}
{shouldMountOriginalPreview ? (
+
+
+ {isLoadingAllChunks ? (
+
+ );
+}
+
+function SectionTreeZoomControls({
+ canResetZoom,
+ canZoomIn,
+ canZoomOut,
+ zoomPercent,
+ onZoomIn,
+ onZoomOut,
+ onZoomReset,
+}: {
+ readonly canResetZoom: boolean;
+ readonly canZoomIn: boolean;
+ readonly canZoomOut: boolean;
+ readonly zoomPercent: number;
+ readonly onZoomIn: () => void;
+ readonly onZoomOut: () => void;
+ readonly onZoomReset: () => void;
+}): ReactNode {
+ return (
+
+ Loading complete section tree...
+
+ ) : null}
+
+
+
+
+ {layout.nodes.map((node) => (
+
+
+
+
+
+
+ Zoom out
+
+
+ {zoomPercent}%
+
+
+
+
+
+ Zoom in
+
+
+
+
+
+ Reset zoom
+
+
+
+ {node.data.kind === "chunk" && node.data.chunk ? (
+
+ ) : (
+
+ );
+}
+
+function isInteractiveSectionTreeTarget(target: EventTarget): boolean {
+ return (
+ target instanceof Element &&
+ target.closest("a,button,input,select,textarea,[role='button']") !== null
+ );
+}
+
+function getChunkSectionTreeLayout(
+ sectionTree: ChunkSectionTreeNode,
+): ChunkSectionTreeLayout {
+ const renderableTree = toRenderableChunkTreeNode(sectionTree);
+ const root = hierarchy
+
+ {node.data.label}
+
+
+ {formatChunkCount(node.data.chunkCount)}
+
+
+ )}
+ /)).toBeNull(); }); - it("aborts text downloads when the preview unmounts", async () => { + it("leaves shared text downloads uncancelled when the preview unmounts", async () => { const fetchSignals: Array
{isArchiving ? ( diff --git a/src/components/sources-panel.test.ts b/src/components/sources-panel.test.ts index 16ada98..bf6daae 100644 --- a/src/components/sources-panel.test.ts +++ b/src/components/sources-panel.test.ts @@ -80,6 +80,24 @@ describe("SourcesPanel", () => { ); }); + it("keeps the narrow upload trigger visible as a primary icon button", () => { + render( + React.createElement(C, { + isNarrow: true, + sources: [], + }), + ); + + const uploadButton = screen.getByRole("button", { + name: "Upload Document", + }); + + expect(uploadButton.textContent).toBe(""); + expect(uploadButton.className).toContain("bg-[#8E51FF]"); + expect(uploadButton.className).toContain("px-0"); + expect(uploadButton.querySelector("svg")).toBeTruthy(); + }); + it("keeps upload confirmation controls visible inside the dialog viewport", async () => { const user = userEvent.setup(); diff --git a/src/components/sources-panel.tsx b/src/components/sources-panel.tsx index e947c49..459186b 100644 --- a/src/components/sources-panel.tsx +++ b/src/components/sources-panel.tsx @@ -24,6 +24,7 @@ import { SourceUploadDialog } from "@/components/source-upload-dialog"; import type { SourceView } from "@/domains/sources/types"; export type SourcesPanelProps = { + readonly isNarrow?: boolean; sources: SourceView[]; onSourceUploaded?: (source: SourceView) => void; selectedSourceId?: string | null; @@ -36,6 +37,7 @@ export type SourcesPanelProps = { }; export function SourcesPanel({ + isNarrow = false, sources = [], onSourceUploaded, selectedSourceId = null, @@ -104,23 +106,49 @@ export function SourcesPanel({ -
+
-
- props.onDesktopPanelExpand("chat")}
+ onThreadSelected={(threadId) => {
+ props.onSelectChatThread(threadId)
+ props.onDesktopPanelExpand("chat")
+ }}
+ />
+ ) : (
+
{onLoginClick ? (
+ ) : isNarrow ? (
+ (
+
+ )}
+ />
) : (
-
+