@cryptiklemur/lattice 1.3.0 → 1.4.0

package/client/src/components/sidebar/ProjectDropdown.tsx

@@ -1,7 +1,16 @@
-import React from "react";
-import { Settings, Plug, Sparkles, Terminal } from "lucide-react";
-import { PopupMenu, PopupMenuItem } from "../ui/PopupMenu";
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import {
+  Settings, FileText, Terminal, ScrollText, Shield, Brain,
+  Plug, Puzzle, ExternalLink, Copy, Check, FolderOpen,
+} from "lucide-react";
+import { useProjects } from "../../hooks/useProjects";
 import { useSidebar } from "../../hooks/useSidebar";
+import { useEditorConfig } from "../../hooks/useEditorConfig";
+import { getEditorUrl } from "../../utils/editorUrl";
+import { openTab } from "../../stores/workspace";
+import { getSidebarStore } from "../../stores/sidebar";
+import { useState } from "react";
 
 interface ProjectDropdownProps {
   anchorRef: React.RefObject<HTMLElement | null>;
@@ -9,35 +18,175 @@ interface ProjectDropdownProps {
 }
 
 export function ProjectDropdown(props: ProjectDropdownProps) {
+  var menuRef = useRef<HTMLDivElement>(null);
+  var { activeProject } = useProjects();
   var sidebar = useSidebar();
+  var { editorType, wslDistro } = useEditorConfig();
+  var [copied, setCopied] = useState(false);
 
-  var items: PopupMenuItem[] = [
-    { id: "project-settings", label: "Project Settings", icon: <Settings size={14} /> },
-    { id: "mcp", label: "MCP Servers", icon: <Plug size={14} /> },
-    { id: "skills", label: "Skills", icon: <Sparkles size={14} /> },
-    { id: "environment", label: "Environment", icon: <Terminal size={14} /> },
-  ];
-
-  function handleSelect(id: string) {
-    if (id === "project-settings") {
-      sidebar.openProjectSettings("general");
-    } else if (id === "mcp") {
-      sidebar.openProjectSettings("mcp");
-    } else if (id === "skills") {
-      sidebar.openProjectSettings("skills");
-    } else if (id === "environment") {
-      sidebar.openProjectSettings("environment");
+  useEffect(function () {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(e.target as Node) &&
+        props.anchorRef.current &&
+        !props.anchorRef.current.contains(e.target as Node)
+      ) {
+        props.onClose();
+      }
     }
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        props.onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [props.onClose, props.anchorRef]);
+
+  var style: React.CSSProperties = {};
+  if (props.anchorRef.current) {
+    var rect = props.anchorRef.current.getBoundingClientRect();
+    style.top = rect.bottom + 4 + "px";
+    style.left = rect.left + "px";
+    style.width = Math.max(rect.width, 240) + "px";
+  }
+
+  function goToSettings(section: string) {
+    sidebar.openProjectSettings(section as any);
     props.onClose();
   }
 
-  return (
-    <PopupMenu
-      items={items}
-      onSelect={handleSelect}
-      onClose={props.onClose}
-      anchorRef={props.anchorRef}
-      position="below"
-    />
+  function handleCopyPath() {
+    if (activeProject) {
+      navigator.clipboard.writeText(activeProject.path || "");
+      setCopied(true);
+      setTimeout(function () { setCopied(false); }, 1500);
+    }
+  }
+
+  var ideUrl = activeProject ? getEditorUrl(editorType, activeProject.path, ".", undefined, wslDistro, activeProject.ideProjectName) : null;
+
+  function handleOpenTerminal() {
+    openTab("terminal");
+    var state = getSidebarStore().state;
+    if (state.activeView.type !== "chat") {
+      getSidebarStore().setState(function (s) {
+        return { ...s, activeView: { type: "chat" } };
+      });
+    }
+    props.onClose();
+  }
+
+  function handleViewClaudeMd() {
+    openTab("files");
+    var state = getSidebarStore().state;
+    if (state.activeView.type !== "chat") {
+      getSidebarStore().setState(function (s) {
+        return { ...s, activeView: { type: "chat" } };
+      });
+    }
+    props.onClose();
+  }
+
+  if (!activeProject) return null;
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Project actions"
+      className="fixed z-[9999] bg-base-300 border border-base-content/15 rounded-xl shadow-2xl overflow-hidden"
+      style={style}
+    >
+      <div className="px-3 py-2.5 border-b border-base-content/10">
+        <div className="text-[13px] font-mono font-bold text-base-content truncate">{activeProject.title}</div>
+        <div className="text-[10px] text-base-content/30 truncate mt-0.5">{activeProject.path}</div>
+      </div>
+
+      <div className="px-1.5 py-1.5">
+        <div className="px-2 pt-1.5 pb-1 text-[10px] font-semibold uppercase tracking-wider text-base-content/25">
+          Actions
+        </div>
+        {ideUrl && (
+          <a
+            role="menuitem"
+            href={ideUrl}
+            onClick={function () { props.onClose(); }}
+            className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors"
+          >
+            <ExternalLink size={13} className="flex-shrink-0 text-base-content/30" />
+            Open in IDE
+          </a>
+        )}
+        <button
+          role="menuitem"
+          onClick={handleOpenTerminal}
+          className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors"
+        >
+          <Terminal size={13} className="flex-shrink-0 text-base-content/30" />
+          Open terminal
+        </button>
+        <button
+          role="menuitem"
+          onClick={handleViewClaudeMd}
+          className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors"
+        >
+          <FolderOpen size={13} className="flex-shrink-0 text-base-content/30" />
+          Browse files
+        </button>
+        <button
+          role="menuitem"
+          onClick={handleCopyPath}
+          className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors"
+        >
+          {copied ? (
+            <Check size={13} className="flex-shrink-0 text-success" />
+          ) : (
+            <Copy size={13} className="flex-shrink-0 text-base-content/30" />
+          )}
+          {copied ? "Copied!" : "Copy path"}
+        </button>
+      </div>
+
+      <div className="px-1.5 py-1.5 border-t border-base-content/10">
+        <div className="px-2 pt-1.5 pb-1 text-[10px] font-semibold uppercase tracking-wider text-base-content/25">
+          Settings
+        </div>
+        <button role="menuitem" onClick={function () { goToSettings("general"); }} className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors">
+          <Settings size={13} className="flex-shrink-0 text-base-content/30" />
+          General
+        </button>
+        <button role="menuitem" onClick={function () { goToSettings("claude"); }} className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors">
+          <FileText size={13} className="flex-shrink-0 text-base-content/30" />
+          Claude
+        </button>
+        <button role="menuitem" onClick={function () { goToSettings("mcp"); }} className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors">
+          <Plug size={13} className="flex-shrink-0 text-base-content/30" />
+          MCP Servers
+        </button>
+        <button role="menuitem" onClick={function () { goToSettings("skills"); }} className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors">
+          <Puzzle size={13} className="flex-shrink-0 text-base-content/30" />
+          Skills
+        </button>
+        <button role="menuitem" onClick={function () { goToSettings("rules"); }} className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors">
+          <ScrollText size={13} className="flex-shrink-0 text-base-content/30" />
+          Rules
+        </button>
+        <button role="menuitem" onClick={function () { goToSettings("permissions"); }} className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors">
+          <Shield size={13} className="flex-shrink-0 text-base-content/30" />
+          Permissions
+        </button>
+        <button role="menuitem" onClick={function () { goToSettings("memory"); }} className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[12px] text-base-content/60 hover:text-base-content hover:bg-base-content/5 transition-colors">
+          <Brain size={13} className="flex-shrink-0 text-base-content/30" />
+          Memory
+        </button>
+      </div>
+    </div>,
+    document.body
   );
 }

package/client/src/components/sidebar/SettingsSidebar.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft, Palette, FileText, Terminal, Plug, Puzzle, Network, Settings, ScrollText, Shield, Brain } from "lucide-react";
+import { ArrowLeft, Palette, FileText, Terminal, Plug, Puzzle, Network, Settings, ScrollText, Shield, Brain, MonitorCog, Bell } from "lucide-react";
 import { useSidebar } from "../../hooks/useSidebar";
 import type { SettingsSection, ProjectSettingsSection } from "../../stores/sidebar";
 
@@ -12,8 +12,17 @@ var SETTINGS_NAV = [
     group: "GENERAL",
     items: [
       { id: "appearance" as SettingsSection, label: "Appearance", icon: <Palette size={14} /> },
+      { id: "notifications" as SettingsSection, label: "Notifications", icon: <Bell size={14} /> },
       { id: "claude" as SettingsSection, label: "Claude Settings", icon: <FileText size={14} /> },
       { id: "environment" as SettingsSection, label: "Environment", icon: <Terminal size={14} /> },
+      { id: "editor" as SettingsSection, label: "Editor", icon: <MonitorCog size={14} /> },
+    ],
+  },
+  {
+    group: "CONFIGURATION",
+    items: [
+      { id: "rules" as SettingsSection, label: "Rules", icon: <ScrollText size={14} /> },
+      { id: "memory" as SettingsSection, label: "Memory", icon: <Brain size={14} /> },
     ],
   },
   {
@@ -36,6 +45,7 @@ var PROJECT_SETTINGS_NAV = [
     group: "GENERAL",
     items: [
       { id: "general" as ProjectSettingsSection, label: "General", icon: <Settings size={14} /> },
+      { id: "notifications" as ProjectSettingsSection, label: "Notifications", icon: <Bell size={14} /> },
       { id: "claude" as ProjectSettingsSection, label: "Claude", icon: <FileText size={14} /> },
       { id: "environment" as ProjectSettingsSection, label: "Environment", icon: <Terminal size={14} /> },
     ],

package/client/src/components/sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Plus, ChevronDown, Search, LayoutDashboard } from "lucide-react";
+import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar } from "lucide-react";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import type { SessionSummary, ServerMessage, SettingsDataMessage } from "@lattice/shared";
 import { useProjects } from "../../hooks/useProjects";
@@ -8,6 +8,9 @@ import { useWebSocket } from "../../hooks/useWebSocket";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useSession } from "../../hooks/useSession";
 import { clearSession } from "../../stores/session";
+import { useOnline } from "../../hooks/useOnline";
+import { openTab } from "../../stores/workspace";
+import { getSidebarStore } from "../../stores/sidebar";
 import { ProjectRail } from "./ProjectRail";
 import { SessionList } from "./SessionList";
 import { UserIsland } from "./UserIsland";
@@ -35,6 +38,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
   var { projects, activeProject } = useProjects();
   var { nodes } = useMesh();
   var ws = useWebSocket();
+  var online = useOnline();
   var sidebar = useSidebar();
   var session = useSession();
   var [sessionSearch, setSessionSearch] = useState<string>("");
@@ -144,6 +148,35 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                   <span className="font-mono tracking-wide">Dashboard</span>
                 </button>
 
+                <div className="flex flex-col gap-0.5 mx-3 mt-1">
+                  {[
+                    { type: "files" as const, icon: FolderOpen, label: "Files" },
+                    { type: "terminal" as const, icon: TerminalSquare, label: "Terminal" },
+                    { type: "notes" as const, icon: StickyNote, label: "Notes" },
+                    { type: "tasks" as const, icon: Calendar, label: "Tasks" },
+                  ].map(function (item) {
+                    return (
+                      <button
+                        key={item.type}
+                        type="button"
+                        onClick={function () {
+                          openTab(item.type);
+                          var state = getSidebarStore().state;
+                          if (state.activeView.type !== "chat") {
+                            getSidebarStore().setState(function (s) {
+                              return { ...s, activeView: { type: "chat" } };
+                            });
+                          }
+                        }}
+                        className="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
+                      >
+                        <item.icon size={12} />
+                        <span className="font-mono tracking-wide">{item.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+
                 <SectionLabel
                   label="Sessions"
                   actions={
@@ -151,7 +184,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                       <button onClick={function () { setSessionSearchOpen(function (v) { return !v; }); }} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="Search sessions">
                         <Search size={13} />
                       </button>
-                      <button onClick={handleNewSession} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="New session">
+                      <button onClick={handleNewSession} disabled={!online} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="New session">
                         <Plus size={13} />
                       </button>
                     </>

package/client/src/components/sidebar/UserIsland.tsx

@@ -1,6 +1,7 @@
-import { Sun, Moon, Settings } from "lucide-react";
+import { Sun, Moon, Settings, Download } from "lucide-react";
 import { useTheme } from "../../hooks/useTheme";
 import { useSidebar } from "../../hooks/useSidebar";
+import { useInstallPrompt } from "../../hooks/useInstallPrompt";
 import pkg from "../../../package.json";
 
 interface UserIslandProps {
@@ -11,6 +12,7 @@ interface UserIslandProps {
 export function UserIsland(props: UserIslandProps) {
   var { mode, toggleMode } = useTheme();
   var sidebar = useSidebar();
+  var { canInstall, install } = useInstallPrompt();
 
   var initial = props.nodeName.charAt(0).toUpperCase();
 
@@ -39,19 +41,28 @@ export function UserIsland(props: UserIslandProps) {
       </button>
 
       <div className="flex items-center gap-0.5 flex-shrink-0">
+        {canInstall && (
+          <button
+            aria-label="Install Lattice"
+            onClick={install}
+            className="btn btn-ghost btn-xs btn-square text-primary/60 hover:text-primary transition-colors"
+          >
+            <Download size={14} />
+          </button>
+        )}
         <button
-          aria-label="Global settings"
-          onClick={function () { sidebar.openSettings("appearance"); }}
+          aria-label={mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+          onClick={function (e) { e.stopPropagation(); toggleMode(); }}
           className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
         >
-          <Settings size={14} />
+          {mode === "dark" ? <Sun size={14} /> : <Moon size={14} />}
         </button>
         <button
-          aria-label={mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
-          onClick={function (e) { e.stopPropagation(); toggleMode(); }}
+          aria-label="Global settings"
+          onClick={function () { sidebar.openSettings("appearance"); }}
           className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
         >
-          {mode === "dark" ? <Sun size={14} /> : <Moon size={14} />}
+          <Settings size={14} />
         </button>
       </div>
     </div>

package/client/src/components/ui/UpdatePrompt.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { RefreshCw } from "lucide-react";
+
+export function UpdatePrompt() {
+  var [showUpdate, setShowUpdate] = useState(false);
+  var [registration, setRegistration] = useState<ServiceWorkerRegistration | null>(null);
+
+  useEffect(function () {
+    if (!("serviceWorker" in navigator)) return;
+
+    navigator.serviceWorker.ready.then(function (reg) {
+      reg.addEventListener("updatefound", function () {
+        var newWorker = reg.installing;
+        if (!newWorker) return;
+        var worker: ServiceWorker = newWorker;
+        worker.addEventListener("statechange", function () {
+          if (worker.state === "installed" && navigator.serviceWorker.controller) {
+            setRegistration(reg);
+            setShowUpdate(true);
+          }
+        });
+      });
+    });
+  }, []);
+
+  function handleReload() {
+    if (registration && registration.waiting) {
+      registration.waiting.postMessage({ type: "SKIP_WAITING" });
+    }
+    window.location.reload();
+  }
+
+  if (!showUpdate) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[9998] bg-base-300 border border-base-content/15 rounded-xl shadow-2xl px-4 py-3 flex items-center gap-3 max-w-sm">
+      <RefreshCw size={16} className="text-primary flex-shrink-0" />
+      <div className="flex-1 min-w-0">
+        <div className="text-[13px] text-base-content font-semibold">Update available</div>
+        <div className="text-[11px] text-base-content/40">A new version of Lattice is ready.</div>
+      </div>
+      <button onClick={handleReload} className="btn btn-primary btn-xs">
+        Reload
+      </button>
+    </div>
+  );
+}

package/client/src/components/workspace/FileBrowser.tsx

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowLeft, FileCode, FileX } from "lucide-react";
+import type { FsListResultMessage, FsReadResultMessage, ServerMessage } from "@lattice/shared";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSidebar } from "../../hooks/useSidebar";
+import { useProjects } from "../../hooks/useProjects";
+import { useEditorConfig } from "../../hooks/useEditorConfig";
+import { getEditorUrl } from "../../utils/editorUrl";
+import { FileTree, buildNodes } from "./FileTree";
+import { FileViewer } from "./FileViewer";
+import type { TreeNode } from "./FileTree";
+
+export function FileBrowser() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var { activeProjectSlug } = useSidebar();
+  var { activeProject } = useProjects();
+  var { editorType, wslDistro } = useEditorConfig();
+  var projectSlugRef = useRef<string | null>(null);
+  projectSlugRef.current = activeProjectSlug;
+  var [rootNodes, setRootNodes] = useState<TreeNode[]>([]);
+  var [selectedPath, setSelectedPath] = useState<string | null>(null);
+  var [fileContent, setFileContent] = useState<string | null>(null);
+  var [loadingContent, setLoadingContent] = useState(false);
+  var [mobileShowViewer, setMobileShowViewer] = useState(false);
+  var nodesRef = useRef<TreeNode[]>([]);
+
+  nodesRef.current = rootNodes;
+
+  var handleListResult = useCallback(function (msg: ServerMessage) {
+    var listMsg = msg as FsListResultMessage;
+    var newNodes = buildNodes(listMsg.entries);
+
+    if (listMsg.path === "" || listMsg.path === ".") {
+      setRootNodes(newNodes);
+      return;
+    }
+
+    function updateNodes(nodes: TreeNode[]): TreeNode[] {
+      return nodes.map(function (node) {
+        if (node.entry.path === listMsg.path) {
+          return Object.assign({}, node, { children: newNodes, expanded: true });
+        }
+        if (node.children) {
+          return Object.assign({}, node, { children: updateNodes(node.children) });
+        }
+        return node;
+      });
+    }
+
+    setRootNodes(function (prev) {
+      return updateNodes(prev);
+    });
+  }, []);
+
+  var handleReadResult = useCallback(function (msg: ServerMessage) {
+    var readMsg = msg as FsReadResultMessage;
+    setFileContent(readMsg.content);
+    setLoadingContent(false);
+  }, []);
+
+  var selectedPathRef = useRef<string | null>(null);
+  selectedPathRef.current = selectedPath;
+
+  var handleFsChanged = useCallback(function (msg: ServerMessage) {
+    var changedPath = (msg as { path: string }).path;
+    if (changedPath === selectedPathRef.current) {
+      send({ type: "fs:read", path: changedPath, projectSlug: projectSlugRef.current || undefined });
+    }
+  }, [send]);
+
+  useEffect(function () {
+    subscribe("fs:list_result", handleListResult);
+    subscribe("fs:read_result", handleReadResult);
+    subscribe("fs:changed", handleFsChanged);
+
+    send({ type: "fs:list", path: ".", projectSlug: projectSlugRef.current || undefined });
+
+    return function () {
+      unsubscribe("fs:list_result", handleListResult);
+      unsubscribe("fs:read_result", handleReadResult);
+      unsubscribe("fs:changed", handleFsChanged);
+    };
+  }, [handleListResult, handleReadResult, handleFsChanged, send, subscribe, unsubscribe]);
+
+  function handleToggle(path: string) {
+    function findAndToggle(nodes: TreeNode[]): TreeNode[] {
+      return nodes.map(function (node) {
+        if (node.entry.path === path) {
+          if (!node.expanded && !node.children) {
+            send({ type: "fs:list", path: path, projectSlug: projectSlugRef.current || undefined });
+            return Object.assign({}, node, { expanded: true });
+          }
+          return Object.assign({}, node, { expanded: !node.expanded });
+        }
+        if (node.children) {
+          return Object.assign({}, node, { children: findAndToggle(node.children) });
+        }
+        return node;
+      });
+    }
+    setRootNodes(function (prev) {
+      return findAndToggle(prev);
+    });
+  }
+
+  function handleSelect(path: string) {
+    setSelectedPath(path);
+    setFileContent(null);
+    setLoadingContent(true);
+    setMobileShowViewer(true);
+    send({ type: "fs:read", path: path, projectSlug: activeProjectSlug || undefined });
+  }
+
+  var editorUrlForSelected = selectedPath && activeProject
+    ? getEditorUrl(editorType, activeProject.path, selectedPath, undefined, wslDistro, activeProject.ideProjectName)
+    : null;
+
+  return (
+    <div className="flex h-full w-full overflow-hidden bg-base-100">
+      <div className={"w-full sm:w-[220px] sm:flex-shrink-0 sm:border-r sm:border-base-content/15 overflow-y-auto p-2" + (mobileShowViewer ? " hidden sm:block" : " block")}>
+        <div className="text-[11px] font-semibold tracking-[0.06em] uppercase text-base-content/40 px-2 pb-2 pt-1">
+          Files
+        </div>
+        <FileTree
+          nodes={rootNodes}
+          selectedPath={selectedPath}
+          onToggle={handleToggle}
+          onSelect={handleSelect}
+        />
+      </div>
+
+      <div className={"flex-1 flex-col overflow-hidden" + (mobileShowViewer ? " flex" : " hidden sm:flex")}>
+        {selectedPath && (
+          <button
+            className="sm:hidden flex items-center gap-1 px-2 py-1.5 text-[12px] text-base-content/60 hover:text-base-content border-b border-base-content/15"
+            onClick={function () { setMobileShowViewer(false); }}
+          >
+            <ArrowLeft size={14} />
+            <span>Back to files</span>
+          </button>
+        )}
+
+        {!selectedPath && (
+          <div className="h-full flex flex-col items-center justify-center gap-3">
+            <FileCode size={28} className="text-base-content/15" />
+            <div className="text-base-content/40 text-[13px]">Select a file from the tree to view its contents</div>
+          </div>
+        )}
+
+        {selectedPath && loadingContent && (
+          <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
+            Loading...
+          </div>
+        )}
+
+        {selectedPath && !loadingContent && fileContent !== null && (
+          <FileViewer
+            path={selectedPath}
+            content={fileContent}
+            editorUrl={editorUrlForSelected}
+          />
+        )}
+
+        {selectedPath && !loadingContent && fileContent === null && (
+          <div className="h-full flex flex-col items-center justify-center gap-3">
+            <FileX size={28} className="text-base-content/15" />
+            <div className="text-base-content/40 text-[13px]">Cannot display this file</div>
+            <div className="text-base-content/30 text-[11px]">Binary files and files over 512KB are not shown</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}