officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extracted terminal to a widget

Browse Source
This commit is contained in:
pastilhas
2026-02-17 18:46:18 +00:00
parent c6999ea66f
commit 0746844d6f
98 changed files with 487 additions and 3513 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/App.tsx
+23 -36
View File
@@ -1,9 +1,6 @@
import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
import * as Authentication from './Screens/Authentication';
// import { Home } from './Screens/Dashboard/Home';
// import { ChatList } from './Screens/Dashboard/Chat/ChatList';
import * as Dashboard from './Screens/Dashboard';
import { useAuth } from 'hooks/useAuth';
import { useServerSettings } from '@/state/useServerSettings';
import { useInitialData } from '@/state/useInitialData';
@@ -36,38 +33,28 @@ export function App() {
{/* </Routes> */}
{/* )} */}
{isAuthenticated && onboardingComplete && (
<Routes>
<Route path="/" element={<HomeScreen />} />
{/* <Route path="/settings/profile" element={<ProfileSettings />} /> */}
{/* <Route path="/settings/ai" element={<AISettings />} /> */}
{/* <Route path="/settings/server" element={<ServerSettings />} /> */}
{/* <Route path="/settings/resources" element={<ResourceSettings />} /> */}
{/* <Route path="/chat" element={<ChatList />} /> */}
{/* <Route path="/chat/new" element={<NewChat />} /> */}
{/* <Route path="/chat/:sessionId" element={<ClaudeChat />} /> */}
{/* <Route path="/chat/opencode/new" element={<OpenCodeChat />} /> */}
{/* <Route path="/chat/opencode/:sessionId" element={<OpenCodeChat />} /> */}
{/* <Route path="/files" element={<Files />} /> */}
{/* <Route path="/terminal" element={<Terminal />} /> */}
{/* <Route path="/plans" element={<Plans />} /> */}
{/* <Route path="/skills" element={<Skills />} /> */}
{/* <Route path="/tasks" element={<Tasks />} /> */}
{/* <Route path="/processes" element={<Processes />} /> */}
{/* <Route path="/task-logs" element={<TaskLogs />} /> */}
<Route path="/auth/signout" element={<Authentication.SignoutScreen />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
<Dashboard.DashboardLayout>
<Routes>
<Route path="/" element={<Dashboard.HomeScreen />} />
<Route path="/settings/profile" element={<Dashboard.ProfileSettings />} />
<Route path="/settings/ai" element={<Dashboard.AISettings />} />
<Route path="/settings/server" element={<Dashboard.ServerSettings />} />
<Route path="/settings/resources" element={<Dashboard.ResourceSettings />} />
<Route path="/chat/new" element={<Dashboard.NewChat />} />
<Route path="/chat/:sessionId" element={<Dashboard.ClaudeChat />} />
<Route path="/chat/opencode/new" element={<Dashboard.OpenCodeChat />} />
<Route path="/chat/opencode/:sessionId" element={<Dashboard.OpenCodeChat />} />
<Route path="/plans" element={<Dashboard.Plans />} />
<Route path="/terminal" element={<Dashboard.Terminal />} />
<Route path="/skills" element={<Dashboard.Skills />} />
<Route path="/tasks" element={<Dashboard.Tasks />} />
<Route path="/processes" element={<Dashboard.Processes />} />
<Route path="/task-logs" element={<Dashboard.TaskLogs />} />
<Route path="/auth/signout" element={<Authentication.SignoutScreen />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</Dashboard.DashboardLayout>
)}
</BrowserRouter>
);
}
const HomeScreen = () => {
return (
<div>
<h1>Home</h1>
<Link to="/auth/signout">Signout</Link>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Chat/ChatList/index.tsx
+1 -8
View File
@@ -1,11 +1,4 @@
import { DashboardLayout } from '@/Screens/Dashboard/Layout';
export const ChatList = () => {
return (
<DashboardLayout mobileFull>
<h1>ChatList</h1>
</DashboardLayout>
);
return <h1>ChatList</h1>;
};
src/apps/officer-web/Screens/Dashboard/Chat/index.tsx
+16 -23
View File
@@ -3,7 +3,6 @@ import { useParams } from 'react-router';
import { useQueryClient } from '@tanstack/react-query';
import { useClaude, useOpenCode, type SessionEntry } from 'plugins/Chat/client';
import { ChatPanel } from 'plugins/ChatHistory/client';
import { DashboardLayout } from '../Layout';
import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
export const ClaudeChat = () => {
@@ -15,13 +14,11 @@ export const ClaudeChat = () => {
const claudeModels = useVisibleClaudeModels();
return (
<DashboardLayout mobileFull>
<div className="flex items-center justify-center h-full md:p-4">
<div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
<ChatPanel chat={claude} provider="claude" availableModels={claudeModels} />
</div>
<div className="flex items-center justify-center h-full md:p-4">
<div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
<ChatPanel chat={claude} provider="claude" availableModels={claudeModels} />
</div>
</DashboardLayout>
</div>
);
};
@@ -34,13 +31,11 @@ export const OpenCodeChat = () => {
const openCodeModels = useVisibleOpenCodeModels();
return (
<DashboardLayout mobileFull>
<div className="flex items-center justify-center h-full md:p-4">
<div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
<ChatPanel chat={opencode} provider="opencode" availableModels={openCodeModels} />
</div>
<div className="flex items-center justify-center h-full md:p-4">
<div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
<ChatPanel chat={opencode} provider="opencode" availableModels={openCodeModels} />
</div>
</DashboardLayout>
</div>
);
};
@@ -69,16 +64,14 @@ export const NewChat = () => {
const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
return (
<DashboardLayout mobileFull>
<div className="flex items-center justify-center h-full md:p-4">
<div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
{provider === 'claude' ? (
<ClaudeNewChatInner key="claude" onProviderChange={setProvider} />
) : (
<OpenCodeNewChatInner key="opencode" onProviderChange={setProvider} />
)}
</div>
<div className="flex items-center justify-center h-full md:p-4">
<div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
{provider === 'claude' ? (
<ClaudeNewChatInner key="claude" onProviderChange={setProvider} />
) : (
<OpenCodeNewChatInner key="opencode" onProviderChange={setProvider} />
)}
</div>
</DashboardLayout>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Home/index.tsx
+10 -16
View File
@@ -1,25 +1,19 @@
import { DashboardLayout } from '../Layout';
import { ChatLauncher } from './ChatLauncher';
import { Widget as FileBrowser } from 'plugins/FileBrowser/client';
import { Widget as ChatHistory } from 'plugins/ChatHistory/client';
import { Catalog } from 'sounds';
import { useServerSettings } from '@/state/useServerSettings';
export const Home = () => {
const { plugins } = useServerSettings();
export const HomeScreen = () => {
return (
<DashboardLayout>
<div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full p-4 pt-6 md:p-8 md:pt-12 overflow-y-auto">
<div className="flex flex-col gap-8 flex-1 min-w-0">
<ChatLauncher />
{plugins?.FileBrowser !== false && <FileBrowser />}
</div>
<div className="flex flex-col gap-8 flex-1 min-w-0">
<ChatHistory />
<Catalog />
</div>
<div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full p-4 pt-6 md:p-8 md:pt-12 overflow-y-auto">
<div className="flex flex-col gap-8 flex-1 min-w-0">
<ChatLauncher />
<FileBrowser />
</div>
</DashboardLayout>
<div className="flex flex-col gap-8 flex-1 min-w-0">
<ChatHistory />
<Catalog />
</div>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Layout.tsx → src/apps/officer-web/Screens/Dashboard/Layout.backup.tsx
View File
src/apps/officer-web/Screens/Dashboard/Layout/AuthenticationLayout.tsx
-21
View File
@@ -1,21 +0,0 @@
import { Background } from './Background';
type AuthenticationLayoutProps = {
children?: React.ReactNode;
};
export function AuthenticationLayout({ children }: AuthenticationLayoutProps) {
return (
<div className="relative overflow-hidden h-dvh outline-none inset-0">
<section className="relative h-dvh snap-start overflow-hidden">
<Background />
<div className="absolute inset-0 z-520">
<div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-8 md:pb-12">
{children}
</div>
</div>
</section>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Layout/Background.tsx
-2
View File
@@ -1,4 +1,3 @@
import { DuckAvatar } from "./DuckAvatar";
import { PixelGrid } from "@/components/PixelGrid";
import landscapebg from './landscape1.jpg';
@@ -13,7 +12,6 @@ export function Background() {
}}
>
<PixelGrid />
<DuckAvatar showDebug={false} fullControlMode={false} currentSection={0} />
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx
+24
View File
@@ -0,0 +1,24 @@
import { Background } from './Background';
import { Header } from './Header';
import { Dock, dockItems } from './Dock';
type DashboardLayoutProps = {
children?: React.ReactNode;
};
export function DashboardLayout({ children }: DashboardLayoutProps) {
return (
<div className="relative overflow-hidden h-dvh outline-none inset-0">
<Header />
<section className="relative h-dvh snap-start overflow-hidden">
<Background />
<Dock items={dockItems} />
<div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-[80px] overflow-y-auto">
{children}
</div>
</section>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Dock.tsx → src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx
+16 -1
View File
@@ -46,7 +46,7 @@ export const Dock = ({ items, className }: DockProps) => {
ref={dockRef}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-[550] items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border backdrop-blur-xl shadow-lg ${className ?? 'flex'}`}
className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-5 items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border backdrop-blur-xl shadow-lg ${className ?? 'flex'}`}
style={{ backgroundColor: 'var(--dock-bg)', borderColor: 'var(--dock-border)' }}
>
{items.map((item, index) => {
@@ -89,3 +89,18 @@ export const Dock = ({ items, className }: DockProps) => {
</div>
);
};
import { Terminal, TerminalSquare, FileText, FolderOpen } from 'lucide-react';
import { Sparkles, ClipboardList, ScrollText, Workflow } from 'lucide-react';
export const dockItems: DockItem[] = [
{ label: 'Chat', to: '/chat', icon: Terminal, color: '#60a5fa' },
{ label: 'Files', to: '/files', icon: FolderOpen, color: '#fbbf24' },
{ label: 'Terminal', to: '/terminal', icon: TerminalSquare, color: '#34d399' },
{ label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
{ label: 'Skills', to: '/skills', icon: Sparkles, color: '#c084fc' },
{ label: 'Tasks', to: '/tasks', icon: ClipboardList, color: '#fb923c' },
{ label: 'Processes', to: '/processes', icon: Workflow, color: '#2dd4bf' },
{ label: 'Logs', to: '/task-logs', icon: ScrollText, color: '#94a3b8' },
];
src/apps/officer-web/Screens/Dashboard/Layout/DuckAvatar/DebugPanel.tsx
-43
View File
@@ -1,43 +0,0 @@
type DebugPanelProps = {
fullControlMode: boolean;
cameraInfo: {
cameraPosition: number[];
target: number[];
zoom: number;
};
modelInfo: {
position: number[];
rotation: number[];
scale: number;
};
};
export function DebugPanel({ fullControlMode, cameraInfo, modelInfo }: DebugPanelProps) {
return (
<div className="fixed top-4 left-4 bg-black/80 text-white p-4 rounded text-xs font-mono space-y-2 z-[100]">
<div className="font-bold text-blue-400">Controls:</div>
<div className={fullControlMode ? 'text-green-300' : 'text-yellow-300'}>
Mode: {fullControlMode ? 'FULL CONTROL' : 'ROTATION ONLY'}
</div>
<div>* Left-click/Touch + drag: Rotate</div>
{fullControlMode && (
<>
<div>* Right-click + drag: Pan</div>
<div>* Scroll: Zoom</div>
</>
)}
<div>* Ctrl+Alt+Enter: Toggle full control</div>
<div>* Ctrl+Alt+D: Toggle debug panel</div>
<div className="font-bold text-green-400 pt-2">Camera:</div>
<div>Position: [{cameraInfo.cameraPosition.map((v) => v.toFixed(2)).join(', ')}]</div>
<div>Target: [{cameraInfo.target.map((v) => v.toFixed(2)).join(', ')}]</div>
<div>Zoom: {cameraInfo.zoom.toFixed(2)}</div>
<div className="font-bold text-yellow-400 pt-2">Model:</div>
<div>Position: [{modelInfo.position.map((v) => v.toFixed(2)).join(', ')}]</div>
<div>Rotation: [{modelInfo.rotation.map((v) => v.toFixed(2)).join(', ')}]</div>
<div>Scale: {modelInfo.scale.toFixed(2)}</div>
</div>
);
}
src/apps/officer-web/Screens/Dashboard/Layout/DuckAvatar/DuckAvatar.tsx
-118
View File
@@ -1,118 +0,0 @@
import { Canvas, useThree } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { useEffect, useState, useRef } from 'react';
import { DuckModel } from './DuckModel';
import { DebugPanel } from './DebugPanel';
type CameraInfoProps = {
onUpdate: (info: { cameraPosition: number[]; target: number[]; zoom: number }) => void;
initialTarget: [number, number, number];
fullControlMode: boolean;
initialPosition: [number, number, number];
};
function CameraInfo({ onUpdate, initialTarget, fullControlMode, initialPosition }: CameraInfoProps) {
const { camera } = useThree();
const controlsRef = useRef<any>(null);
useEffect(() => {
if (controlsRef.current) {
controlsRef.current.target.set(...initialTarget);
camera.position.set(...initialPosition);
controlsRef.current.update();
}
}, [initialTarget, initialPosition, camera]);
useEffect(() => {
const interval = setInterval(() => {
if (controlsRef.current) {
const controls = controlsRef.current;
onUpdate({
cameraPosition: camera.position.toArray(),
target: controls.target.toArray(),
zoom: camera.zoom,
});
}
}, 100);
return () => clearInterval(interval);
}, [camera, onUpdate]);
return (
<OrbitControls
ref={controlsRef}
enabled={fullControlMode}
enableRotate={fullControlMode}
enableZoom={fullControlMode}
enablePan={fullControlMode}
target={initialTarget}
/>
);
}
type DuckAvatarProps = {
showDebug: boolean;
fullControlMode: boolean;
currentSection: number;
};
export function DuckAvatar({ showDebug, fullControlMode, currentSection }: DuckAvatarProps) {
const isHeroSection = currentSection === 0;
const [cameraInfo, setCameraInfo] = useState({
cameraPosition: [2.89, 5.24, 7.38],
target: [0.3, 3.29, -0.4],
zoom: 1,
});
const [modelInfo, setModelInfo] = useState({
position: [0, -0.2, 0],
rotation: [-0.1, -0.75, 0],
scale: 4.5,
});
const [isLoaded, setIsLoaded] = useState(false);
const heroClasses = 'fixed top-12 md:top-auto md:bottom-0 left-1/2 -translate-x-1/2 w-[60vh] h-[75vh]';
const miniClasses = 'fixed bottom-4 right-4 w-[20vh] h-[25vh]';
return (
<div
className={`${isHeroSection ? heroClasses : miniClasses} overflow-visible z-1 pointer-events-none`}
style={{
background: 'transparent',
opacity: isLoaded ? 1 : 0,
}}
>
<div className="w-full h-full pointer-events-none overflow-visible" style={{ background: 'transparent' }}>
<Canvas
camera={{
position: [2.89, 5.24, 7.38],
fov: 65,
near: 0.1,
far: 1000,
}}
style={{ background: 'transparent' }}
>
<ambientLight intensity={1.5} />
<directionalLight position={[10, 10, 5]} intensity={2} />
<directionalLight position={[-10, -10, -5]} intensity={1} />
<pointLight position={[0, 5, 0]} intensity={1.5} />
<CameraInfo
onUpdate={setCameraInfo}
initialTarget={[0.3, 3.29, -0.4]}
fullControlMode={fullControlMode}
initialPosition={[2.89, 5.24, 7.38]}
/>
<DuckModel
onUpdate={setModelInfo}
onAssetsLoaded={() => {
setIsLoaded(true);
}}
currentSection={currentSection}
/>
</Canvas>
</div>
{showDebug && <DebugPanel fullControlMode={fullControlMode} cameraInfo={cameraInfo} modelInfo={modelInfo} />}
</div>
);
}
src/apps/officer-web/Screens/Dashboard/Layout/DuckAvatar/DuckModel.tsx
-68
View File
@@ -1,68 +0,0 @@
import { useRef, useEffect } from 'react';
import { useGLTF, useAnimations } from '@react-three/drei';
type DuckModelProps = {
onUpdate: (info: { position: number[]; rotation: number[]; scale: number }) => void;
onAssetsLoaded: () => void;
currentSection: number;
};
export function DuckModel({ onUpdate, onAssetsLoaded, currentSection }: DuckModelProps) {
const character = useGLTF('/static/duck3D/Character_output.glb');
const animations = useGLTF('/static/duck3D/Meshy_Merged_Animations.glb');
const meshRef = useRef<any>(null);
const { actions } = useAnimations(animations.animations, meshRef);
useEffect(() => {
onAssetsLoaded();
}, [character, animations, onAssetsLoaded]);
useEffect(() => {
if (!actions) return;
const isContactSection = currentSection === 6;
if (isContactSection) {
Object.values(actions).forEach((a) => a?.fadeOut(0.4));
return;
}
const action = actions['Walking'];
if (!action) return;
Object.values(actions).forEach((a) => a?.fadeOut(0.4));
action.reset();
action.setLoop(2201, Infinity);
action.clampWhenFinished = false;
action.fadeIn(0.4);
action.play();
}, [actions, currentSection]);
useEffect(() => {
const interval = setInterval(() => {
if (meshRef.current) {
onUpdate({
position: meshRef.current.position.toArray(),
rotation: meshRef.current.rotation.toArray().slice(0, 3),
scale: meshRef.current.scale.x,
});
}
}, 100);
return () => clearInterval(interval);
}, [onUpdate]);
const isContactSection = currentSection === 6;
const rotationY = isContactSection ? 0 : (10 * Math.PI) / 180;
return (
<primitive
ref={meshRef}
object={character.scene}
position={[0, -0.2, 0]}
scale={4.5}
rotation={[-0.1, rotationY, 0]}
/>
);
}
src/apps/officer-web/Screens/Dashboard/Layout/DuckAvatar/index.tsx
-1
View File
@@ -1 +0,0 @@
export * from './DuckAvatar';
src/apps/officer-web/Screens/Dashboard/Layout/Header/Header.tsx
+25
View File
@@ -0,0 +1,25 @@
import { Link } from 'react-router';
import { UserMenu } from './UserMenu';
export function Header() {
return (
<header className="fixed z-10 w-full">
<div
className="shrink-0 border-b backdrop-blur-xl shadow-lg px-3 py-2 md:px-6 md:py-3 flex items-center justify-between"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.25)', borderColor: 'rgba(255, 255, 255, 0.35)' }}
>
<Link to="/">
<img
src="/static/officer-logo.svg"
alt="Officer"
className="h-8 md:h-12 w-auto"
style={{ transform: 'skew(-15deg, -2deg)' }}
/>
</Link>
<UserMenu />
</div>
</header>
);
}
src/apps/officer-web/Screens/Dashboard/Layout/Header/UserMenu.tsx
+59
View File
@@ -0,0 +1,59 @@
import { Link } from 'react-router';
import * as Dropdown from '@/components/ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { User, LogOut, Server, Package, Bot } from 'lucide-react';
import { useAuth } from 'hooks/useAuth';
const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } = Dropdown;
export function UserMenu() {
const { user, isLoading } = useAuth();
if (isLoading) return null;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-duck-yellow cursor-pointer">
<Avatar className="h-9 w-9 rounded-full">
<AvatarImage src={user?.avatar ?? undefined} />
<AvatarFallback className="bg-duck-teal text-duck-yellow text-sm font-bold rounded-full">
{user?.name?.charAt(0).toUpperCase() ?? '?'}
</AvatarFallback>
</Avatar>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="z-10 w-48">
<DropdownMenuItem asChild className="cursor-pointer">
<Link to="/settings/profile">
<User className="mr-2 h-4 w-4" />
Profile
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="cursor-pointer">
<Link to="/settings/ai">
<Bot className="mr-2 h-4 w-4" />
AI Settings
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="cursor-pointer">
<Link to="/settings/server">
<Server className="mr-2 h-4 w-4" />
Server Settings
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="cursor-pointer">
<Link to="/settings/resources">
<Package className="mr-2 h-4 w-4" />
Resources
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="cursor-pointer">
<Link to="/auth/signout">
<LogOut className="mr-2 h-4 w-4" />
Sign Out
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
src/apps/officer-web/Screens/Dashboard/Layout/Header/index.tsx
+1
View File
@@ -0,0 +1 @@
export * from './Header';
src/apps/officer-web/Screens/Dashboard/Layout/index.tsx
+1 -1
View File
@@ -1 +1 @@
export * from './AuthenticationLayout';
export * from './DashboardLayout';
src/apps/officer-web/Screens/Dashboard/OnboardingAdmin/index.tsx
+7 -10
View File
@@ -1,6 +1,5 @@
import { useState, useEffect } from 'react';
import { useServerSettings } from '@/state/useServerSettings';
import { DashboardLayout } from '../Layout';
import { ServerTypeCard } from './ServerTypeCard';
import { AIHarnessesCard } from './AIHarnessesCard';
@@ -46,15 +45,13 @@ export const OnboardingAdmin = () => {
};
return (
<DashboardLayout>
<div className="flex items-center justify-center h-full px-4">
<div className="w-full max-w-lg">
{step === 'server-type' && <ServerTypeCard onNext={nextStep} saveSettings={saveSettings} />}
{step === 'ai-harnesses' && (
<AIHarnessesCard onNext={nextStep} onBack={prevStep} saveSettings={saveSettings} />
)}
</div>
<div className="flex items-center justify-center h-full px-4">
<div className="w-full max-w-lg">
{step === 'server-type' && <ServerTypeCard onNext={nextStep} saveSettings={saveSettings} />}
{step === 'ai-harnesses' && (
<AIHarnessesCard onNext={nextStep} onBack={prevStep} saveSettings={saveSettings} />
)}
</div>
</DashboardLayout>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Plans/index.tsx
+2 -6
View File
@@ -5,8 +5,6 @@ import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import { useClient } from 'hooks/useClient';
import { Card } from '@/components/Card';
import { DashboardLayout } from '../Layout';
export const Plans = () => {
const client = useClient();
const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
@@ -29,8 +27,7 @@ export const Plans = () => {
});
return (
<DashboardLayout>
<div className="flex flex-col h-full p-4">
<div className="flex flex-col h-full p-4">
<Card className="flex-1 overflow-hidden">
{/* Header with plan selector */}
<div className="shrink-0 flex items-center gap-3 px-4 py-2 border-b border-duck-dark/10 bg-white/60">
@@ -59,7 +56,6 @@ export const Plans = () => {
</div>
</div>
</Card>
</div>
</DashboardLayout>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/ResourcePage.tsx
+2 -4
View File
@@ -11,8 +11,6 @@ import { useClient } from 'hooks/useClient';
import { useVisibleClaudeModels } from '@/state/useModels';
import { Card } from '@/components/Card';
import { useClaude, EmbeddableChat, type ChatMessage } from 'plugins/Chat/client';
import { DashboardLayout } from './Layout';
type ResourceSummary = {
dirName: string;
name: string;
@@ -180,7 +178,7 @@ export const ResourcePage = ({ kind, endpoint, queryKey }: ResourcePageProps) =>
);
return (
<DashboardLayout mobileFull={editing}>
<>
<div className="flex h-full p-2 md:p-4 gap-2 md:gap-4">
{/* Left panel — list */}
<Card
@@ -377,6 +375,6 @@ export const ResourcePage = ({ kind, endpoint, queryKey }: ResourcePageProps) =>
</div>
</DialogContent>
</Dialog>
</DashboardLayout>
</>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/AISettings.tsx
+4 -7
View File
@@ -11,7 +11,6 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card } from '@/components/Card';
import { DashboardLayout } from '../Layout';
import { useSettings } from '@/state/useSettings';
import { useUserState } from '@/state/useUserState';
import {
@@ -26,9 +25,8 @@ export const AISettings = () => {
const [mainTab, setMainTab] = useUserState('ai-settings-tab', 'chat-defaults');
return (
<DashboardLayout>
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<Tabs value={mainTab} onValueChange={setMainTab}>
<TabsList className="w-full mb-6">
<TabsTrigger value="chat-defaults" className="flex-1 gap-2 cursor-pointer">
@@ -49,9 +47,8 @@ export const AISettings = () => {
<ModelVisibilitySection />
</TabsContent>
</Tabs>
</Card>
</div>
</DashboardLayout>
</Card>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/index.tsx
+39 -50
View File
@@ -3,12 +3,10 @@ import { Search, User, Lock, Globe, ListChecks, Palette } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
import { Card } from '@/components/Card';
import { DashboardLayout } from '../../Layout';
import { UserData } from './UserData';
import { ChangePassword } from './ChangePassword';
import { Languages } from './Languages';
import { TaskDefaults } from './TaskDefaults';
import { Appearance } from './Appearance';
const sections = [
{
@@ -19,11 +17,11 @@ const sections = [
content: <UserData />,
},
{
key: 'appearance',
icon: Palette,
title: 'Appearance',
description: 'Color theme and light/dark mode.',
content: <Appearance />,
key: 'change-password',
icon: Lock,
title: 'Change Password',
description: 'Update your account password.',
content: <ChangePassword />,
},
{
key: 'tasks',
@@ -39,13 +37,6 @@ const sections = [
description: 'Set your spoken languages and translation preferences.',
content: <Languages />,
},
{
key: 'change-password',
icon: Lock,
title: 'Change Password',
description: 'Update your account password.',
content: <ChangePassword />,
},
];
const allKeys = sections.map((s) => s.key);
@@ -71,42 +62,40 @@ export const ProfileSettings = () => {
}, [search, matchingKeys]);
return (
<DashboardLayout>
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<div className="relative mb-6">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
<Input
placeholder="Search settings..."
value={search}
onChange={(ev) => setSearch(ev.target.value)}
className="pl-9"
/>
</div>
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<div className="relative mb-6">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
<Input
placeholder="Search settings..."
value={search}
onChange={(ev) => setSearch(ev.target.value)}
className="pl-9"
/>
</div>
<Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
{sections.map((section) => (
<div
key={section.key}
ref={(el) => {
sectionRefs.current[section.key] = el;
}}
className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
>
<AccordionItem value={section.key}>
<AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3">
<section.icon className="h-5 w-5 text-duck-forest shrink-0" />
<div className="text-base font-bold text-duck-dark">{section.title}</div>
</div>
</AccordionTrigger>
<AccordionContent>{section.content}</AccordionContent>
</AccordionItem>
</div>
))}
</Accordion>
</Card>
</div>
</DashboardLayout>
<Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
{sections.map((section) => (
<div
key={section.key}
ref={(el) => {
sectionRefs.current[section.key] = el;
}}
className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
>
<AccordionItem value={section.key}>
<AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3">
<section.icon className="h-5 w-5 text-duck-forest shrink-0" />
<div className="text-base font-bold text-duck-dark">{section.title}</div>
</div>
</AccordionTrigger>
<AccordionContent>{section.content}</AccordionContent>
</AccordionItem>
</div>
))}
</Accordion>
</Card>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/ResourceSettings/index.tsx
+2 -5
View File
@@ -5,7 +5,6 @@ import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/Card';
import { useClient } from 'hooks/useClient';
import { DashboardLayout } from '../../Layout';
import { EmbeddableChat, useClaude, useOpenCode } from 'plugins/Chat/client';
import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
@@ -82,8 +81,7 @@ export const ResourceSettings = () => {
const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
return (
<DashboardLayout>
<div className="flex h-full gap-4 px-4 py-8 overflow-hidden">
<div className="flex h-full gap-4 px-4 py-8 overflow-hidden">
<Card className="w-full max-w-2xl h-fit p-6 overflow-y-auto">
<h2 className="text-lg font-bold text-duck-dark mb-1">Applications</h2>
<p className="text-sm text-duck-dark/60 mb-6">System tools and dependencies used by Officer.dev</p>
@@ -175,8 +173,7 @@ export const ResourceSettings = () => {
<OpenCodeChat key="opencode" onProviderChange={setProvider} />
)}
</Card>
</div>
</DashboardLayout>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/ServerSettings/index.tsx
+45 -48
View File
@@ -1,11 +1,10 @@
import { useState, useEffect, useRef, useMemo } from 'react';
import { Search, Terminal, Puzzle, Shield } from 'lucide-react';
import { Search, Terminal, Shield } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
import { Card } from '@/components/Card';
import { DashboardLayout } from '../../Layout';
import { AIHarnessesSection } from './AIHarnessesSection';
import { PluginsSection } from './PluginsSection';
// import { PluginsSection } from './PluginsSection';
import { TerminalSection } from './TerminalSection';
const sections = [
@@ -16,13 +15,13 @@ const sections = [
description: 'Which AI coding tools do you use?',
content: <AIHarnessesSection />,
},
{
key: 'plugins',
icon: Puzzle,
title: 'Plugins',
description: 'Enable or disable installed plugins.',
content: <PluginsSection />,
},
// {
// key: 'plugins',
// icon: Puzzle,
// title: 'Plugins',
// description: 'Enable or disable installed plugins.',
// content: <PluginsSection />,
// },
{
key: 'terminal',
icon: Shield,
@@ -55,45 +54,43 @@ export const ServerSettings = () => {
}, [search, matchingKeys]);
return (
<DashboardLayout>
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<div className="relative mb-6">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
<Input
placeholder="Search settings..."
value={search}
onChange={(ev) => setSearch(ev.target.value)}
className="pl-9"
/>
</div>
<div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
<Card className="w-full max-w-2xl h-fit p-6">
<div className="relative mb-6">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
<Input
placeholder="Search settings..."
value={search}
onChange={(ev) => setSearch(ev.target.value)}
className="pl-9"
/>
</div>
<Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
{sections.map((section) => (
<div
key={section.key}
ref={(el) => {
sectionRefs.current[section.key] = el;
}}
className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
>
<AccordionItem value={section.key}>
<AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3">
<section.icon className="h-5 w-5 text-duck-forest shrink-0" />
<div className="text-left">
<div className="text-base font-bold text-duck-dark">{section.title}</div>
<div className="text-sm font-normal text-duck-dark/70">{section.description}</div>
</div>
<Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
{sections.map((section) => (
<div
key={section.key}
ref={(el) => {
sectionRefs.current[section.key] = el;
}}
className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
>
<AccordionItem value={section.key}>
<AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3">
<section.icon className="h-5 w-5 text-duck-forest shrink-0" />
<div className="text-left">
<div className="text-base font-bold text-duck-dark">{section.title}</div>
<div className="text-sm font-normal text-duck-dark/70">{section.description}</div>
</div>
</AccordionTrigger>
<AccordionContent forceMount>{section.content}</AccordionContent>
</AccordionItem>
</div>
))}
</Accordion>
</Card>
</div>
</DashboardLayout>
</div>
</AccordionTrigger>
<AccordionContent forceMount>{section.content}</AccordionContent>
</AccordionItem>
</div>
))}
</Accordion>
</Card>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Settings/index.tsx
+4 -29
View File
@@ -1,29 +1,4 @@
import { Link } from 'react-router';
import { Bot, ChevronRight } from 'lucide-react';
import { Card } from '@/components/Card';
import { DashboardLayout } from '../Layout';
export const Settings = () => {
return (
<DashboardLayout>
<div className="flex items-center justify-center h-full px-4">
<div className="w-full max-w-4xl grid grid-cols-1 lg:grid-cols-2 gap-8">
<Link to="/settings/ai">
<Card className="p-6 hover:border-duck-teal/50 transition-colors cursor-pointer">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Bot className="h-5 w-5 text-duck-forest" />
<div>
<h2 className="text-xl font-bold text-duck-dark">AI Settings</h2>
<p className="text-sm text-duck-dark/60">Chat defaults, model visibility</p>
</div>
</div>
<ChevronRight className="h-5 w-5 text-duck-dark/40" />
</div>
</Card>
</Link>
</div>
</div>
</DashboardLayout>
);
};
export * from './ProfileSettings';
export * from './AISettings';
export * from './ServerSettings';
export * from './ResourceSettings';
src/apps/officer-web/Screens/Dashboard/TaskLogs/index.tsx
+2 -5
View File
@@ -1,7 +1,6 @@
import { useState, useEffect } from 'react';
import { Search, AlertCircle, CheckCircle2, Clock, ArrowLeft } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { DashboardLayout } from '../Layout';
import { Card } from '@/components/Card';
import { MessageBubble, type ChatMessage } from 'plugins/Chat/client';
@@ -77,8 +76,7 @@ export const TaskLogs = () => {
: logs;
return (
<DashboardLayout>
<div className="flex h-full p-3 md:p-6 gap-4">
<div className="flex h-full p-3 md:p-6 gap-4">
{/* Left panel: list */}
<Card
className={`md:w-80 shrink-0 flex flex-col overflow-hidden ${showDetail ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
@@ -174,7 +172,6 @@ export const TaskLogs = () => {
</>
)}
</Card>
</div>
</DashboardLayout>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Terminal/index.tsx
+5
View File
@@ -0,0 +1,5 @@
import { TerminalView } from 'widgets/TerminalView';
export const Terminal = () => {
return <TerminalView className="h-full w-full p-2" />;
};
src/apps/officer-web/Screens/Dashboard/index.tsx
+13
View File
@@ -0,0 +1,13 @@
export * from './Layout';
export * from './Home';
export * from './Chat';
export * from './OnboardingAdmin';
export * from './PasskeyGate';
export * from './Plans';
export * from './Processes';
export * from './ResourcePage';
export * from './Settings';
export * from './Skills';
export * from './TaskLogs';
export * from './Tasks';
export * from './Terminal';
src/apps/officer-web/frontend.tsx
-12
View File
@@ -6,18 +6,6 @@ import { ThemeProvider } from '@/components/ui/ThemeProvider';
import { Toaster } from '@/components/ui/toaster';
import { Toaster as Sonner } from 'sonner';
import { TooltipProvider } from '@/components/ui/tooltip';
import 'themes/DuckPond/client';
import 'themes/TokyoNight/client';
import 'themes/CatppuccinLatte/client';
import 'themes/CatppuccinMocha/client';
import 'themes/Everforest/client';
import 'themes/Gruvbox/client';
import 'themes/Kanagawa/client';
import 'themes/MatteBlack/client';
import 'themes/Nord/client';
import 'themes/OsakaJade/client';
import 'themes/Ristretto/client';
import 'themes/RosePine/client';
import './styles/index.css';
const headLinks = [
src/apps/officer-web/state/useThemeSync.ts
+1 -36
View File
@@ -2,47 +2,12 @@ import { useEffect } from 'react';
import { useTheme } from '@/components/ui/ThemeProvider';
import { useSettings } from './useSettings';
const THEME_MODES: Record<string, 'light' | 'dark'> = {
DuckPond: 'light',
TokyoNight: 'dark',
CatppuccinLatte: 'light',
CatppuccinMocha: 'dark',
Everforest: 'dark',
Gruvbox: 'dark',
Kanagawa: 'dark',
MatteBlack: 'dark',
Nord: 'dark',
OsakaJade: 'dark',
Ristretto: 'dark',
RosePine: 'dark',
};
const BG_IMAGES: Record<string, string> = {
DuckPond: 'url(/static/landscape1.jpg)',
};
export const useThemeSync = () => {
const { settings } = useSettings();
const { setTheme } = useTheme();
useEffect(() => {
if (!settings) return;
const colorTheme = settings.appearance.colorTheme ?? 'DuckPond';
const root = document.documentElement;
// Set data attribute for CSS scoping (DuckPond uses :root as default)
if (colorTheme === 'DuckPond') {
root.removeAttribute('data-color-theme');
} else {
root.setAttribute('data-color-theme', colorTheme);
}
// Set light/dark class based on theme mode
const mode = THEME_MODES[colorTheme] ?? 'light';
setTheme(mode);
// Set background image
const bgImage = BG_IMAGES[colorTheme] ?? 'none';
root.style.setProperty('--page-bg-image', bgImage);
setTheme('light');
}, [settings?.appearance?.colorTheme]);
};
src/apps/officer-web/styles/globals.css
+163
View File
@@ -121,6 +121,169 @@
}
@layer base {
:root {
/* Duck brand hex colors */
--duck-yellow: #F4C430;
--duck-orange: #EA580C;
--duck-teal: #0891B2;
--duck-forest: #166534;
--duck-dark: #14532D;
--duck-beige: #E7D4B5;
/* Page background */
--pixel-grid-color: rgba(20, 83, 45, 0.1);
/* Glass surfaces */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--dock-bg: rgba(0, 0, 0, 0.15);
--dock-border: rgba(255, 255, 255, 0.1);
--dock-tooltip-bg: rgba(0, 0, 0, 0.75);
/* Card component */
--card-bg: rgba(255, 255, 255, 0.9);
--card-grid-color: rgba(20, 83, 45, 0.08);
--cta: 211 74.77% 45.58%;
--cta-foreground: 0 0% 100%;
--naturegreen: 145 79% 38%;
--naturegreen-foreground: 0 0% 100%;
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 211 74.77% 45.58%;
--accent-foreground: 0 0% 0%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--success: 142.1 76.2% 36.3%;
--success-foreground: 355.7 100% 97.3%;
--brand: 145 79% 38%;
--brand-foreground: 0 0% 100%;
--brand-muted: 145 40% 90%;
--warning: 43 96% 56%;
--warning-foreground: 0 0% 0%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 211 82% 64%;
--chart-secondary: 211 82% 84%;
/* Status colors */
--status-success: 142 76% 36%;
--status-warning: 43 96% 56%;
--status-in-progress: 211 82% 64%;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
/* Hover Effect */
--ctahover: 211 91.53% 34.82%;
}
.dark {
/* Page background */
--pixel-grid-color: rgba(200, 230, 210, 0.08);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.2);
--glass-border: rgba(255, 255, 255, 0.1);
--dock-bg: rgba(0, 0, 0, 0.3);
--dock-border: rgba(255, 255, 255, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.85);
/* Card component */
--card-bg: rgba(10, 20, 15, 0.9);
--card-grid-color: rgba(200, 230, 210, 0.06);
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 211 82% 64%;
--accent-foreground: 0 0% 0%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--success: 142.1 76.2% 36.3%;
--success-foreground: 355.7 100% 97.3%;
--brand: 145 60% 45%;
--brand-foreground: 0 0% 100%;
--brand-muted: 145 30% 25%;
--warning: 43 96% 56%;
--warning-foreground: 0 0% 0%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
/* Chart gradients */
--chart-primary: 211 82% 64%;
--chart-secondary: 211 82% 84%;
/* Status colors */
--status-success: 142 76% 36%;
--status-warning: 43 96% 56%;
--status-in-progress: 211 82% 64%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
* {
@apply border-border;
}
src/apps/officer-web/styles/index.css
+1
View File
@@ -1 +1,2 @@
@import "./globals.css";
@import "./prose.css";
src/apps/officer-web/styles/prose.css
+264
View File
@@ -0,0 +1,264 @@
/* File Viewer — Markdown Prose */
.file-viewer-md {
color: #14532d;
font-size: 0.95rem;
line-height: 1.75;
}
.file-viewer-md h1 {
font-size: 2em;
font-weight: 700;
margin: 1.5em 0 0.5em;
padding-bottom: 0.3em;
border-bottom: 2px solid rgba(20, 83, 45, 0.12);
letter-spacing: -0.02em;
}
.file-viewer-md h2 {
font-size: 1.5em;
font-weight: 600;
margin: 1.4em 0 0.4em;
padding-bottom: 0.25em;
border-bottom: 1px solid rgba(20, 83, 45, 0.08);
}
.file-viewer-md h3 {
font-size: 1.25em;
font-weight: 600;
margin: 1.2em 0 0.4em;
}
.file-viewer-md h4, .file-viewer-md h5, .file-viewer-md h6 {
font-size: 1.05em;
font-weight: 600;
margin: 1em 0 0.3em;
}
.file-viewer-md p {
margin: 0.75em 0;
}
.file-viewer-md a {
color: #0891b2;
text-decoration: underline;
text-underline-offset: 2px;
}
.file-viewer-md a:hover {
color: #0e7490;
}
.file-viewer-md strong {
font-weight: 600;
color: #14532d;
}
.file-viewer-md blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 3px solid #0891b2;
background: rgba(8, 145, 178, 0.05);
border-radius: 0 0.5rem 0.5rem 0;
color: #166534;
}
.file-viewer-md ul, .file-viewer-md ol {
margin: 0.75em 0;
padding-left: 1.75em;
}
.file-viewer-md li {
margin: 0.25em 0;
}
.file-viewer-md li::marker {
color: #0891b2;
}
.file-viewer-md hr {
border: none;
height: 1px;
background: rgba(20, 83, 45, 0.12);
margin: 2em 0;
}
.file-viewer-md table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 0.9em;
}
.file-viewer-md th {
background: rgba(8, 145, 178, 0.08);
font-weight: 600;
text-align: left;
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.12);
}
.file-viewer-md td {
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.08);
}
.file-viewer-md tr:nth-child(even) {
background: rgba(20, 83, 45, 0.02);
}
.file-viewer-md img {
max-width: 100%;
border-radius: 0.5rem;
margin: 1em 0;
}
.file-viewer-md input[type="checkbox"] {
accent-color: #0891b2;
margin-right: 0.5em;
}
/* Skills — Markdown Prose */
.skill-md {
color: #14532d;
font-size: 0.95rem;
line-height: 1.75;
}
.skill-md h1 {
font-size: 2em;
font-weight: 700;
margin: 1.5em 0 0.5em;
padding-bottom: 0.3em;
border-bottom: 2px solid rgba(20, 83, 45, 0.12);
letter-spacing: -0.02em;
}
.skill-md h2 {
font-size: 1.5em;
font-weight: 600;
margin: 1.4em 0 0.4em;
padding-bottom: 0.25em;
border-bottom: 1px solid rgba(20, 83, 45, 0.08);
}
.skill-md h3 {
font-size: 1.25em;
font-weight: 600;
margin: 1.2em 0 0.4em;
}
.skill-md h4, .skill-md h5, .skill-md h6 {
font-size: 1.05em;
font-weight: 600;
margin: 1em 0 0.3em;
}
.skill-md p {
margin: 0.75em 0;
}
.skill-md a {
color: #0891b2;
text-decoration: underline;
text-underline-offset: 2px;
}
.skill-md a:hover {
color: #0e7490;
}
.skill-md strong {
font-weight: 600;
color: #14532d;
}
.skill-md blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 3px solid #0891b2;
background: rgba(8, 145, 178, 0.05);
border-radius: 0 0.5rem 0.5rem 0;
color: #166534;
}
.skill-md ul, .skill-md ol {
margin: 0.75em 0;
padding-left: 1.75em;
}
.skill-md li {
margin: 0.25em 0;
}
.skill-md li::marker {
color: #0891b2;
}
.skill-md code {
padding: 0.15em 0.4em;
border-radius: 0.25rem;
background: rgba(8, 145, 178, 0.1);
color: #0891b2;
font-size: 0.85em;
font-family: ui-monospace, monospace;
}
.skill-md pre {
margin: 1em 0;
padding: 1em;
border-radius: 0.5rem;
background: #0d1117;
overflow-x: auto;
font-size: 0.875rem;
line-height: 1.6;
}
.skill-md pre code {
padding: 0;
border-radius: 0;
background: none;
color: #e6edf3;
font-size: inherit;
}
.skill-md hr {
border: none;
height: 1px;
background: rgba(20, 83, 45, 0.12);
margin: 2em 0;
}
.skill-md table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 0.9em;
}
.skill-md th {
background: rgba(8, 145, 178, 0.08);
font-weight: 600;
text-align: left;
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.12);
}
.skill-md td {
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.08);
}
.skill-md tr:nth-child(even) {
background: rgba(20, 83, 45, 0.02);
}
.skill-md img {
max-width: 100%;
border-radius: 0.5rem;
margin: 1em 0;
}
.skill-md input[type="checkbox"] {
accent-color: #0891b2;
margin-right: 0.5em;
}