newpr 0.1.1 → 0.2.0

package/src/llm/prompts.ts

@@ -17,6 +17,8 @@ export interface FileSummaryInput {
 export interface PromptContext {
 	commits?: PrCommit[];
 	language?: string;
+	prBody?: string;
+	discussion?: Array<{ author: string; body: string }>;
 }
 
 function langDirective(lang?: string): string {
@@ -24,6 +26,21 @@ function langDirective(lang?: string): string {
 	return `\nCRITICAL LANGUAGE RULE: ALL text values in your response MUST be written in ${lang}. This includes every summary, description, name, purpose, scope, and impact field. JSON keys stay in English, but ALL string values MUST be in ${lang}. Do NOT use English for any descriptive text.`;
 }
 
+function formatDiscussion(ctx?: PromptContext): string {
+	const parts: string[] = [];
+	if (ctx?.prBody?.trim()) {
+		parts.push(`PR Description:\n${ctx.prBody.trim()}`);
+	}
+	if (ctx?.discussion && ctx.discussion.length > 0) {
+		const comments = ctx.discussion
+			.map((c) => `@${c.author}: ${c.body.length > 500 ? `${c.body.slice(0, 500)}…` : c.body}`)
+			.join("\n\n");
+		parts.push(`Discussion (${ctx.discussion.length} comments):\n${comments}`);
+	}
+	if (parts.length === 0) return "";
+	return `\n\n--- PR DISCUSSION ---\n${parts.join("\n\n")}`;
+}
+
 function formatCommitHistory(commits: PrCommit[]): string {
 	if (commits.length === 0) return "";
 	const lines = commits.map((c) => {
@@ -44,13 +61,15 @@ export function buildFileSummaryPrompt(chunks: DiffChunk[], ctx?: PromptContext)
 
 	const commitCtx = ctx?.commits ? formatCommitHistory(ctx.commits) : "";
 
+	const discussionCtx = formatDiscussion(ctx);
+
 	return {
 		system: `You are an expert code reviewer. Analyze the given diff and provide a 1-line summary for each changed file.
-Use the commit history to understand the intent behind each change — why the change was made, not just what changed.
+Use the commit history and PR discussion to understand the intent behind each change — why the change was made, not just what changed.
 Respond ONLY with a JSON array. Each element: {"path": "file/path", "summary": "one line description of what changed"}.
 The "path" value must be the exact file path. The "summary" value is a human-readable description.
 No markdown, no explanation, just the JSON array.${langDirective(ctx?.language)}`,
-		user: `${fileList}${commitCtx}`,
+		user: `${fileList}${commitCtx}${discussionCtx}`,
 	};
 }
 
@@ -61,15 +80,17 @@ export function buildGroupingPrompt(fileSummaries: FileSummaryInput[], ctx?: Pro
 
 	const commitCtx = ctx?.commits ? formatCommitHistory(ctx.commits) : "";
 
+	const discussionCtx = formatDiscussion(ctx);
+
 	return {
 		system: `You are an expert code reviewer. Group the following changed files by their semantic purpose.
 Each group should have a descriptive name, a type (one of: feature, refactor, bugfix, chore, docs, test, config), a description, and a list of file paths.
 A file MAY appear in multiple groups if it serves multiple purposes (e.g., index.ts re-exporting for both a feature and a refactor).
-Use the commit history to understand which changes belong together logically.
+Use the commit history and PR discussion to understand which changes belong together logically.
 Respond ONLY with a JSON array. Each element: {"name": "group name", "type": "feature|refactor|bugfix|chore|docs|test|config", "description": "what this group of changes does", "files": ["path1", "path2"]}.
 The "name" and "description" values are human-readable text. The "type" value must be one of the English keywords listed above. File paths stay as-is.
 Every file must appear in at least one group. No markdown, no explanation, just the JSON array.${langDirective(ctx?.language)}`,
-		user: `Changed files:\n${fileList}${commitCtx}`,
+		user: `Changed files:\n${fileList}${commitCtx}${discussionCtx}`,
 	};
 }
 
@@ -86,13 +107,15 @@ export function buildOverallSummaryPrompt(
 	const fileList = fileSummaries.map((f) => `- ${f.path}: ${f.summary}`).join("\n");
 	const commitCtx = ctx?.commits ? formatCommitHistory(ctx.commits) : "";
 
+	const discussionCtx = formatDiscussion(ctx);
+
 	return {
 		system: `You are an expert code reviewer. Provide an overall summary of this Pull Request.
-Use the commit history to understand the development progression and intent.
+Use the commit history and PR discussion to understand the development progression and intent. The PR description and reviewer comments provide essential context about why changes were made.
 Respond ONLY with a JSON object: {"purpose": "why this PR exists (1-2 sentences)", "scope": "what areas of code are affected", "impact": "what is the impact of these changes", "risk_level": "low|medium|high"}.
 The "purpose", "scope", and "impact" values are human-readable text. The "risk_level" must be one of: low, medium, high (in English).
 No markdown, no explanation, just the JSON object.${langDirective(ctx?.language)}`,
-		user: `PR Title: ${prTitle}\n\nChange Groups:\n${groupList}\n\nFile Summaries:\n${fileList}${commitCtx}`,
+		user: `PR Title: ${prTitle}\n\nChange Groups:\n${groupList}\n\nFile Summaries:\n${fileList}${commitCtx}${discussionCtx}`,
 	};
 }
 
@@ -109,17 +132,19 @@ export function buildNarrativePrompt(
 	const commitCtx = ctx?.commits ? formatCommitHistory(ctx.commits) : "";
 	const lang = ctx?.language && ctx.language !== "English" ? ctx.language : null;
 
+	const discussionCtx = formatDiscussion(ctx);
+
 	return {
 		system: `You are an expert code reviewer writing a review walkthrough for other developers.
 Write a clear, concise narrative that tells the "story" of this PR — what changes were made and in what logical order.
-Use the commit history to understand the development progression: which changes came first, how the PR evolved, and the intent behind each step.
+Use the commit history and PR discussion to understand the development progression: which changes came first, how the PR evolved, and the intent behind each step. The PR description often explains the author's motivation and approach.
 Use markdown formatting. Write 2-5 paragraphs. Do NOT use JSON. Write natural prose.
 ${lang ? `CRITICAL: Write the ENTIRE narrative in ${lang}. Every sentence must be in ${lang}. Do NOT use English except for code identifiers, file paths, and [[group:...]]/[[file:...]] tokens.` : "If the PR title is in a non-English language, write the narrative in that same language."}
 
 IMPORTANT: When referencing a change group, wrap it as [[group:Group Name]]. When referencing a specific file, wrap it as [[file:path/to/file.ts]].
 Use the EXACT group names and file paths provided. Every group MUST be referenced at least once. Reference key files where relevant.
 Example: "The [[group:Auth Flow]] group introduces session management via [[file:src/auth/session.ts]] and [[file:src/auth/token.ts]]."`,
-		user: `PR Title: ${prTitle}\n\nSummary:\n- Purpose: ${summary.purpose}\n- Scope: ${summary.scope}\n- Impact: ${summary.impact}\n- Risk: ${summary.risk_level}\n\nChange Groups:\n${groupDetails}${commitCtx}`,
+		user: `PR Title: ${prTitle}\n\nSummary:\n- Purpose: ${summary.purpose}\n- Scope: ${summary.scope}\n- Impact: ${summary.impact}\n- Risk: ${summary.risk_level}\n\nChange Groups:\n${groupDetails}${commitCtx}${discussionCtx}`,
 	};
 }
 

package/src/tui/Shell.tsx

@@ -7,7 +7,7 @@ import type { SessionRecord } from "../history/types.ts";
 import type { AgentToolName } from "../workspace/types.ts";
 import { parsePrInput } from "../github/parse-pr.ts";
 import { analyzePr } from "../analyzer/pipeline.ts";
-import { saveSession, listSessions, loadSession } from "../history/store.ts";
+import { saveSession, savePatchesSidecar, listSessions, loadSession } from "../history/store.ts";
 import { detectAgents } from "../workspace/agent.ts";
 import { App } from "./App.tsx";
 import { InputBar } from "./InputBar.tsx";
@@ -94,10 +94,12 @@ export function Shell({ token, config: initialConfig, initialPr }: ShellProps) {
 				setState({ phase: "loading", steps: [], startTime });
 				setElapsed(0);
 
+				let capturedPatches: Record<string, string> = {};
 				const result = await analyzePr({
 					pr,
 					token,
 					config: liveConfig,
+					onFilePatches: (patches) => { capturedPatches = patches; },
 					onProgress: (event: ProgressEvent) => {
 						const stamped = { ...event, timestamp: event.timestamp ?? Date.now() };
 						const prev = eventsRef.current;
@@ -117,7 +119,10 @@ export function Shell({ token, config: initialConfig, initialPr }: ShellProps) {
 					},
 				});
 
-				await saveSession(result);
+				const record = await saveSession(result);
+				if (Object.keys(capturedPatches).length > 0) {
+					await savePatchesSidecar(record.id, capturedPatches).catch(() => {});
+				}
 				const updated = await listSessions(10);
 				setSessions(updated);
 

package/src/types/github.ts

@@ -12,9 +12,20 @@ export interface PrCommit {
 	files: string[];
 }
 
+export interface PrComment {
+	id: number;
+	author: string;
+	author_avatar?: string;
+	body: string;
+	created_at: string;
+	updated_at: string;
+	html_url: string;
+}
+
 export interface GithubPrData {
 	number: number;
 	title: string;
+	body: string;
 	url: string;
 	base_branch: string;
 	head_branch: string;

package/src/types/output.ts

@@ -14,6 +14,7 @@ export type RiskLevel = "low" | "medium" | "high";
 export interface PrMeta {
 	pr_number: number;
 	pr_title: string;
+	pr_body?: string;
 	pr_url: string;
 	base_branch: string;
 	head_branch: string;
@@ -50,10 +51,60 @@ export interface FileChange {
 	groups: string[];
 }
 
+export interface CartoonImage {
+	imageBase64: string;
+	mimeType: string;
+	generatedAt: string;
+}
+
+export interface DiffComment {
+	id: string;
+	sessionId: string;
+	filePath: string;
+	line: number;
+	startLine?: number;
+	side: "old" | "new";
+	body: string;
+	author: string;
+	authorAvatar?: string;
+	createdAt: string;
+	githubUrl?: string;
+	githubCommentId?: number;
+}
+
+export interface PendingComment {
+	tempId: string;
+	filePath: string;
+	line: number;
+	side: "old" | "new";
+	body: string;
+}
+
+export interface ChatToolCall {
+	id: string;
+	name: string;
+	arguments: Record<string, unknown>;
+	result?: string;
+}
+
+export type ChatSegment =
+	| { type: "text"; content: string }
+	| { type: "tool_call"; toolCall: ChatToolCall };
+
+export interface ChatMessage {
+	role: "user" | "assistant" | "tool";
+	content: string;
+	toolCalls?: ChatToolCall[];
+	segments?: ChatSegment[];
+	toolCallId?: string;
+	timestamp: string;
+}
+
 export interface NewprOutput {
 	meta: PrMeta;
 	summary: PrSummary;
 	groups: FileGroup[];
 	files: FileChange[];
 	narrative: string;
+	cartoon?: CartoonImage;
 }

package/src/web/client/App.tsx

@@ -3,12 +3,15 @@ import { useAnalysis } from "./hooks/useAnalysis.ts";
 import { useTheme } from "./hooks/useTheme.ts";
 import { useSessions } from "./hooks/useSessions.ts";
 import { useGithubUser } from "./hooks/useGithubUser.ts";
+import { useFeatures } from "./hooks/useFeatures.ts";
 import { AppShell } from "./components/AppShell.tsx";
 import { InputScreen } from "./components/InputScreen.tsx";
 import { LoadingTimeline } from "./components/LoadingTimeline.tsx";
 import { ResultsScreen } from "./components/ResultsScreen.tsx";
 import { ErrorScreen } from "./components/ErrorScreen.tsx";
 import { DetailPane, resolveDetail } from "./components/DetailPane.tsx";
+import { useChatState, ChatProvider, ChatInput } from "./components/ChatSection.tsx";
+import type { AnchorItem } from "./components/TipTapEditor.tsx";
 
 function getUrlParam(key: string): string | null {
 	return new URLSearchParams(window.location.search).get(key);
@@ -31,6 +34,7 @@ export function App() {
 	const themeCtx = useTheme();
 	const { sessions, refresh: refreshSessions } = useSessions();
 	const githubUser = useGithubUser();
+	const features = useFeatures();
 	const initialLoadDone = useRef(false);
 	const [activeId, setActiveId] = useState<string | null>(null);
 
@@ -78,11 +82,28 @@ export function App() {
 		analysis.reset();
 	}
 
+	const diffSessionId = analysis.historyId ?? analysis.sessionId;
+	const prUrl = analysis.result?.meta.pr_url;
 	const detailPanel = detailTarget ? (
-		<DetailPane target={detailTarget} onClose={() => setActiveId(null)} />
+		<DetailPane target={detailTarget} sessionId={diffSessionId} prUrl={prUrl} onClose={() => setActiveId(null)} />
 	) : null;
 
+	const chatState = useChatState(analysis.phase === "done" ? diffSessionId : null);
+
+	const anchorItems = useMemo<AnchorItem[]>(() => {
+		if (!analysis.result) return [];
+		const items: AnchorItem[] = [];
+		for (const g of analysis.result.groups) {
+			items.push({ kind: "group", id: g.name, label: g.name });
+		}
+		for (const f of analysis.result.files) {
+			items.push({ kind: "file", id: f.path, label: f.path });
+		}
+		return items;
+	}, [analysis.result]);
+
 	return (
+		<ChatProvider state={chatState} anchorItems={anchorItems}>
 		<AppShell
 			theme={themeCtx.theme}
 			onThemeChange={themeCtx.setTheme}
@@ -91,9 +112,15 @@ export function App() {
 			onSessionSelect={handleSessionSelect}
 			onNewAnalysis={handleNewAnalysis}
 			detailPanel={detailPanel}
+			bottomBar={analysis.phase === "done" ? <ChatInput /> : undefined}
+			activeSessionId={diffSessionId}
 		>
 			{analysis.phase === "idle" && (
-				<InputScreen onSubmit={(pr) => analysis.start(pr)} />
+				<InputScreen
+					onSubmit={(pr) => analysis.start(pr)}
+					sessions={sessions}
+					onSessionSelect={handleSessionSelect}
+				/>
 			)}
 			{analysis.phase === "loading" && (
 				<LoadingTimeline
@@ -107,6 +134,8 @@ export function App() {
 					onBack={handleNewAnalysis}
 					activeId={activeId}
 					onAnchorClick={handleAnchorClick}
+					cartoonEnabled={features.cartoon}
+					sessionId={diffSessionId}
 				/>
 			)}
 			{analysis.phase === "error" && (
@@ -117,5 +146,6 @@ export function App() {
 				/>
 			)}
 		</AppShell>
+		</ChatProvider>
 	);
 }

package/src/web/client/components/AppShell.tsx

@@ -1,5 +1,5 @@
-import { useState, useCallback } from "react";
-import { Sun, Moon, Monitor, Plus, Clock, Settings } from "lucide-react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { Sun, Moon, Monitor, Plus, Settings, ArrowUp } from "lucide-react";
 import type { SessionRecord } from "../../../history/types.ts";
 import type { GithubUser } from "../hooks/useGithubUser.ts";
 import { SettingsPanel } from "./SettingsPanel.tsx";
@@ -13,9 +13,9 @@ const THEME_ICON = { light: Sun, dark: Moon, system: Monitor };
 const LEFT_MIN = 180;
 const LEFT_MAX = 400;
 const LEFT_DEFAULT = 256;
-const RIGHT_MIN = 240;
-const RIGHT_MAX = 520;
-const RIGHT_DEFAULT = 320;
+const RIGHT_MIN = 400;
+const RIGHT_MAX = 1200;
+const RIGHT_DEFAULT = 560;
 
 const RISK_DOT: Record<string, string> = {
 	low: "bg-green-500",
@@ -43,6 +43,8 @@ export function AppShell({
 	onSessionSelect,
 	onNewAnalysis,
 	detailPanel,
+	bottomBar,
+	activeSessionId,
 	children,
 }: {
 	theme: Theme;
@@ -52,11 +54,27 @@ export function AppShell({
 	onSessionSelect: (sessionId: string) => void;
 	onNewAnalysis: () => void;
 	detailPanel?: React.ReactNode;
+	bottomBar?: React.ReactNode;
+	activeSessionId?: string | null;
 	children: React.ReactNode;
 }) {
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [leftWidth, setLeftWidth] = useState(LEFT_DEFAULT);
 	const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
+	const [showScrollTop, setShowScrollTop] = useState(false);
+	const mainRef = useRef<HTMLElement>(null);
+	const prevDetailPanel = useRef(detailPanel);
+
+	useEffect(() => {
+		const wasNull = prevDetailPanel.current == null;
+		prevDetailPanel.current = detailPanel;
+		if (wasNull && detailPanel != null) {
+			const available = window.innerWidth - leftWidth - 2;
+			const half = Math.floor(available * 0.55);
+			setRightWidth(Math.min(RIGHT_MAX, Math.max(RIGHT_MIN, half)));
+		}
+	}, [detailPanel, leftWidth]);
+
 	const Icon = THEME_ICON[theme];
 	const next = THEME_CYCLE[(THEME_CYCLE.indexOf(theme) + 1) % THEME_CYCLE.length]!;
 
@@ -64,104 +82,122 @@ export function AppShell({
 		setLeftWidth((w) => Math.min(LEFT_MAX, Math.max(LEFT_MIN, w + delta)));
 	}, []);
 
+	const CENTER_MIN = 400;
+
 	const handleRightResize = useCallback((delta: number) => {
-		setRightWidth((w) => Math.min(RIGHT_MAX, Math.max(RIGHT_MIN, w + delta)));
+		setRightWidth((w) => {
+			const available = window.innerWidth - leftWidth - 2;
+			const max = Math.min(RIGHT_MAX, available - CENTER_MIN);
+			return Math.min(max, Math.max(RIGHT_MIN, w + delta));
+		});
+	}, [leftWidth]);
+
+	useEffect(() => {
+		const el = mainRef.current;
+		if (!el) return;
+		const onScroll = () => setShowScrollTop(el.scrollTop > 300);
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => el.removeEventListener("scroll", onScroll);
+	}, []);
+
+	const scrollToTop = useCallback(() => {
+		mainRef.current?.scrollTo({ top: 0, behavior: "smooth" });
 	}, []);
 
 	return (
 		<div className="flex h-screen bg-background overflow-hidden">
 			<aside className="flex flex-col shrink-0 border-r bg-background" style={{ width: leftWidth }}>
-				<div className="flex h-14 items-center justify-between px-4 border-b">
+				<div className="flex h-12 items-center justify-between px-4 shrink-0">
 					<button
 						type="button"
 						onClick={onNewAnalysis}
-						className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+						className="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
 					>
-						<span className="text-sm font-semibold tracking-tight">newpr</span>
-						<span className="text-[10px] text-muted-foreground">v0.1.0</span>
+						<span className="text-xs font-semibold tracking-tight font-mono">newpr</span>
 					</button>
 					<button
 						type="button"
 						onClick={onNewAnalysis}
-						className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+						className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/50 hover:bg-accent hover:text-foreground transition-colors"
 						title="New analysis"
 					>
-						<Plus className="h-4 w-4" />
+						<Plus className="h-3.5 w-3.5" />
 					</button>
 				</div>
 
-				<div className="flex-1 overflow-y-auto">
-					{sessions.length > 0 && (
-						<div className="px-2 py-3">
-							<div className="px-2 pb-2 text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
-								Recent
-							</div>
-							<div className="space-y-0.5">
-								{sessions.map((s) => (
+				<div className="flex-1 overflow-y-auto px-2">
+					{sessions.length > 0 ? (
+						<div className="space-y-px">
+							{sessions.map((s) => {
+								const isActive = activeSessionId === s.id;
+								return (
 									<button
 										key={s.id}
 										type="button"
 										onClick={() => onSessionSelect(s.id)}
-										className="w-full flex items-start gap-2.5 rounded-md px-2 py-2 text-left hover:bg-accent/50 transition-colors group"
+										className={`w-full flex items-start gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors group ${
+											isActive
+												? "bg-accent text-foreground"
+												: "hover:bg-accent/40"
+										}`}
 									>
-										<span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
+										<span className={`mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
 										<div className="flex-1 min-w-0">
-											<div className="text-sm truncate group-hover:text-foreground transition-colors">
+											<div className={`text-xs truncate leading-tight ${isActive ? "font-medium" : "text-foreground/80 group-hover:text-foreground"} transition-colors`}>
 												{s.pr_title}
 											</div>
-											<div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground">
-												<span className="truncate">{s.repo.split("/").pop()}</span>
-												<span>#{s.pr_number}</span>
-												<span className="text-muted-foreground/50">·</span>
-												<Clock className="h-2.5 w-2.5" />
+											<div className="flex items-center gap-1 mt-1 text-[10px] text-muted-foreground/50">
+												<span className="font-mono truncate">{s.repo.split("/").pop()}</span>
+												<span className="font-mono">#{s.pr_number}</span>
+												<span className="text-muted-foreground/20 mx-0.5">·</span>
 												<span>{formatTimeAgo(s.analyzed_at)}</span>
 											</div>
 										</div>
 									</button>
-								))}
-							</div>
+								);
+							})}
+						</div>
+					) : (
+						<div className="flex flex-col items-center justify-center h-full text-center px-4 gap-2 opacity-40">
+							<p className="text-[11px] text-muted-foreground">No analyses yet</p>
 						</div>
 					)}
 				</div>
 
-				<div className="border-t px-3 py-3 space-y-2">
+				<div className="shrink-0 border-t px-2 py-2 space-y-1">
 					{githubUser && (
 						<a
 							href={githubUser.html_url}
 							target="_blank"
 							rel="noopener noreferrer"
-							className="flex items-center gap-2.5 rounded-md px-1.5 py-1.5 hover:bg-accent/50 transition-colors"
+							className="flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-accent/40 transition-colors"
 						>
 							<img
 								src={githubUser.avatar_url}
 								alt={githubUser.login}
-								className="h-6 w-6 rounded-full"
+								className="h-5 w-5 rounded-full"
 							/>
-							<div className="flex-1 min-w-0">
-								<div className="text-xs font-medium truncate">{githubUser.name ?? githubUser.login}</div>
-								{githubUser.name && (
-									<div className="text-[10px] text-muted-foreground truncate">@{githubUser.login}</div>
-								)}
-							</div>
+							<span className="text-[11px] font-medium truncate flex-1">{githubUser.name ?? githubUser.login}</span>
 						</a>
 					)}
-					<div className="flex items-center justify-between px-1.5">
+					<div className="flex items-center gap-1 px-1">
 						<button
 							type="button"
 							onClick={() => onThemeChange(next)}
-							className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+							className="flex items-center gap-1.5 px-1.5 py-1 rounded-md text-[11px] text-muted-foreground/50 hover:text-foreground hover:bg-accent/40 transition-colors"
 							title={`Switch to ${next} mode`}
 						>
-							<Icon className="h-3.5 w-3.5" />
+							<Icon className="h-3 w-3" />
 							<span className="capitalize">{theme}</span>
 						</button>
+						<div className="flex-1" />
 						<button
 							type="button"
 							onClick={() => setSettingsOpen(true)}
-							className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+							className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/40 hover:bg-accent/40 hover:text-foreground transition-colors"
 							title="Settings"
 						>
-							<Settings className="h-3.5 w-3.5" />
+							<Settings className="h-3 w-3" />
 						</button>
 					</div>
 				</div>
@@ -169,12 +205,23 @@ export function AppShell({
 
 			<ResizeHandle onResize={handleLeftResize} side="right" />
 
-			<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-				<main className="flex-1 overflow-y-auto">
-					<div className="mx-auto max-w-4xl px-10 py-10">
+			<div className="flex-1 flex flex-col overflow-hidden relative" style={{ minWidth: 400 }}>
+				<main ref={mainRef} className="flex-1 overflow-y-auto">
+					<div className="mx-auto max-w-5xl px-10 py-10">
 						{children}
 					</div>
 				</main>
+				{bottomBar}
+				{showScrollTop && (
+					<button
+						type="button"
+						onClick={scrollToTop}
+						className="absolute bottom-3 right-4 z-20 flex h-8 w-8 items-center justify-center rounded-full border bg-background shadow-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+						style={{ bottom: bottomBar ? 76 : 12 }}
+					>
+						<ArrowUp className="h-3.5 w-3.5" />
+					</button>
+				)}
 			</div>
 
 			{detailPanel && (