feat(webui): add office main+nodes scene with Star assets

2026-05-05 14:07:32 +08:00 · 2026-03-05 14:27:27 +08:00
parent 8df91df91c
commit 7cbb28eec8
25 changed files with 785 additions and 1 deletions
--- a/webui/src/components/Sidebar.tsx
+++ b/webui/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { LayoutDashboard, MessageSquare, Settings, Clock, Server, Terminal, Zap, FolderOpen, ClipboardList, ListTodo, BrainCircuit, Hash } from 'lucide-react';
+import { LayoutDashboard, MessageSquare, Settings, Clock, Server, Terminal, Zap, FolderOpen, ClipboardList, ListTodo, BrainCircuit, Hash, Map } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import NavItem from './NavItem';
@@ -38,6 +38,7 @@ const Sidebar: React.FC = () => {
    {
      title: t('sidebarInsights'),
      items: [
+        { icon: <Map className="w-5 h-5" />, label: t('office'), to: '/office' },
        { icon: <BrainCircuit className="w-5 h-5" />, label: t('ekg'), to: '/ekg' },
      ],
    },
--- a/webui/src/components/office/OfficeScene.tsx
+++ b/webui/src/components/office/OfficeScene.tsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { OFFICE_CANVAS, OFFICE_ZONE_POINT, OFFICE_ZONE_SLOTS, OfficeZone } from './officeLayout';
+
+export type OfficeMainState = {
+  state?: string;
+  detail?: string;
+  zone?: string;
+  task_id?: string;
+};
+
+export type OfficeNodeState = {
+  id?: string;
+  name?: string;
+  state?: string;
+  zone?: string;
+  detail?: string;
+  updated_at?: string;
+};
+
+type OfficeSceneProps = {
+  main: OfficeMainState;
+  nodes: OfficeNodeState[];
+};
+
+type SpriteSpec = {
+  src: string;
+  frameW: number;
+  frameH: number;
+  cols: number;
+  start: number;
+  end: number;
+  fps: number;
+  scale: number;
+};
+
+const TICK_FPS = 12;
+
+const MAIN_SPRITES: Record<'idle' | 'working' | 'syncing' | 'error', SpriteSpec> = {
+  idle: {
+    src: '/webui/office/star-idle-v5.png',
+    frameW: 256,
+    frameH: 256,
+    cols: 8,
+    start: 0,
+    end: 47,
+    fps: 12,
+    scale: 0.62,
+  },
+  working: {
+    src: '/webui/office/star-working-spritesheet-grid.webp',
+    frameW: 300,
+    frameH: 300,
+    cols: 8,
+    start: 0,
+    end: 37,
+    fps: 12,
+    scale: 0.56,
+  },
+  syncing: {
+    src: '/webui/office/sync-animation-v3-grid.webp',
+    frameW: 256,
+    frameH: 256,
+    cols: 7,
+    start: 1,
+    end: 47,
+    fps: 12,
+    scale: 0.54,
+  },
+  error: {
+    src: '/webui/office/error-bug-spritesheet-grid.webp',
+    frameW: 220,
+    frameH: 220,
+    cols: 8,
+    start: 0,
+    end: 71,
+    fps: 12,
+    scale: 0.66,
+  },
+};
+
+const NODE_SPRITES: SpriteSpec[] = Array.from({ length: 6 }, (_, i) => ({
+  src: `/webui/office/guest_anim_${i + 1}.webp`,
+  frameW: 32,
+  frameH: 32,
+  cols: 8,
+  start: 0,
+  end: 7,
+  fps: 8,
+  scale: 1.55,
+}));
+
+function normalizeZone(z: string | undefined): OfficeZone {
+  const v = (z || '').trim().toLowerCase();
+  if (v === 'work' || v === 'server' || v === 'bug' || v === 'breakroom') return v;
+  return 'breakroom';
+}
+
+function stateTone(s: string | undefined): string {
+  const v = (s || '').trim().toLowerCase();
+  switch (v) {
+    case 'running':
+    case 'executing':
+    case 'writing':
+      return 'bg-cyan-400';
+    case 'online':
+      return 'bg-emerald-400';
+    case 'error':
+    case 'blocked':
+    case 'offline':
+      return 'bg-red-400';
+    case 'syncing':
+    case 'suppressed':
+      return 'bg-violet-400';
+    case 'success':
+      return 'bg-emerald-400';
+    default:
+      return 'bg-zinc-300';
+  }
+}
+
+function normalizeMainSpriteState(s: string | undefined): keyof typeof MAIN_SPRITES {
+  const v = (s || '').trim().toLowerCase();
+  if (v === 'error' || v === 'blocked') return 'error';
+  if (v === 'syncing' || v === 'suppressed' || v === 'sync') return 'syncing';
+  if (v === 'running' || v === 'executing' || v === 'writing' || v === 'researching' || v === 'success') return 'working';
+  return 'idle';
+}
+
+function textHash(input: string): number {
+  let h = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    h = (h * 31 + input.charCodeAt(i)) >>> 0;
+  }
+  return h;
+}
+
+function frameAtTick(spec: SpriteSpec, tick: number, seed = 0): number {
+  const frameCount = Math.max(1, spec.end - spec.start + 1);
+  const absoluteMs = tick * (1000 / TICK_FPS);
+  const frame = Math.floor((absoluteMs + seed) / (1000 / Math.max(1, spec.fps)));
+  return spec.start + (frame % frameCount);
+}
+
+type SpriteProps = {
+  spec: SpriteSpec;
+  frame: number;
+  className?: string;
+};
+
+const SpriteSheet: React.FC<SpriteProps> = ({ spec, frame, className }) => {
+  const col = frame % spec.cols;
+  const row = Math.floor(frame / spec.cols);
+  return (
+    <div
+      className={className}
+      style={{
+        width: spec.frameW,
+        height: spec.frameH,
+        backgroundImage: `url(${spec.src})`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: `-${col * spec.frameW}px -${row * spec.frameH}px`,
+        imageRendering: 'pixelated',
+        transform: `translate(-50%, -50%) scale(${spec.scale})`,
+        transformOrigin: 'center center',
+      }}
+    />
+  );
+};
+
+const OfficeScene: React.FC<OfficeSceneProps> = ({ main, nodes }) => {
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setTick((v) => (v + 1) % 10000000);
+    }, Math.round(1000 / TICK_FPS));
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const bgSrc = '/webui/office/office_bg_small.webp';
+  const placedNodes = useMemo(() => {
+    const counters: Record<OfficeZone, number> = { breakroom: 0, work: 0, server: 0, bug: 0 };
+    return nodes.slice(0, 24).map((n) => {
+      const zone = normalizeZone(n.zone);
+      const slots = OFFICE_ZONE_SLOTS[zone];
+      const idx = counters[zone] % slots.length;
+      counters[zone] += 1;
+      const stableKey = `${n.id || ''}|${n.name || ''}|${idx}`;
+      const avatarSeed = textHash(stableKey);
+      const spriteIndex = avatarSeed % NODE_SPRITES.length;
+      return { ...n, zone, point: slots[idx], spriteIndex, avatarSeed };
+    });
+  }, [nodes]);
+
+  const mainZone = normalizeZone(main.zone);
+  const mainPoint = OFFICE_ZONE_POINT[mainZone];
+  const mainSprite = MAIN_SPRITES[normalizeMainSpriteState(main.state)];
+  const mainFrame = frameAtTick(mainSprite, tick);
+
+  return (
+    <div className="relative w-full overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-950/60">
+      <div className="relative aspect-[16/9]">
+        <img src={bgSrc} alt="office" className="absolute inset-0 h-full w-full object-cover" />
+        <div className="absolute inset-0">
+          <div
+            className="absolute -translate-x-1/2 -translate-y-1/2"
+            style={{
+              left: `${(mainPoint.x / OFFICE_CANVAS.width) * 100}%`,
+              top: `${(mainPoint.y / OFFICE_CANVAS.height) * 100}%`,
+            }}
+            title={`${main.state || 'idle'} ${main.detail || ''}`.trim()}
+          >
+            <div className="relative">
+              <SpriteSheet spec={mainSprite} frame={mainFrame} className="absolute left-1/2 top-1/2" />
+              <div className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-[145%] h-2.5 w-2.5 rounded-full ring-2 ring-white/80 ${stateTone(main.state)} shadow-lg shadow-black/50`} />
+              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 translate-y-[62px] rounded bg-black/75 px-2 py-0.5 text-[10px] font-semibold tracking-wide text-zinc-100">
+                clawgo
+              </div>
+            </div>
+          </div>
+
+          {placedNodes.map((n, i) => (
+            <div
+              key={`${n.id || 'node'}-${i}`}
+              className="absolute -translate-x-1/2 -translate-y-1/2"
+              style={{
+                left: `${(n.point.x / OFFICE_CANVAS.width) * 100}%`,
+                top: `${(n.point.y / OFFICE_CANVAS.height) * 100}%`,
+              }}
+              title={`${n.name || n.id || 'node'} · ${n.state || 'idle'}${n.detail ? ` · ${n.detail}` : ''}`}
+            >
+              <div className="relative">
+                <SpriteSheet
+                  spec={NODE_SPRITES[n.spriteIndex]}
+                  frame={frameAtTick(NODE_SPRITES[n.spriteIndex], tick, n.avatarSeed % 1000)}
+                  className="absolute left-1/2 top-1/2"
+                />
+                <div className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-[68%] h-2 w-2 rounded-full ring-1 ring-black/50 ${stateTone(n.state)}`} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OfficeScene;
--- a/webui/src/components/office/officeLayout.ts
+++ b/webui/src/components/office/officeLayout.ts
@@ -0,0 +1,49 @@
+export type OfficeZone = 'breakroom' | 'work' | 'server' | 'bug';
+
+export const OFFICE_CANVAS = {
+  width: 1280,
+  height: 720,
+};
+
+export const OFFICE_ZONE_POINT: Record<OfficeZone, { x: number; y: number }> = {
+  breakroom: { x: 1070, y: 610 },
+  work: { x: 640, y: 470 },
+  server: { x: 820, y: 220 },
+  bug: { x: 230, y: 210 },
+};
+
+export const OFFICE_ZONE_SLOTS: Record<OfficeZone, Array<{ x: number; y: number }>> = {
+  breakroom: [
+    { x: 1020, y: 620 },
+    { x: 1090, y: 620 },
+    { x: 1150, y: 620 },
+    { x: 1040, y: 670 },
+    { x: 1110, y: 670 },
+    { x: 1180, y: 670 },
+  ],
+  work: [
+    { x: 520, y: 470 },
+    { x: 600, y: 470 },
+    { x: 680, y: 470 },
+    { x: 760, y: 470 },
+    { x: 560, y: 530 },
+    { x: 640, y: 530 },
+    { x: 720, y: 530 },
+    { x: 800, y: 530 },
+  ],
+  server: [
+    { x: 760, y: 240 },
+    { x: 830, y: 240 },
+    { x: 900, y: 240 },
+    { x: 780, y: 290 },
+    { x: 850, y: 290 },
+  ],
+  bug: [
+    { x: 180, y: 230 },
+    { x: 240, y: 230 },
+    { x: 300, y: 230 },
+    { x: 210, y: 280 },
+    { x: 270, y: 280 },
+  ],
+};
+