newpr 0.1.3 → 0.2.0

package/src/web/client/panels/GroupsPanel.tsx

@@ -1,15 +1,15 @@
 import { useState } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import type { FileGroup } from "../../../types/output.ts";
 
-const TYPE_COLORS: Record<string, string> = {
-	feature: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
-	refactor: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
-	bugfix: "bg-red-500/10 text-red-600 dark:text-red-400",
-	chore: "bg-gray-500/10 text-gray-600 dark:text-gray-400",
-	docs: "bg-teal-500/10 text-teal-600 dark:text-teal-400",
-	test: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-	config: "bg-orange-500/10 text-orange-600 dark:text-orange-400",
+const TYPE_DOT: Record<string, string> = {
+	feature: "bg-blue-500",
+	refactor: "bg-purple-500",
+	bugfix: "bg-red-500",
+	chore: "bg-neutral-400",
+	docs: "bg-teal-500",
+	test: "bg-yellow-500",
+	config: "bg-orange-500",
 };
 
 export function GroupsPanel({ groups }: { groups: FileGroup[] }) {
@@ -24,39 +24,48 @@ export function GroupsPanel({ groups }: { groups: FileGroup[] }) {
 	}
 
 	return (
-		<div className="pt-6 divide-y">
-			{groups.map((group, i) => (
-				<div key={group.name}>
-					<button
-						type="button"
-						className="w-full flex items-center gap-3 min-w-0 py-4 text-left hover:bg-accent/30 transition-colors -mx-2 px-2 rounded-md"
-						onClick={() => toggle(i)}
-					>
-						{expanded.has(i) ? (
-							<ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
-						) : (
-							<ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
-						)}
-						<span className="text-sm font-medium flex-1 min-w-0 truncate">{group.name}</span>
-						<span className={`text-xs font-medium px-2 py-0.5 rounded-full shrink-0 ${TYPE_COLORS[group.type] ?? TYPE_COLORS.chore}`}>
-							{group.type}
-						</span>
-						<span className="text-xs text-muted-foreground shrink-0">{group.files.length} files</span>
-					</button>
-					{expanded.has(i) && (
-						<div className="pb-4 pl-8">
-							<p className="text-sm text-muted-foreground mb-3 break-words">{group.description}</p>
-							<div className="space-y-1">
-								{group.files.map((f) => (
-									<div key={f} className="text-xs font-mono text-muted-foreground pl-2 border-l-2 border-border truncate" title={f}>
-										{f}
+		<div className="pt-5">
+			<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-3">
+				{groups.length} groups
+			</div>
+			<div className="space-y-px">
+				{groups.map((group, i) => {
+					const isOpen = expanded.has(i);
+					return (
+						<div key={group.name}>
+							<button
+								type="button"
+								className={`w-full flex items-center gap-2.5 py-2.5 px-2.5 -mx-1 text-left rounded-lg transition-colors ${
+									isOpen ? "bg-accent/50" : "hover:bg-accent/30"
+								}`}
+								onClick={() => toggle(i)}
+							>
+								<ChevronRight className={`h-3 w-3 text-muted-foreground/40 shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`} />
+								<span className={`h-1.5 w-1.5 rounded-full shrink-0 ${TYPE_DOT[group.type] ?? TYPE_DOT.chore}`} />
+								<span className="text-xs font-medium flex-1 min-w-0 truncate">{group.name}</span>
+								<span className="text-[10px] text-muted-foreground/30 shrink-0">{group.type}</span>
+								<span className="text-[10px] text-muted-foreground/30 shrink-0 tabular-nums">{group.files.length}</span>
+							</button>
+							{isOpen && (
+								<div className="pl-[34px] pr-2 pb-3 pt-1">
+									<p className="text-[11px] text-muted-foreground/60 leading-relaxed mb-2.5">{group.description}</p>
+									<div className="space-y-0.5">
+										{group.files.map((f) => (
+											<div
+												key={f}
+												className="text-[11px] font-mono text-muted-foreground/50 truncate py-0.5"
+												title={f}
+											>
+												{f}
+											</div>
+										))}
 									</div>
-								))}
-							</div>
+								</div>
+							)}
 						</div>
-					)}
-				</div>
-			))}
+					);
+				})}
+			</div>
 		</div>
 	);
 }

package/src/web/client/panels/StoryPanel.tsx

@@ -1,5 +1,16 @@
 import type { NewprOutput } from "../../../types/output.ts";
 import { Markdown } from "../components/Markdown.tsx";
+import { ChatMessages } from "../components/ChatSection.tsx";
+
+const TYPE_DOT: Record<string, string> = {
+	feature: "bg-blue-500",
+	refactor: "bg-purple-500",
+	bugfix: "bg-red-500",
+	chore: "bg-neutral-400",
+	docs: "bg-teal-500",
+	test: "bg-yellow-500",
+	config: "bg-orange-500",
+};
 
 export function StoryPanel({
 	data,
@@ -13,42 +24,51 @@ export function StoryPanel({
 	const { summary, groups, narrative } = data;
 
 	return (
-		<div className="pt-4 space-y-5">
-			<div className="space-y-3">
-				<p className="text-xs text-muted-foreground leading-relaxed">{summary.purpose}</p>
-				<div className="grid grid-cols-2 gap-4">
+		<div className="pt-5 space-y-6">
+			<div className="space-y-4">
+				<p className="text-xs text-foreground/80 leading-relaxed">{summary.purpose}</p>
+
+				<div className="grid grid-cols-2 gap-x-6 gap-y-3">
 					<div>
-						<span className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">Scope</span>
-						<p className="text-xs text-muted-foreground mt-0.5">{summary.scope}</p>
+						<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">Scope</div>
+						<p className="text-[11px] text-muted-foreground/70 leading-relaxed">{summary.scope}</p>
 					</div>
 					<div>
-						<span className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">Impact</span>
-						<p className="text-xs text-muted-foreground mt-0.5">{summary.impact}</p>
+						<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">Impact</div>
+						<p className="text-[11px] text-muted-foreground/70 leading-relaxed">{summary.impact}</p>
 					</div>
 				</div>
+
 				<div className="flex flex-wrap gap-1.5">
-					{groups.map((g) => (
-						<button
-							key={g.name}
-							type="button"
-							onClick={() => onAnchorClick("group", g.name)}
-							className={`text-[11px] px-2 py-0.5 rounded-full font-medium transition-colors ${
-								activeId === `group:${g.name}`
-									? "bg-blue-500/20 text-blue-500 dark:text-blue-300 ring-1 ring-blue-500/40"
-									: "bg-muted hover:bg-muted/80"
-							}`}
-						>
-							{g.name}
-						</button>
-					))}
+					{groups.map((g) => {
+						const isActive = activeId === `group:${g.name}`;
+						return (
+							<button
+								key={g.name}
+								type="button"
+								onClick={() => onAnchorClick("group", g.name)}
+								className={`inline-flex items-center gap-1.5 text-[11px] px-2 py-0.5 rounded-md transition-colors ${
+									isActive
+										? "bg-accent text-foreground font-medium"
+										: "text-muted-foreground/60 hover:text-foreground hover:bg-accent/40"
+								}`}
+							>
+								<span className={`h-1.5 w-1.5 rounded-full shrink-0 ${TYPE_DOT[g.type] ?? TYPE_DOT.chore}`} />
+								{g.name}
+							</button>
+						);
+					})}
 				</div>
 			</div>
 
 			<div className="border-t pt-5">
+				<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-4">Walkthrough</div>
 				<Markdown onAnchorClick={onAnchorClick} activeId={activeId}>
 					{narrative}
 				</Markdown>
 			</div>
+
+			<ChatMessages onAnchorClick={onAnchorClick} activeId={activeId} />
 		</div>
 	);
 }

package/src/web/components/ui/tabs.tsx

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
 	<TabsPrimitive.List
 		ref={ref}
 		className={cn(
-			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+			"inline-flex items-center gap-0 border-b border-border -mb-px",
 			className,
 		)}
 		{...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+			"inline-flex items-center justify-center gap-1.5 whitespace-nowrap px-3 pb-2.5 pt-1 text-xs font-medium text-muted-foreground/60 transition-colors hover:text-foreground/80 border-b-2 border-transparent -mb-px data-[state=active]:text-foreground data-[state=active]:border-foreground focus-visible:outline-none",
 			className,
 		)}
 		{...props}
@@ -41,7 +41,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			"mt-0 focus-visible:outline-none",
 			className,
 		)}
 		{...props}