@tanstack/cta-ui 0.10.0-alpha.19 → 0.10.0-alpha.20

package/lib/index.ts

@@ -1,17 +1,26 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-export function launchUI() {
-  const projectPath = process.cwd()
+import type { SerializedOptions } from '@tanstack/cta-engine'
 
-  process.env.PROJECT_PATH = projectPath
+export function launchUI({
+  mode,
+  addOns,
+  options,
+}: {
+  mode: 'add' | 'setup'
+  addOns?: Array<string>
+  options?: SerializedOptions
+}) {
+  const projectPath = process.cwd()
 
-  const configPath = resolve(
-    dirname(fileURLToPath(import.meta.url)),
-    '../app.config.js',
-  )
+  process.env.CTA_PROJECT_PATH = projectPath
+  process.env.CTA_ADD_ONS = addOns?.join(',') || ''
+  process.env.CTA_OPTIONS = options ? JSON.stringify(options) : ''
+  process.env.CTA_MODE = mode
 
   const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+  const configPath = resolve(developerPath, './app.config.js')
 
   process.chdir(developerPath)
 

package/lib-dist/index.d.ts

@@ -1 +1,6 @@
-export declare function launchUI(): void;
+import type { SerializedOptions } from '@tanstack/cta-engine';
+export declare function launchUI({ mode, addOns, options, }: {
+    mode: 'add' | 'setup';
+    addOns?: Array<string>;
+    options?: SerializedOptions;
+}): void;

package/lib-dist/index.js

@@ -1,10 +1,13 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-export function launchUI() {
+export function launchUI({ mode, addOns, options, }) {
     const projectPath = process.cwd();
-    process.env.PROJECT_PATH = projectPath;
-    const configPath = resolve(dirname(fileURLToPath(import.meta.url)), '../app.config.js');
+    process.env.CTA_PROJECT_PATH = projectPath;
+    process.env.CTA_ADD_ONS = addOns?.join(',') || '';
+    process.env.CTA_OPTIONS = options ? JSON.stringify(options) : '';
+    process.env.CTA_MODE = mode;
     const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+    const configPath = resolve(developerPath, './app.config.js');
     process.chdir(developerPath);
     import(configPath).then(async (config) => {
         const out = await config.default;

package/package.json

@@ -10,11 +10,17 @@
     "@codemirror/lang-json": "^6.0.1",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.11",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.10",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.2.3",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.5",
     "@tanstack/react-query-devtools": "^5.66.5",
@@ -22,37 +28,44 @@
     "@tanstack/react-router-devtools": "^1.114.3",
     "@tanstack/react-router-with-query": "^1.114.3",
     "@tanstack/react-start": "^1.114.3",
+    "@tanstack/react-store": "^0.7.0",
     "@tanstack/router-plugin": "^1.114.3",
-    "@uiw/codemirror-theme-okaidia": "^4.23.10",
+    "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "execa": "^9.5.2",
+    "jotai-tanstack-query": "^0.9.0",
     "lucide-react": "^0.476.0",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-codemirror-merge": "^4.23.10",
     "react-dom": "^19.0.0",
+    "sonner": "^2.0.3",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
     "vinxi": "^0.5.3",
     "vite-tsconfig-paths": "^5.1.4",
-    "@tanstack/cta-engine": "0.10.0-alpha.19",
-    "@tanstack/cta-custom-add-on": "0.10.0-alpha.19"
+    "zustand": "^5.0.3",
+    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.20",
+    "@tanstack/cta-engine": "0.10.0-alpha.20",
+    "@tanstack/cta-framework-solid": "0.10.0-alpha.20"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.14",
+    "@types/node": "^22.14.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "3.1.1",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.2",
     "vite": "^6.1.0",
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   },
-  "version": "0.10.0-alpha.19",
+  "version": "0.10.0-alpha.20",
   "scripts": {}
 }

package/public/tailwind.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#a)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>

package/public/typescript.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" width="256" height="256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z" fill="#3178C6"/><path d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z" fill="#FFF"/></svg>

package/src/components/StatusList.tsx

@@ -0,0 +1,22 @@
+import type { StreamItem } from '@/types'
+
+export default function StatusList({
+  streamItems,
+  finished,
+}: {
+  streamItems: Array<StreamItem>
+  finished: boolean
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      {streamItems.map((item, index) => (
+        <div key={item.id} className="flex items-center gap-2">
+          <item.icon
+            className={`w-4 h-4 ${index === streamItems.length - 1 && !finished ? 'text-green-500 animate-spin' : ''}`}
+          />
+          {item.message}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/add-on-info-dialog.tsx

@@ -0,0 +1,39 @@
+import type { AddOnInfo } from '@/types'
+
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+export default function CustomAddOnDialog({
+  addOn,
+  onClose,
+}: {
+  addOn?: AddOnInfo
+  onClose: () => void
+}) {
+  return (
+    <Dialog modal open={!!addOn} onOpenChange={onClose}>
+      <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+        <div className="flex flex-row">
+          {addOn?.smallLogo && (
+            <img
+              src={`data:image/svg+xml,${encodeURIComponent(addOn.smallLogo)}`}
+              alt={addOn.name}
+              className="w-15"
+            />
+          )}
+          <div className="flex flex-col ml-4 gap-4">
+            <p className="text-lg font-bold">{addOn?.name}</p>
+            <p className="text-sm text-gray-500">{addOn?.description}</p>
+            <a
+              href={addOn?.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-500 underline"
+            >
+              More information on {addOn?.name}
+            </a>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/cta-sidebar.tsx

@@ -0,0 +1,55 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from '@/components/ui/sidebar'
+
+import SelectedAddOns from '@/components/sidebar-items/add-ons'
+import RunAddOns from '@/components/sidebar-items/run-add-ons'
+import RunCreateApp from '@/components/sidebar-items/run-create-app'
+import ProjectName from '@/components/sidebar-items/project-name'
+import ModeSelector from '@/components/sidebar-items/mode-selector'
+import TypescriptSwitch from '@/components/sidebar-items/typescript-switch'
+import StarterDialog from '@/components/sidebar-items/starter'
+
+import { useApplicationMode, useReady } from '@/store/project'
+
+export function AppSidebar() {
+  const ready = useReady()
+  const mode = useApplicationMode()
+
+  return (
+    <Sidebar>
+      <SidebarHeader className="flex justify-center items-center">
+        <img src="/tanstack.png" className="w-3/5" />
+      </SidebarHeader>
+      <SidebarContent>
+        {ready && (
+          <>
+            {mode === 'setup' && (
+              <SidebarGroup>
+                <ProjectName />
+                <ModeSelector />
+                <TypescriptSwitch />
+              </SidebarGroup>
+            )}
+            <SidebarGroup>
+              <SelectedAddOns />
+            </SidebarGroup>
+            {mode === 'setup' && (
+              <SidebarGroup>
+                <StarterDialog />
+              </SidebarGroup>
+            )}
+          </>
+        )}
+      </SidebarContent>
+      <SidebarFooter className="mb-5">
+        <RunAddOns />
+        <RunCreateApp />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

package/src/components/custom-add-on-dialog.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { TicketPlusIcon } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+import { addCustomAddOn, useAddOns, useRouterMode } from '@/store/project'
+import { loadRemoteAddOn } from '@/lib/api'
+
+export default function CustomAddOnDialog() {
+  const [url, setUrl] = useState('')
+  const [open, setOpen] = useState(false)
+
+  const mode = useRouterMode()
+  const { toggleAddOn } = useAddOns()
+
+  async function onImport() {
+    const data = await loadRemoteAddOn(url)
+
+    if ('error' in data) {
+      toast.error('Failed to load add-on', {
+        description: data.error,
+      })
+    } else {
+      addCustomAddOn(data)
+      if (data.modes.includes(mode)) {
+        toggleAddOn(data.id)
+      }
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div>
+      <Button
+        variant="secondary"
+        className="w-full"
+        onClick={() => {
+          setUrl('')
+          setOpen(true)
+        }}
+      >
+        <TicketPlusIcon className="w-4 h-4" />
+        Import Custom Add-On
+      </Button>
+      <Dialog modal open={open}>
+        <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+          <DialogHeader>
+            <DialogTitle>Import Custom Add-On</DialogTitle>
+          </DialogHeader>
+          <div>
+            <Input
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://github.com/myorg/myproject/add-on.json"
+              className="min-w-lg w-full"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  onImport()
+                }
+              }}
+            />
+          </div>
+          <DialogFooter>
+            <Button onClick={onImport}>Import</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/components/file-navigator.tsx

@@ -0,0 +1,205 @@
+import { useMemo, useState } from 'react'
+import { FileText, Folder } from 'lucide-react'
+
+import FileViewer from './file-viewer'
+import FileTree from './file-tree'
+
+import type { FileTreeItem } from '@/types'
+
+import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
+
+import {
+  useApplicationMode,
+  useDryRun,
+  useFilters,
+  useOriginalOutput,
+  useProjectLocalFiles,
+  useReady,
+} from '@/store/project'
+
+import { getFileClass, twClasses } from '@/file-classes'
+
+export function Filters() {
+  const { includedFiles, toggleFilter } = useFilters()
+
+  return (
+    <div className="p-2 rounded-md bg-gray-900 file-filters">
+      <div className="text-center text-sm mb-2">File Filters</div>
+      <div className="flex flex-row flex-wrap gap-y-2">
+        <div className="flex flex-row items-center gap-2 w-1/3">
+          <Checkbox
+            id="unchanged"
+            checked={includedFiles.includes('unchanged')}
+            className="w-4 h-4"
+            onCheckedChange={() => toggleFilter('unchanged')}
+          />
+          <Label htmlFor="unchanged" className={twClasses.unchanged}>
+            Unchanged
+          </Label>
+        </div>
+        <div className="flex flex-row items-center gap-2 w-1/3">
+          <Checkbox
+            id="added"
+            checked={includedFiles.includes('added')}
+            className="w-4 h-4"
+            onCheckedChange={() => toggleFilter('added')}
+          />
+          <Label htmlFor="added" className={twClasses.added}>
+            Added
+          </Label>
+        </div>
+        <div className="flex flex-row items-center gap-2 w-1/3">
+          <Checkbox
+            id="modified"
+            checked={includedFiles.includes('modified')}
+            className="w-4 h-4"
+            onCheckedChange={() => toggleFilter('modified')}
+          />
+          <Label htmlFor="modified" className={twClasses.modified}>
+            Modified
+          </Label>
+        </div>
+        <div className="flex flex-row items-center gap-2 w-1/3">
+          <Checkbox
+            id="deleted"
+            checked={includedFiles.includes('deleted')}
+            className="w-4 h-4"
+            onCheckedChange={() => toggleFilter('deleted')}
+          />
+          <Label htmlFor="deleted" className={twClasses.deleted}>
+            Deleted
+          </Label>
+        </div>
+        <div className="flex flex-row items-center gap-2 w-1/3">
+          <Checkbox
+            id="overwritten"
+            checked={includedFiles.includes('overwritten')}
+            className="w-4 h-4"
+            onCheckedChange={() => toggleFilter('overwritten')}
+          />
+          <Label htmlFor="overwritten" className={twClasses.overwritten}>
+            Overwritten
+          </Label>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function FileNavigator() {
+  const [selectedFile, setSelectedFile] = useState<string | null>(
+    './package.json',
+  )
+
+  const projectFiles = useOriginalOutput()
+  const localTree = useProjectLocalFiles()
+  const dryRunOutput = useDryRun()
+
+  const mode = useApplicationMode()
+
+  const tree = dryRunOutput.files
+  const originalTree =
+    mode === 'setup' ? dryRunOutput.files : projectFiles.files
+  const deletedFiles = dryRunOutput.deletedFiles
+
+  const [originalFileContents, setOriginalFileContents] = useState<string>()
+  const [modifiedFileContents, setModifiedFileContents] = useState<string>()
+
+  const { includedFiles } = useFilters()
+
+  const fileTree = useMemo(() => {
+    const treeData: Array<FileTreeItem> = []
+
+    const allFileSet = Array.from(
+      new Set([
+        ...Object.keys(tree),
+        ...Object.keys(localTree),
+        ...Object.keys(originalTree),
+      ]),
+    )
+
+    allFileSet.sort().forEach((file) => {
+      const strippedFile = file.replace('./', '')
+      const parts = strippedFile.split('/')
+
+      let currentLevel = treeData
+      parts.forEach((part, index) => {
+        const existingNode = currentLevel.find((node) => node.name === part)
+        if (existingNode) {
+          currentLevel = existingNode.children || []
+        } else {
+          const fileInfo = getFileClass(
+            file,
+            tree,
+            originalTree,
+            localTree,
+            deletedFiles,
+          )
+
+          if (
+            index === parts.length - 1 &&
+            !includedFiles.includes(fileInfo.fileClass)
+          ) {
+            return
+          }
+          if (index === parts.length - 1 && file === selectedFile) {
+            setModifiedFileContents(fileInfo.modifiedFile)
+            setOriginalFileContents(fileInfo.originalFile)
+          }
+
+          const newNode: FileTreeItem = {
+            id: parts.slice(0, index + 1).join('/'),
+            name: part,
+            fullPath: strippedFile,
+            children: index < parts.length - 1 ? [] : undefined,
+            icon:
+              index < parts.length - 1
+                ? () => <Folder className="w-4 h-4 mr-2" />
+                : () => <FileText className="w-4 h-4 mr-2" />,
+            onClick:
+              index === parts.length - 1
+                ? () => {
+                    setSelectedFile(file)
+                    setModifiedFileContents(fileInfo.modifiedFile)
+                    setOriginalFileContents(fileInfo.originalFile)
+                  }
+                : undefined,
+            className: twClasses[fileInfo.fileClass],
+            ...fileInfo,
+            contents: tree[file] || localTree[file] || originalTree[file],
+          }
+          currentLevel.push(newNode)
+          currentLevel = newNode.children!
+        }
+      })
+    })
+    return treeData
+  }, [tree, originalTree, localTree, includedFiles])
+
+  const ready = useReady()
+
+  if (!ready) {
+    return null
+  }
+
+  return (
+    <div
+      className={`flex flex-row border-1 rounded-md mr-10 p-2 inset-shadow-gray-600 inset-shadow-sm`}
+    >
+      <div className="w-1/4 max-w-1/4 pr-2">
+        {mode === 'add' && <Filters />}
+        <FileTree selectedFile={selectedFile} tree={fileTree} />
+      </div>
+      <div className="max-w-3/4 w-3/4 pl-2">
+        {selectedFile && modifiedFileContents ? (
+          <FileViewer
+            filePath={selectedFile}
+            originalFile={originalFileContents}
+            modifiedFile={modifiedFileContents}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/components/file-tree.tsx

@@ -1,77 +1,35 @@
 import { useMemo } from 'react'
 import { FileText, Folder } from 'lucide-react'
 
-import { TreeView } from '@/components/ui/tree-view'
+import type { FileTreeItem } from '@/types.js'
 
-import type { TreeDataItem } from '@/components/ui/tree-view'
+import { TreeView } from '@/components/ui/tree-view'
 
 export default function FileTree({
-  prefix,
+  selectedFile,
   tree,
-  originalTree,
-  onFileSelected,
-  extraTreeItems = [],
 }: {
-  prefix: string
-  tree: Record<string, string>
-  originalTree: Record<string, string>
-  onFileSelected: (file: string) => void
-  extraTreeItems?: Array<TreeDataItem>
+  selectedFile: string | null
+  tree: Array<FileTreeItem>
 }) {
-  const computedTree = useMemo(() => {
-    const treeData: Array<TreeDataItem> = []
-
-    function changed(file: string) {
-      if (!originalTree[file]) {
-        return true
-      }
-      return tree[file] !== originalTree[file]
-    }
-
-    Object.keys(tree)
-      .sort()
-      .forEach((file) => {
-        const parts = file.replace(`${prefix}/`, '').split('/')
-
-        let currentLevel = treeData
-        parts.forEach((part, index) => {
-          const existingNode = currentLevel.find((node) => node.name === part)
-          if (existingNode) {
-            currentLevel = existingNode.children || []
-          } else {
-            const newNode: TreeDataItem = {
-              id: index === parts.length - 1 ? file : `${file}-${index}`,
-              name: part,
-              children: index < parts.length - 1 ? [] : undefined,
-              icon:
-                index < parts.length - 1
-                  ? () => <Folder className="w-4 h-4 mr-2" />
-                  : () => <FileText className="w-4 h-4 mr-2" />,
-              onClick:
-                index === parts.length - 1
-                  ? () => {
-                      onFileSelected(file)
-                    }
-                  : undefined,
-              className:
-                index === parts.length - 1 && changed(file)
-                  ? 'text-green-300'
-                  : '',
-            }
-            currentLevel.push(newNode)
-            currentLevel = newNode.children!
-          }
-        })
-      })
-    return [...extraTreeItems, ...treeData]
-  }, [prefix, tree, originalTree, extraTreeItems])
+  const initialExpandedItemIds = useMemo(
+    () => [
+      'src',
+      'src/routes',
+      'src/components',
+      'src/components/ui',
+      'src/lib',
+    ],
+    [],
+  )
 
   return (
     <TreeView
-      data={computedTree}
+      initialSelectedItemId={selectedFile?.replace('./', '') ?? undefined}
+      initialExpandedItemIds={initialExpandedItemIds}
+      data={tree}
       defaultNodeIcon={() => <Folder className="w-4 h-4 mr-2" />}
       defaultLeafIcon={() => <FileText className="w-4 h-4 mr-2" />}
-      className="max-w-1/4 w-1/4 pr-2"
     />
   )
 }

package/src/components/file-viewer.tsx

@@ -6,7 +6,15 @@ import { json } from '@codemirror/lang-json'
 import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 
-import { okaidia } from '@uiw/codemirror-theme-okaidia'
+import { githubDarkInit } from '@uiw/codemirror-theme-github'
+
+const theme = githubDarkInit({
+  settings: {
+    background: 'oklch(0.07 0.005 285.823)',
+    foreground: '#c9d1d9',
+    gutterBackground: 'oklch(0.22 0.005 285.823)',
+  },
+})
 
 export default function FileViewer({
   originalFile,
@@ -41,7 +49,7 @@ export default function FileViewer({
     return (
       <CodeMirror
         value={modifiedFile}
-        theme={okaidia}
+        theme={theme}
         height="100vh"
         width="100%"
         readOnly
@@ -51,7 +59,7 @@ export default function FileViewer({
     )
   }
   return (
-    <CodeMirrorMerge orientation="a-b" theme={okaidia} className="text-lg">
+    <CodeMirrorMerge orientation="a-b" theme={theme} className="text-lg">
       <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
       <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
     </CodeMirrorMerge>