Bring OpenCode theme presets into the UI foundation

frontend/components.json

@@ -1,14 +1,15 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "rsc": false,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "src/index.css",
     "baseColor": "slate",
     "cssVariables": true
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",

frontend/package.json

@@ -43,12 +43,14 @@
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.65.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.7.2",
     "react-router-dom": "^7.13.0",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
+    "vaul": "^1.1.2",
     "zod": "^4.1.12",
     "zustand": "^5.0.8"
   },

frontend/src/components/file-browser/FileDiffView.tsx

@@ -93,25 +93,25 @@ const statusConfig: Record<
   modified: {
     icon: FileEdit,
     color: GIT_STATUS_COLORS.modified,
-    bgColor: "bg-amber-500/10",
+    bgColor: "bg-warning/10",
     label: GIT_STATUS_LABELS.modified,
   },
   added: {
     icon: FilePlus,
     color: GIT_STATUS_COLORS.added,
-    bgColor: "bg-emerald-500/10",
+    bgColor: "bg-success/10",
     label: GIT_STATUS_LABELS.added,
   },
   deleted: {
     icon: FileX,
     color: GIT_STATUS_COLORS.deleted,
-    bgColor: "bg-rose-500/10",
+    bgColor: "bg-destructive/10",
     label: GIT_STATUS_LABELS.deleted,
   },
   renamed: {
     icon: FileText,
     color: GIT_STATUS_COLORS.renamed,
-    bgColor: "bg-blue-500/10",
+    bgColor: "bg-info/10",
     label: GIT_STATUS_LABELS.renamed,
   },
   untracked: {
@@ -123,7 +123,7 @@ const statusConfig: Record<
   copied: {
     icon: FileText,
     color: GIT_STATUS_COLORS.copied,
-    bgColor: "bg-emerald-500/10",
+    bgColor: "bg-success/10",
     label: GIT_STATUS_LABELS.copied,
   },
 };
@@ -155,31 +155,31 @@ function DiffLineComponent({
 
   const bgClass =
     line.type === "add"
-      ? "bg-emerald-500/10"
+      ? "bg-success/10"
       : line.type === "remove"
-        ? "bg-rose-500/10"
+        ? "bg-destructive/10"
         : "";
 
   const textClass =
     line.type === "add"
-      ? "text-emerald-700 dark:text-emerald-300"
+      ? "text-success"
       : line.type === "remove"
-        ? "text-rose-700 dark:text-rose-300"
+        ? "text-destructive"
         : "text-foreground";
 
   const lineNumber = line.newLineNumber ?? line.oldLineNumber;
   const isClickable = onLineClick && lineNumber !== undefined;
 
   return (
     <div
-      className={cn(
-        "flex font-mono text-sm border-l-2 transition-colors min-w-0",
-        bgClass,
-        line.type === "add" && "border-l-emerald-500",
-        line.type === "remove" && "border-l-rose-500",
-        line.type === "context" && "border-l-transparent",
-        isClickable && "cursor-pointer hover:bg-accent/30",
-      )}
+        className={cn(
+          "flex font-mono text-sm border-l-2 transition-colors min-w-0",
+          bgClass,
+          line.type === "add" && "border-l-success",
+          line.type === "remove" && "border-l-destructive",
+          line.type === "context" && "border-l-transparent",
+          isClickable && "cursor-pointer hover:bg-accent/30",
+        )}
       onClick={() =>
         isClickable && lineNumber !== undefined && onLineClick(lineNumber)
       }
@@ -196,10 +196,10 @@ function DiffLineComponent({
       )}
       <div className="w-6 flex-shrink-0 flex items-center justify-center bg-muted/20">
         {line.type === "add" && (
-          <Plus className="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
+          <Plus className="w-3 h-3 text-success" />
         )}
         {line.type === "remove" && (
-          <Minus className="w-3 h-3 text-rose-600 dark:text-rose-400" />
+          <Minus className="w-3 h-3 text-destructive" />
         )}
       </div>
       <pre
@@ -325,8 +325,8 @@ export function FileDiffView({
           </span>
           {!diffData.isBinary && (
             <>
-              <span className="text-green-500">+{diffData.additions}</span>
-              <span className="text-red-500">-{diffData.deletions}</span>
+              <span className="text-success">+{diffData.additions}</span>
+              <span className="text-destructive">-{diffData.deletions}</span>
             </>
           )}
           {diffData.diff && (

frontend/src/components/file-browser/FilePreview.tsx

@@ -282,7 +282,7 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
               return (
                 <div 
                   key={index}
-                  className={`flex transition-colors duration-300 ${isHighlighted ? 'bg-yellow-500/30' : ''}`}
+                  className={`flex transition-colors duration-300 ${isHighlighted ? 'bg-warning/20' : ''}`}
                   style={{ minHeight: '20px', lineHeight: '20px' }}
                 >
                   <span className="w-12 flex-shrink-0 text-right pr-3 text-muted-foreground select-none border-r border-border/50 text-xs">
@@ -342,10 +342,10 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
                 <span className="truncate flex-shrink-0">{formatFileSize(file.size)}</span>
                 <span className="hidden sm:inline truncate flex-shrink-0">{formatDate(file.lastModified)}</span>
                 {shouldVirtualize && (
-                  <span className="text-xs text-blue-500 flex-shrink-0">Virtualized</span>
+                  <span className="text-xs text-info flex-shrink-0">Virtualized</span>
                 )}
                 {hasVirtualizedChanges && (
-                  <span className="text-xs text-yellow-500 flex-shrink-0">Unsaved changes</span>
+                  <span className="text-xs text-warning flex-shrink-0">Unsaved changes</span>
                 )}
               </div>
             </div>
@@ -382,7 +382,7 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
               )}
 
               {showSaveButton && (
-                <Button variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); e.preventDefault(); if (shouldVirtualize) { handleVirtualizedSaveClick(); } else { handleSave(); } }} disabled={isSaving || (shouldVirtualize && !hasVirtualizedChanges)} className="border-green-600 bg-green-600/10 text-green-600 hover:bg-green-600/20 h-7 w-7 p-0">
+                <Button variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); e.preventDefault(); if (shouldVirtualize) { handleVirtualizedSaveClick(); } else { handleSave(); } }} disabled={isSaving || (shouldVirtualize && !hasVirtualizedChanges)} className="h-7 w-7 border-success/30 bg-success/10 p-0 text-success hover:bg-success/20">
                   <Save className="w-3 h-3" />
                 </Button>
               )}

frontend/src/components/file-browser/FileTree.tsx

@@ -200,7 +200,7 @@ function TreeNode({ file, level, onFileSelect, onDirectoryClick, selectedFile, o
               <Edit3 className="w-4 h-4 mr-2" />
               Rename
             </DropdownMenuItem>
-            <DropdownMenuItem onClick={handleDelete} className="text-red-600">
+            <DropdownMenuItem onClick={handleDelete} className="text-destructive">
               <Trash2 className="w-4 h-4 mr-2" />
               Delete
             </DropdownMenuItem>

frontend/src/components/memory/MemoryList.tsx

@@ -17,9 +17,9 @@ interface MemoryListProps {
 }
 
 const scopeColors: Record<string, string> = {
-  convention: 'bg-blue-600/20 text-blue-400 border-blue-600/40',
-  decision: 'bg-green-600/20 text-green-400 border-green-600/40',
-  context: 'bg-purple-600/20 text-purple-400 border-purple-600/40',
+  convention: 'border-info/25 bg-info/12 text-info',
+  decision: 'border-success/25 bg-success/12 text-success',
+  context: 'border-accent-foreground/10 bg-accent text-accent-foreground',
 }
 
 export function MemoryList({ projectId, scope, showFilters = true }: MemoryListProps) {

frontend/src/components/message/ContentDiffViewer.tsx

@@ -117,8 +117,8 @@ export function ContentDiffViewer({ before, after }: ContentDiffViewerProps) {
               key={index}
               className={cn(
                 'flex font-mono text-xs',
-                isAdd && 'bg-green-500/10',
-                isRemove && 'bg-red-500/10',
+                isAdd && 'bg-success/10',
+                isRemove && 'bg-destructive/10',
               )}
             >
               {!isMobile && (
@@ -132,14 +132,14 @@ export function ContentDiffViewer({ before, after }: ContentDiffViewerProps) {
                 </div>
               )}
               <div className="w-4 flex-shrink-0 flex items-center justify-center">
-                {isAdd && <Plus className="w-2.5 h-2.5 text-green-500" />}
-                {isRemove && <Minus className="w-2.5 h-2.5 text-red-500" />}
+                {isAdd && <Plus className="w-2.5 h-2.5 text-success" />}
+                {isRemove && <Minus className="w-2.5 h-2.5 text-destructive" />}
               </div>
               <pre
                 className={cn(
                   'flex-1 px-1 py-0.5 whitespace-pre-wrap break-all',
-                  isAdd && 'text-green-600 dark:text-green-400',
-                  isRemove && 'text-red-600 dark:text-red-400',
+                  isAdd && 'text-success',
+                  isRemove && 'text-destructive',
                 )}
               >
                 {truncateLine(line.content)}
@@ -170,4 +170,4 @@ export function ContentDiffViewer({ before, after }: ContentDiffViewerProps) {
       )}
     </div>
   )
-}
+}

frontend/src/components/message/DiffStats.tsx

@@ -14,18 +14,18 @@ export function DiffStats({ additions, deletions, variant = 'default' }: DiffSta
   return (
     <span className="flex items-center gap-1 text-xs font-mono">
       {additions > 0 && (
-        <span className="text-green-600 dark:text-green-400">
+        <span className="text-success">
           {compact ? `+${additions}` : `+${additions}`}
         </span>
       )}
       {additions > 0 && deletions > 0 && (
         <span className="text-muted-foreground">{compact ? '/' : ' '}</span>
       )}
       {deletions > 0 && (
-        <span className="text-red-600 dark:text-red-400">
+        <span className="text-destructive">
           {compact ? `-${deletions}` : `-${deletions}`}
         </span>
       )}
     </span>
   )
-}
+}

frontend/src/components/message/EditableUserMessage.tsx

@@ -151,11 +151,11 @@ export const ClickableUserMessage = memo(function ClickableUserMessage({
   return (
     <button
       onClick={onClick}
-      className="text-left text-sm whitespace-pre-wrap break-words w-full group/edit hover:bg-blue-600/10 rounded p-1 -m-1 transition-colors flex items-start gap-2"
+      className="group/edit -m-1 flex w-full items-start gap-2 rounded p-1 text-left text-sm whitespace-pre-wrap break-words transition-colors hover:bg-primary/10"
       title="Click to edit and resend"
     >
       <span className="flex-1">{content}</span>
       <Pencil className={`w-4 h-4 flex-shrink-0 mt-0.5 text-muted-foreground transition-all ${isMobile ? 'opacity-100' : 'opacity-50 group-hover/edit:opacity-100 group-hover/edit:text-primary'}`} />
     </button>
   )
-})
+})

frontend/src/components/message/FileToolRender.tsx

@@ -94,12 +94,12 @@ export function FileToolRender({ part, filediff, filePath, content, toolName, on
         className="w-full px-3 py-1.5 bg-card hover:bg-card-hover text-left flex items-center justify-between text-sm gap-2"
       >
         <div className="flex items-center gap-2 min-w-0">
-          <span className="text-green-600 dark:text-green-400 flex-shrink-0">✓</span>
+          <span className="flex-shrink-0 text-success">✓</span>
           <span className="font-medium flex-shrink-0">{toolName}</span>
           {filePath && (
             <span 
               onClick={handleFileClick}
-              className="text-blue-600 dark:text-blue-400 text-xs truncate hover:underline cursor-pointer"
+              className="cursor-pointer truncate text-xs text-info hover:underline"
             >
               {getRelativePath(filePath)}
             </span>
@@ -151,4 +151,4 @@ export function getToolSpecificRender(part: ToolPart, onFileClick?: (filePath: s
   }
 
   return null
-}
+}

frontend/src/components/message/MessagePart.tsx

@@ -86,7 +86,7 @@ export function TTSButton({ content, className = "" }: TTSButtonProps) {
   return (
     <button
       onClick={handleClick}
-      className={`p-1.5 rounded ${isThisPlaying ? 'bg-red-500/20 text-red-500 hover:bg-red-500/30' : 'bg-card hover:bg-card-hover text-muted-foreground hover:text-foreground'} ${className}`}
+      className={`p-1.5 rounded ${isThisPlaying ? 'bg-destructive/12 text-destructive hover:bg-destructive/18' : 'bg-card hover:bg-card-hover text-muted-foreground hover:text-foreground'} ${className}`}
       title={isThisPlaying ? "Stop playback" : "Read aloud"}
       disabled={isLoading && originalText !== content}
     >
@@ -140,7 +140,7 @@ export const MessagePart = memo(function MessagePart({ part, role, allParts, par
     case 'agent':
       return (
         <div className="border border-border rounded-lg p-4 my-2 bg-card">
-          <div className="text-sm font-medium text-blue-600 dark:text-blue-400">Agent: {part.name}</div>
+          <div className="text-sm font-medium text-info">Agent: {part.name}</div>
         </div>
       )
     case 'step-finish': {
@@ -158,7 +158,7 @@ export const MessagePart = memo(function MessagePart({ part, role, allParts, par
     case 'file':
       return (
         <span className="inline-flex items-center gap-1 px-2 py-1 rounded bg-muted border border-border text-sm text-foreground">
-          <span className="text-blue-600 dark:text-blue-400">@</span>
+          <span className="text-info">@</span>
           <span className="font-medium">{part.filename || 'File'}</span>
         </span>
       )

frontend/src/components/message/MessageSkeleton.tsx

@@ -5,7 +5,7 @@ export function MessageSkeleton() {
     <div className="flex flex-col space-y-2 p-2 overflow-x-hidden">
       {/* User message skeleton */}
       <div className="flex flex-col">
-        <div className="w-full rounded-lg p-1.5 bg-blue-600/20 border border-blue-600/30">
+        <div className="w-full rounded-lg border border-primary/25 bg-primary/10 p-1.5">
           <div className="flex items-center gap-2 mb-1">
             <div className="h-3 w-12 bg-muted animate-pulse rounded" />
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
@@ -24,7 +24,7 @@ export function MessageSkeleton() {
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
             <div className="flex items-center gap-1">
-              <div className="h-3 w-20 bg-blue-600/20 animate-pulse rounded" />
+              <div className="h-3 w-20 rounded bg-primary/12 animate-pulse" />
             </div>
           </div>
           <div className="space-y-2">
@@ -36,7 +36,7 @@ export function MessageSkeleton() {
         </div>
       </div>
       <div className="flex flex-col">
-        <div className="w-full rounded-lg p-1.5 bg-blue-600/20 border border-blue-600/30">
+        <div className="w-full rounded-lg border border-primary/25 bg-primary/10 p-1.5">
           <div className="flex items-center gap-2 mb-1">
             <div className="h-3 w-12 bg-muted animate-pulse rounded" />
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
@@ -55,7 +55,7 @@ export function MessageSkeleton() {
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
             <div className="flex items-center gap-1">
-              <div className="h-3 w-20 bg-blue-600/20 animate-pulse rounded" />
+              <div className="h-3 w-20 rounded bg-primary/12 animate-pulse" />
             </div>
           </div>
           <div className="space-y-2">
@@ -69,7 +69,7 @@ export function MessageSkeleton() {
 
       {/* Second user message skeleton */}
       <div className="flex flex-col">
-        <div className="w-full rounded-lg p-1.5 bg-blue-600/20 border border-blue-600/30">
+        <div className="w-full rounded-lg border border-primary/25 bg-primary/10 p-1.5">
           <div className="flex items-center gap-2 mb-1">
             <div className="h-3 w-12 bg-muted animate-pulse rounded" />
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
@@ -88,7 +88,7 @@ export function MessageSkeleton() {
             <div className="h-3 w-16 bg-muted animate-pulse rounded" />
             <div className="flex items-center gap-1">
               <span className="animate-pulse">●</span>
-              <div className="h-3 w-24 bg-blue-600/20 animate-pulse rounded" />
+              <div className="h-3 w-24 rounded bg-primary/12 animate-pulse" />
             </div>
           </div>
           <div className="flex items-center gap-2 text-muted-foreground">
@@ -100,4 +100,3 @@ export function MessageSkeleton() {
     </div>
   );
 }
-

frontend/src/components/message/MessageThread.tsx

@@ -123,10 +123,10 @@ const MessageRow = memo(function MessageRow({
         className={`w-full rounded-lg p-1.5 ${
           msg.role === 'user'
             ? isQueued 
-              ? 'bg-amber-500/10 border border-amber-500/30'
+              ? 'border border-warning/30 bg-warning/10'
               : isEditingThisMessage
-                ? 'bg-blue-600/30 border border-blue-600/50'
-                : 'bg-blue-600/20 border border-blue-600/30'
+                ? 'border border-primary/40 bg-primary/18'
+                : 'border border-primary/25 bg-primary/10'
             : 'bg-card/50 border border-border'
         } ${streaming ? 'animate-pulse-subtle' : ''}`}
       >
@@ -150,7 +150,7 @@ const MessageRow = memo(function MessageRow({
               </button>
             )}
             {isQueued && (
-              <span className="text-xs font-semibold bg-amber-500 text-amber-950 px-1.5 py-0.5 rounded">
+              <span className="rounded bg-warning px-1.5 py-0.5 text-xs font-semibold text-warning-foreground">
                 QUEUED
               </span>
             )}