feat: add web editor and terminal panels

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/components/layout/WorkspaceShell.tsx

@@ -3,6 +3,8 @@ import { PanelLeftClose, PanelLeftOpen, Terminal } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { EditorPanel } from "@/components/editor/EditorPanel";
+import { TerminalPanel } from "@/components/terminal/TerminalPanel";
 import { FileExplorerPanel } from "@/components/workspace/FileExplorerPanel";
 import { StatusBar } from "@/components/workspace/StatusBar";
 import { useWorkspaceUiStore } from "@/lib/store/workspace-ui-store";
@@ -69,24 +71,9 @@ export function WorkspaceShell({ files }: WorkspaceShellProps) {
           {/* Main content area */}
           <Panel>
             <PanelGroup direction="vertical">
-              {/* Editor placeholder */}
+              {/* Editor */}
               <Panel>
-                <div className="flex h-full w-full items-center justify-center border-r border-border text-sm text-muted-foreground">
-                  <div className="text-center">
-                    <p className="mb-2">Editor placeholder</p>
-                    <div className="space-y-1 text-xs">
-                      <p>
-                        Active file:{" "}
-                        <code className="text-foreground">{activeFilePath}</code>
-                      </p>
-                      <p className="text-muted-foreground">
-                        {activeFile
-                          ? `${activeFile.name} | ${activeFile.language ?? "plain text"} | ${activeFile.kind}`
-                          : "No matching mock file"}
-                      </p>
-                    </div>
-                  </div>
-                </div>
+                <EditorPanel file={activeFile} />
               </Panel>
 
               {/* Terminal panel */}
@@ -94,9 +81,7 @@ export function WorkspaceShell({ files }: WorkspaceShellProps) {
                 <>
                   <PanelResizeHandle className="h-1 bg-border transition-colors hover:bg-accent" />
                   <Panel defaultSize={30} minSize={10} maxSize={70}>
-                    <div className="flex h-full w-full items-center justify-center border-r border-border text-sm text-muted-foreground">
-                      Terminal placeholder
-                    </div>
+                    <TerminalPanel />
                   </Panel>
                 </>
               )}