batch4: chats-in-sessions, force-send, /compact, right-rail file browser
Session 1:N Chat data model with backfill. Workspace switches to client-side multi-tab pane management. Right-rail file browser with float-over viewer and click-drag line selection replaces FileBrowserPane. Adds /compact streaming summarizer (respects compact markers in context builder), force-send (cancels in-flight, persists partial as 'cancelled', awaits cancellation completion via deferred Promise + 5s timeout), message queue, stop generation, chat auto-rename, session archive/unarchive with Closed Sessions section on repo landing page. CHECK constraints on sessions.status, messages.role, messages.status with KEEP IN SYNC comments tying to MESSAGE_ROLES / MESSAGE_STATUSES const arrays. Deletes dead pane routes/hook and the api.panes.* client block. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,19 +1,30 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { ChevronDown, Square, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api/client';
|
||||
import { useSessionStream } from '@/hooks/useSessionStream';
|
||||
import { MessageList } from '@/components/MessageList';
|
||||
import { ChatInput } from '@/components/ChatInput';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
interface Props {
|
||||
sessionId: string;
|
||||
chatId: string;
|
||||
projectId: string;
|
||||
sessionChats?: import('@/api/types').Chat[];
|
||||
}
|
||||
|
||||
export function ChatPane({ sessionId }: Props) {
|
||||
export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props) {
|
||||
const stream = useSessionStream(sessionId);
|
||||
const lastErrorRef = useRef<string | null>(null);
|
||||
const [queue, setQueue] = useState<string[]>([]);
|
||||
const processingRef = useRef(false);
|
||||
|
||||
// Surface stream errors via toast — matches Session.tsx behavior.
|
||||
useEffect(() => {
|
||||
if (stream.error && stream.error !== lastErrorRef.current) {
|
||||
lastErrorRef.current = stream.error;
|
||||
@@ -24,16 +35,130 @@ export function ChatPane({ sessionId }: Props) {
|
||||
}
|
||||
}, [stream.error]);
|
||||
|
||||
async function handleSend(content: string) {
|
||||
await api.messages.send(sessionId, content);
|
||||
const chatMessages = stream.messages.filter((m) => m.chat_id === chatId);
|
||||
const streaming = chatMessages.some((m) => m.status === 'streaming');
|
||||
|
||||
// Auto-send next queued message when streaming completes
|
||||
useEffect(() => {
|
||||
if (streaming || queue.length === 0 || processingRef.current) return;
|
||||
processingRef.current = true;
|
||||
const next = queue[0]!;
|
||||
setQueue((prev) => prev.slice(1));
|
||||
api.messages.send(chatId, next)
|
||||
.catch((err) => toast.error(err instanceof Error ? err.message : 'queue send failed'))
|
||||
.finally(() => { processingRef.current = false; });
|
||||
}, [streaming, queue, chatId]);
|
||||
|
||||
const handleSend = useCallback(async (content: string) => {
|
||||
const trimmed = content.trim();
|
||||
if (!trimmed) return;
|
||||
if (trimmed === '/compact') {
|
||||
try {
|
||||
await api.chats.compact(chatId);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'compact failed');
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (streaming) {
|
||||
setQueue((prev) => [...prev, trimmed]);
|
||||
return;
|
||||
}
|
||||
await api.messages.send(chatId, trimmed);
|
||||
}, [chatId, streaming]);
|
||||
|
||||
async function handleStop() {
|
||||
try {
|
||||
await api.chats.stop(chatId);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'stop failed');
|
||||
}
|
||||
}
|
||||
|
||||
const streaming = stream.messages.some((m) => m.status === 'streaming');
|
||||
const handleForceSend = useCallback(async (content: string) => {
|
||||
const trimmed = content.trim();
|
||||
if (!trimmed) return;
|
||||
try {
|
||||
await api.chats.forceSend(chatId, trimmed);
|
||||
setQueue([]);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'force send failed');
|
||||
}
|
||||
}, [chatId]);
|
||||
|
||||
function removeQueued(idx: number) {
|
||||
setQueue((prev) => prev.filter((_, i) => i !== idx));
|
||||
}
|
||||
|
||||
async function forceSendQueued(idx: number) {
|
||||
const msg = queue[idx];
|
||||
if (!msg) return;
|
||||
setQueue((prev) => prev.filter((_, i) => i !== idx));
|
||||
try {
|
||||
await api.chats.forceSend(chatId, msg);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'force send failed');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<MessageList messages={stream.messages} sessionId={sessionId} />
|
||||
<ChatInput disabled={streaming} onSend={handleSend} />
|
||||
<MessageList messages={chatMessages} sessionChats={sessionChats} />
|
||||
|
||||
{/* Queued messages */}
|
||||
{queue.length > 0 && (
|
||||
<div className="px-4 py-1 border-t space-y-1">
|
||||
{queue.map((msg, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded px-2 py-1">
|
||||
<span className="font-medium shrink-0">Queued:</span>
|
||||
<span className="truncate flex-1">{msg}</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="p-0.5 hover:bg-muted rounded shrink-0"
|
||||
aria-label="Queued message options"
|
||||
>
|
||||
<ChevronDown size={12} />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onSelect={() => { /* default: queued, nothing to do */ }}>
|
||||
Send when done
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={() => void forceSendQueued(i)}>
|
||||
Force send now
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeQueued(i)}
|
||||
className="p-0.5 hover:bg-muted rounded shrink-0"
|
||||
aria-label="Cancel queued message"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stop button when streaming */}
|
||||
{streaming && (
|
||||
<div className="flex justify-center py-1 border-t">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleStop()}
|
||||
className="flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Square size={10} className="fill-current" />
|
||||
Stop generating
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ChatInput disabled={false} projectId={projectId} onSend={handleSend} onForceSend={streaming ? handleForceSend : undefined} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import type { KeyboardEvent } from 'react';
|
||||
import { ChevronRight, ChevronDown, FileText, Folder, X } from 'lucide-react';
|
||||
import { Check, ChevronRight, ChevronDown, Copy, FileText, Folder, X } from 'lucide-react';
|
||||
import { codeToHtml } from 'shiki';
|
||||
import { api, ApiError } from '@/api/client';
|
||||
import type {
|
||||
FileBrowserPaneState,
|
||||
@@ -8,7 +9,8 @@ import type {
|
||||
Pane,
|
||||
ViewFileResult,
|
||||
} from '@/api/types';
|
||||
import { CodeBlock } from '@/components/CodeBlock';
|
||||
import { inferLanguage } from '@/lib/attachments';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface Props {
|
||||
@@ -17,49 +19,113 @@ interface Props {
|
||||
onStateChange: (state: FileBrowserPaneState) => void;
|
||||
}
|
||||
|
||||
const LANG_BY_EXT: Record<string, string> = {
|
||||
ts: 'typescript',
|
||||
tsx: 'tsx',
|
||||
js: 'javascript',
|
||||
jsx: 'jsx',
|
||||
mjs: 'javascript',
|
||||
cjs: 'javascript',
|
||||
py: 'python',
|
||||
go: 'go',
|
||||
rs: 'rust',
|
||||
rb: 'ruby',
|
||||
java: 'java',
|
||||
c: 'c',
|
||||
h: 'c',
|
||||
cpp: 'cpp',
|
||||
hpp: 'cpp',
|
||||
cs: 'csharp',
|
||||
php: 'php',
|
||||
sh: 'bash',
|
||||
bash: 'bash',
|
||||
zsh: 'bash',
|
||||
yaml: 'yaml',
|
||||
yml: 'yaml',
|
||||
json: 'json',
|
||||
toml: 'toml',
|
||||
md: 'markdown',
|
||||
markdown: 'markdown',
|
||||
sql: 'sql',
|
||||
dockerfile: 'dockerfile',
|
||||
html: 'html',
|
||||
htm: 'html',
|
||||
css: 'css',
|
||||
scss: 'scss',
|
||||
};
|
||||
const SHIKI_THEME = 'github-dark';
|
||||
|
||||
function deriveLang(filePath: string): string | undefined {
|
||||
// basename
|
||||
const base = filePath.split('/').pop() ?? filePath;
|
||||
if (base.toLowerCase() === 'dockerfile') return 'dockerfile';
|
||||
const dot = base.lastIndexOf('.');
|
||||
if (dot < 0 || dot === base.length - 1) return undefined;
|
||||
const ext = base.slice(dot + 1).toLowerCase();
|
||||
return LANG_BY_EXT[ext];
|
||||
function splitShikiLines(html: string): string[] {
|
||||
const match = html.match(/<code[^>]*>([\s\S]*)<\/code>/);
|
||||
if (!match) return [];
|
||||
const inner = match[1]!;
|
||||
const lines = inner.split(/(?=<span class="line">)/);
|
||||
return lines.filter(l => l.trim().length > 0);
|
||||
}
|
||||
|
||||
interface FileViewerProps {
|
||||
code: string;
|
||||
lang: string | null;
|
||||
selectedLines: Set<number>;
|
||||
onLineClick: (lineNo: number, shiftKey: boolean) => void;
|
||||
}
|
||||
|
||||
function FileViewer({ code, lang, selectedLines, onLineClick }: FileViewerProps) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [lineHtmls, setLineHtmls] = useState<string[] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
if (!lang) {
|
||||
setLineHtmls(null);
|
||||
return;
|
||||
}
|
||||
(async () => {
|
||||
try {
|
||||
const result = await codeToHtml(code, { lang, theme: SHIKI_THEME });
|
||||
if (cancelled) return;
|
||||
const lines = splitShikiLines(result);
|
||||
setLineHtmls(lines.length > 0 ? lines : null);
|
||||
} catch (err) {
|
||||
console.warn('shiki failed', err);
|
||||
if (!cancelled) setLineHtmls(null);
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [code, lang]);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1200);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
const plainLines = code.split('\n');
|
||||
const totalLines = lineHtmls ? lineHtmls.length : plainLines.length;
|
||||
|
||||
return (
|
||||
<div className="text-sm font-mono">
|
||||
<div className="flex items-center justify-between px-2 py-1 border-b text-xs text-muted-foreground">
|
||||
<span className="font-mono">{lang || 'code'}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void copy()}
|
||||
className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-muted text-foreground"
|
||||
aria-label="Copy code"
|
||||
>
|
||||
{copied ? <Check className="size-3" /> : <Copy className="size-3" />}
|
||||
<span>{copied ? 'Copied' : 'Copy'}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
{Array.from({ length: totalLines }, (_, i) => {
|
||||
const lineNo = i + 1;
|
||||
const isSelected = selectedLines.has(lineNo);
|
||||
return (
|
||||
<div
|
||||
key={lineNo}
|
||||
className={cn(
|
||||
'flex',
|
||||
isSelected && 'bg-blue-500/10'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="shrink-0 w-[3ch] text-right pr-2 text-xs text-muted-foreground select-none cursor-pointer hover:text-foreground"
|
||||
style={{ fontVariantNumeric: 'tabular-nums' }}
|
||||
onClick={(e) => onLineClick(lineNo, e.shiftKey)}
|
||||
>
|
||||
{lineNo}
|
||||
</button>
|
||||
{lineHtmls ? (
|
||||
<div
|
||||
className="flex-1 min-w-0 text-xs leading-relaxed [&>.line]:!bg-transparent"
|
||||
// eslint-disable-next-line react/no-danger -- Shiki generates sanitized HTML spans, not user content
|
||||
dangerouslySetInnerHTML={{ __html: lineHtmls[i] ?? '' }}
|
||||
/>
|
||||
) : (
|
||||
<span className="flex-1 min-w-0 text-xs leading-relaxed whitespace-pre">
|
||||
{plainLines[i] ?? ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function basename(path: string): string {
|
||||
@@ -230,6 +296,26 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Full file list fetched once on mount for filter mode (covers unexpanded dirs)
|
||||
const [fullFileList, setFullFileList] = useState<string[] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const result = await api.projects.files(projectId);
|
||||
if (!cancelled) setFullFileList(result.files);
|
||||
} catch {
|
||||
// Silently ignore; filter will fall back to cache-based list
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// Intentionally run once per mount (projectId is stable per pane)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [projectId]);
|
||||
|
||||
// Directory cache: dirPath -> entries
|
||||
const [cache, setCache] = useState<Map<string, FileEntry[]>>(new Map());
|
||||
const [loadingDirs, setLoadingDirs] = useState<Set<string>>(new Set());
|
||||
@@ -380,11 +466,43 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
|
||||
const trimmedFilter = filterDraft.trim();
|
||||
const filterActive = trimmedFilter.length > 0;
|
||||
const filterResults = useMemo<FlatEntry[]>(() => {
|
||||
|
||||
interface FilterResult {
|
||||
path: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const filterResults = useMemo<FilterResult[]>(() => {
|
||||
if (!filterActive) return [];
|
||||
const needle = trimmedFilter.toLowerCase();
|
||||
return flattenedAll.filter((e) => e.path.toLowerCase().includes(needle));
|
||||
}, [filterActive, trimmedFilter, flattenedAll]);
|
||||
|
||||
if (fullFileList !== null) {
|
||||
// Use complete file list from API; rank filename matches above path-only matches
|
||||
const filenameMatches: string[] = [];
|
||||
const pathOnlyMatches: string[] = [];
|
||||
for (const p of fullFileList) {
|
||||
const lp = p.toLowerCase();
|
||||
if (!lp.includes(needle)) continue;
|
||||
const bn = basename(p).toLowerCase();
|
||||
if (bn.includes(needle)) {
|
||||
filenameMatches.push(p);
|
||||
} else {
|
||||
pathOnlyMatches.push(p);
|
||||
}
|
||||
}
|
||||
filenameMatches.sort((a, b) => a.localeCompare(b));
|
||||
pathOnlyMatches.sort((a, b) => a.localeCompare(b));
|
||||
return [...filenameMatches, ...pathOnlyMatches]
|
||||
.slice(0, 50)
|
||||
.map((p) => ({ path: p, name: basename(p) }));
|
||||
}
|
||||
|
||||
// Fallback: use cache-based flat list (only loaded directories, files only)
|
||||
return flattenedAll
|
||||
.filter((e) => e.kind === 'file' && e.path.toLowerCase().includes(needle))
|
||||
.slice(0, 50)
|
||||
.map((e) => ({ path: e.path, name: e.name }));
|
||||
}, [filterActive, trimmedFilter, fullFileList, flattenedAll]);
|
||||
|
||||
// Keyboard navigation
|
||||
const [highlightedPath, setHighlightedPath] = useState<string | null>(null);
|
||||
@@ -401,7 +519,38 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
}, [highlightedPath, filterActive, filterResults, flattenedVisible]);
|
||||
|
||||
function onTreeKeyDown(e: KeyboardEvent<HTMLDivElement>) {
|
||||
const list = filterActive ? filterResults : flattenedVisible;
|
||||
if (filterActive) {
|
||||
if (filterResults.length === 0) return;
|
||||
const idx = highlightedPath
|
||||
? filterResults.findIndex((entry) => entry.path === highlightedPath)
|
||||
: -1;
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
const next = idx < 0 ? 0 : Math.min(filterResults.length - 1, idx + 1);
|
||||
const target = filterResults[next];
|
||||
if (target) setHighlightedPath(target.path);
|
||||
return;
|
||||
}
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
const next = idx <= 0 ? 0 : idx - 1;
|
||||
const target = filterResults[next];
|
||||
if (target) setHighlightedPath(target.path);
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Enter') {
|
||||
if (idx < 0) return;
|
||||
const target = filterResults[idx];
|
||||
if (!target) return;
|
||||
e.preventDefault();
|
||||
// Filter results are always files (API returns only files)
|
||||
selectFile(target.path);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Tree mode: use flattenedVisible which has kind info
|
||||
const list = flattenedVisible;
|
||||
if (list.length === 0) return;
|
||||
const idx = highlightedPath
|
||||
? list.findIndex((entry) => entry.path === highlightedPath)
|
||||
@@ -434,6 +583,31 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
}
|
||||
}
|
||||
|
||||
// Line selection state
|
||||
const [selectedLines, setSelectedLines] = useState<Set<number>>(new Set());
|
||||
const [selectionAnchor, setSelectionAnchor] = useState<number | null>(null);
|
||||
|
||||
function handleLineClick(lineNo: number, shiftKey: boolean) {
|
||||
if (shiftKey && selectionAnchor !== null) {
|
||||
const start = Math.min(selectionAnchor, lineNo);
|
||||
const end = Math.max(selectionAnchor, lineNo);
|
||||
const range = new Set<number>();
|
||||
for (let i = start; i <= end; i++) range.add(i);
|
||||
setSelectedLines(range);
|
||||
} else {
|
||||
setSelectedLines(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(lineNo)) {
|
||||
next.delete(lineNo);
|
||||
} else {
|
||||
next.add(lineNo);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setSelectionAnchor(lineNo);
|
||||
}
|
||||
}
|
||||
|
||||
// Viewer state
|
||||
const [viewer, setViewer] = useState<{
|
||||
path: string;
|
||||
@@ -490,6 +664,45 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
};
|
||||
}, [openFile, projectId]);
|
||||
|
||||
// Clear line selection when open file changes
|
||||
useEffect(() => {
|
||||
setSelectedLines(new Set());
|
||||
setSelectionAnchor(null);
|
||||
}, [openFile]);
|
||||
|
||||
// Compute selection range for the floating action bar (loop avoids call-stack limit on spread)
|
||||
let selectionMin = 0;
|
||||
let selectionMax = 0;
|
||||
if (selectedLines.size > 0) {
|
||||
for (const n of selectedLines) {
|
||||
if (selectionMin === 0 || n < selectionMin) selectionMin = n;
|
||||
if (n > selectionMax) selectionMax = n;
|
||||
}
|
||||
}
|
||||
|
||||
function handleAttachLines() {
|
||||
if (!openFile || !viewer?.result || selectedLines.size === 0) return;
|
||||
const min = selectionMin;
|
||||
const max = selectionMax;
|
||||
const selectedContent = viewer.result.content
|
||||
.split('\n')
|
||||
.slice(min - 1, max)
|
||||
.join('\n');
|
||||
sessionEvents.emit({
|
||||
type: 'attach_chat_file',
|
||||
attachment: {
|
||||
kind: 'lines',
|
||||
filename: openFile,
|
||||
language: inferLanguage(openFile) ?? null,
|
||||
content: selectedContent,
|
||||
range: [min, max],
|
||||
source: 'line-select',
|
||||
},
|
||||
});
|
||||
setSelectedLines(new Set());
|
||||
setSelectionAnchor(null);
|
||||
}
|
||||
|
||||
// Root errors / loading
|
||||
const rootEntries = cache.get('');
|
||||
const rootLoading = loadingDirs.has('') && !rootEntries;
|
||||
@@ -534,8 +747,7 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
</li>
|
||||
) : (
|
||||
filterResults.map((entry) => {
|
||||
const isActive =
|
||||
entry.kind === 'file' && openFile === entry.path;
|
||||
const isActive = openFile === entry.path;
|
||||
const isHighlight = highlightedPath === entry.path;
|
||||
return (
|
||||
<li key={entry.path}>
|
||||
@@ -547,19 +759,14 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
)}
|
||||
onClick={() => {
|
||||
setHighlightedPath(entry.path);
|
||||
if (entry.kind === 'dir') {
|
||||
toggleDir(entry.path);
|
||||
} else {
|
||||
selectFile(entry.path);
|
||||
}
|
||||
selectFile(entry.path);
|
||||
}}
|
||||
>
|
||||
{entry.kind === 'dir' ? (
|
||||
<Folder size={12} className="text-muted-foreground shrink-0" />
|
||||
) : (
|
||||
<FileText size={12} className="text-muted-foreground shrink-0" />
|
||||
)}
|
||||
<span className="truncate">{entry.path}</span>
|
||||
<FileText size={12} className="text-muted-foreground shrink-0" />
|
||||
<span className="truncate">
|
||||
<span className="font-bold">{entry.name}</span>
|
||||
<span className="text-muted-foreground ml-1">{entry.path}</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
@@ -606,7 +813,7 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto relative">
|
||||
{viewer?.state === 'loading' && (
|
||||
<div className="text-xs text-muted-foreground px-2 py-1.5">
|
||||
Loading...
|
||||
@@ -619,12 +826,33 @@ export function FileBrowserPane({ pane, projectId, onStateChange }: Props) {
|
||||
)}
|
||||
{viewer?.state === 'ready' && viewer.result && (
|
||||
<div className="p-2">
|
||||
{selectedLines.size > 0 && (
|
||||
<div className="sticky top-0 z-10 bg-muted border-b border-border flex items-center justify-between px-2 py-1 mb-2 rounded-t">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{selectedLines.size === 1
|
||||
? `Attach line ${selectionMin} to chat`
|
||||
: `Attach lines ${selectionMin}–${selectionMax} to chat`}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs font-medium text-primary hover:underline"
|
||||
onClick={handleAttachLines}
|
||||
>
|
||||
Attach
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{viewer.result.truncated && (
|
||||
<div className="text-[11px] text-muted-foreground mb-1 px-2 py-1 rounded bg-muted/40 border border-border">
|
||||
Showing first {viewer.result.bytes_returned} bytes; file is {viewer.result.total_bytes} bytes total.
|
||||
</div>
|
||||
)}
|
||||
<CodeBlock code={viewer.result.content} lang={deriveLang(openFile)} />
|
||||
<FileViewer
|
||||
code={viewer.result.content}
|
||||
lang={inferLanguage(openFile)}
|
||||
selectedLines={selectedLines}
|
||||
onLineClick={handleLineClick}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user