@flame0510/project-aether 1.1.9

package/app/api/workspace/route.ts

@@ -0,0 +1,392 @@
+import fs from 'fs';
+import path from 'path';
+import { execFileSync, execSync } from 'child_process';
+import { NextResponse, type NextRequest } from 'next/server';
+import { requireAuthJWT } from '@/lib/rev4a-auth';
+
+const LOCAL_ROOT = (process.env.REV4A_WORKSPACE_ROOT || '').replace(/\/+$/, '/');
+const HAS_LOCAL_WORKSPACE = LOCAL_ROOT.length > 0;
+const IGNORED_DIRS = new Set(['node_modules', '.trash', '.git', '.next', 'cache']);
+const TEXT_EXTENSIONS = new Set(['.md', '.json', '.txt', '.html', '.py', '.css', '.js', '.ts', '.tsx', '.yaml', '.yml', '.env', '.sh', '.mjs', '.cjs', '.jsx']);
+const BINARY_EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.pdf', '.ico']);
+const MIME_MAP: Record<string, string> = {
+  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml',
+  '.pdf': 'application/pdf', '.ico': 'image/x-icon',
+};
+
+interface Workspace {
+  id: string;
+  label: string;
+  type: 'host' | 'container';
+  path: string;
+  containerName?: string;
+}
+
+interface WorkspaceEntry {
+  name: string;
+  path: string;
+  relPath: string;
+  type: 'file' | 'directory';
+  size: number;
+  mtimeMs: number;
+  isDirectory: boolean;
+  isFile: boolean;
+}
+
+function shellEscape(value: string): string {
+  return `'${value.replace(/'/g, `'\\''`)}'`;
+}
+
+function getWorkspace(id: string): Workspace | null {
+  if (id === 'local' && HAS_LOCAL_WORKSPACE) {
+    return { id: 'local', label: 'Local', type: 'host', path: LOCAL_ROOT };
+  }
+  if (id.startsWith('container-')) {
+    const name = id.slice(10);
+    return { id, label: name, type: 'container', path: '/root/.openclaw/workspace/', containerName: name };
+  }
+  return null;
+}
+
+function listWorkspaces(): Workspace[] {
+  const workspaces: Workspace[] = [];
+  if (HAS_LOCAL_WORKSPACE) {
+    workspaces.push({ id: 'local', label: 'Local', type: 'host', path: LOCAL_ROOT });
+  }
+
+  // Discover container workspaces from Docker
+  try {
+    const output = execFileSync(
+      'docker',
+      ['ps', '--filter', 'label=AGENT_ID', '--format', '{{.Names}}|{{.Label "AGENT_ID"}}'],
+      { timeout: 5000, encoding: 'utf-8' },
+    ).trim();
+    if (output) {
+      for (const line of output.split('\n')) {
+        const [name, agentId] = line.split('|');
+        if (name && agentId) {
+          // Read AGENT_NAME env for display name (fallback to agentId)
+          let displayName = '';
+          try {
+            displayName = execFileSync(
+              'docker',
+              ['exec', name, 'sh', '-c', 'printenv AGENT_NAME'],
+              { timeout: 3000, encoding: 'utf-8' },
+            ).trim();
+          } catch { /* use fallback */ }
+          workspaces.push({
+            id: `container-${name}`,
+            label: displayName || `${agentId} (${name})`,
+            type: 'container',
+            path: '/root/.openclaw/workspace/',
+            containerName: name,
+          });
+        }
+      }
+    }
+  } catch {
+    // Docker not available, host-only
+  }
+
+  return workspaces;
+}
+
+function compareWorkspaceEntries(a: WorkspaceEntry, b: WorkspaceEntry): number {
+  const aSegs = a.relPath.split('/');
+  const bSegs = b.relPath.split('/');
+  const minLen = Math.min(aSegs.length, bSegs.length);
+
+  for (let i = 0; i < minLen; i++) {
+    if (aSegs[i] !== bSegs[i]) {
+      const aIsDir = i < aSegs.length - 1 || a.type === 'directory';
+      const bIsDir = i < bSegs.length - 1 || b.type === 'directory';
+      if (aIsDir !== bIsDir) {
+        return aIsDir ? -1 : 1;
+      }
+      return aSegs[i].localeCompare(bSegs[i]);
+    }
+  }
+
+  if (aSegs.length < bSegs.length) return -1;
+  if (aSegs.length > bSegs.length) return 1;
+  return 0;
+}
+
+function listHostDir(dirPath: string): Record<string, unknown>[] {
+  const entries: Record<string, unknown>[] = [];
+  try {
+    const dirs = fs.readdirSync(dirPath, { withFileTypes: true });
+    for (const entry of dirs) {
+      if (IGNORED_DIRS.has(entry.name) || entry.name.startsWith('.')) continue;
+      const absPath = path.join(dirPath, entry.name);
+      const isDir = entry.isDirectory();
+      const stat = fs.statSync(absPath, { throwIfNoEntry: false });
+      entries.push({
+        name: entry.name,
+        isDirectory: isDir,
+        isFile: !isDir,
+        path: absPath,
+        size: stat?.size ?? 0,
+        mtimeMs: stat?.mtimeMs ?? 0,
+      });
+    }
+  } catch { /* empty */ }
+  return entries;
+}
+
+function listHostTree(rootPath: string): WorkspaceEntry[] {
+  const entries: WorkspaceEntry[] = [];
+
+  function walk(dirPath: string, prefix = ''): void {
+    let dirEntries: fs.Dirent[] = [];
+    try {
+      dirEntries = fs.readdirSync(dirPath, { withFileTypes: true });
+    } catch {
+      return;
+    }
+
+    for (const entry of dirEntries) {
+      if (IGNORED_DIRS.has(entry.name) || entry.name.startsWith('.')) continue;
+      const absPath = path.join(dirPath, entry.name);
+      const relPath = prefix ? `${prefix}/${entry.name}` : entry.name;
+
+      let stat: fs.Stats;
+      try {
+        stat = fs.statSync(absPath);
+      } catch {
+        continue;
+      }
+
+      const isDirectory = entry.isDirectory();
+      entries.push({
+        name: entry.name,
+        path: absPath,
+        relPath,
+        type: isDirectory ? 'directory' : 'file',
+        size: isDirectory ? 0 : stat.size,
+        mtimeMs: stat.mtimeMs,
+        isDirectory,
+        isFile: !isDirectory,
+      });
+
+      if (isDirectory) walk(absPath, relPath);
+    }
+  }
+
+  walk(rootPath);
+  entries.sort(compareWorkspaceEntries);
+  return entries;
+}
+
+function readHostFile(filePath: string): { content: string; isBinary: boolean; buffer?: Buffer } {
+  const ext = path.extname(filePath).toLowerCase();
+  if (BINARY_EXTENSIONS.has(ext)) {
+    return { content: '', isBinary: true, buffer: fs.readFileSync(filePath) };
+  }
+  return { content: fs.readFileSync(filePath, 'utf8'), isBinary: false };
+}
+
+function listContainerDir(containerName: string, dirPath: string): Record<string, unknown>[] {
+  const entries: Record<string, unknown>[] = [];
+  try {
+    const output = execSync(
+      `docker exec ${containerName} ls -1Ap ${dirPath}`,
+      { timeout: 5000, encoding: 'utf-8' },
+    ).trim();
+    if (!output) return entries;
+    for (const name of output.split('\n')) {
+      if (!name || name === '.' || name === '..' || name.startsWith('.') || IGNORED_DIRS.has(name.replace('/', ''))) continue;
+      const isDir = name.endsWith('/');
+      entries.push({ name: isDir ? name.slice(0, -1) : name, isDirectory: isDir, isFile: !isDir });
+    }
+  } catch { /* empty */ }
+  return entries;
+}
+
+function listContainerTree(containerName: string, rootPath: string): WorkspaceEntry[] {
+  const entries: WorkspaceEntry[] = [];
+  const escapedRoot = shellEscape(rootPath);
+  const findCommand = `cd ${escapedRoot} && find . \\( -name node_modules -o -name .git -o -name .next -o -name .trash -o -name cache \\) -prune -o -mindepth 1 -printf '%P|%y|%s|%T@\\n'`;
+  const command = `docker exec ${containerName} sh -lc ${shellEscape(findCommand)}`;
+
+  try {
+    const output = execSync(command, { timeout: 10000, encoding: 'utf-8', maxBuffer: 10 * 1024 * 1024 }).trim();
+    if (!output) return entries;
+
+    for (const line of output.split('\n')) {
+      if (!line) continue;
+      const [relPath, rawType, rawSize, rawMtime] = line.split('|');
+      if (!relPath || relPath.startsWith('.')) continue;
+      const isDirectory = rawType === 'd';
+      entries.push({
+        name: path.posix.basename(relPath),
+        path: path.posix.join(rootPath, relPath),
+        relPath,
+        type: isDirectory ? 'directory' : 'file',
+        size: isDirectory ? 0 : Number(rawSize || 0),
+        mtimeMs: Math.round(Number(rawMtime || 0) * 1000),
+        isDirectory,
+        isFile: !isDirectory,
+      });
+    }
+  } catch {
+    return entries;
+  }
+
+  entries.sort(compareWorkspaceEntries);
+  return entries;
+}
+
+function treeResponse(workspace: Workspace, workspaceId: string, targetPath: string, entries: WorkspaceEntry[]) {
+  return NextResponse.json({
+    workspace: workspaceId,
+    label: workspace.label,
+    path: targetPath,
+    root: targetPath,
+    type: workspace.type,
+    entries,
+    tree: entries,
+    files: entries,
+  });
+}
+
+function readContainerFile(containerName: string, filePath: string): { content: string; isBinary: boolean } {
+  const ext = path.extname(filePath).toLowerCase();
+  const isBinary = BINARY_EXTENSIONS.has(ext);
+  try {
+    const content = execSync(
+      `docker exec ${containerName} cat ${filePath}`,
+      { timeout: 5000, encoding: 'utf-8' },
+    );
+    return { content: content ?? '', isBinary };
+  } catch {
+    return { content: '', isBinary };
+  }
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  const denied = await requireAuthJWT(request); if (denied) return denied as any;
+  const url = new URL(request.url);
+  const action = url.searchParams.get('action');
+  let ws = url.searchParams.get('workspace');
+  const filePath = url.searchParams.get('path');
+  const wantsTree = url.searchParams.get('tree') === '1';
+
+  // action=list → list available workspaces
+  if (action === 'list') {
+    return NextResponse.json({ workspaces: listWorkspaces() });
+  }
+
+  // No workspace specified → default to first available
+  if (!ws) {
+    const all = listWorkspaces();
+    ws = all.length > 0 ? all[0].id : '';
+  }
+
+  const workspace = getWorkspace(ws);
+  if (!workspace) {
+    return NextResponse.json({ error: `Unknown workspace: ${ws}` }, { status: 400 });
+  }
+
+  if (workspace.type === 'host') {
+    const targetPath = filePath ? path.resolve(filePath) : workspace.path;
+
+    // Security: allow only LOCAL_ROOT and subpaths
+    if (!targetPath.startsWith(path.resolve(LOCAL_ROOT))) {
+      return NextResponse.json({ error: 'Access denied' }, { status: 403 });
+    }
+
+    if (!fs.existsSync(targetPath)) {
+      return NextResponse.json({ error: 'Path not found' }, { status: 404 });
+    }
+
+    if (wantsTree) {
+      return treeResponse(workspace, ws, targetPath, listHostTree(targetPath));
+    }
+
+    if (fs.statSync(targetPath).isDirectory()) {
+      const files = listHostDir(targetPath);
+      return NextResponse.json({ workspace: ws, label: workspace.label, path: targetPath, type: 'host', files });
+    }
+
+    const result = readHostFile(targetPath);
+    if (result.isBinary && result.buffer) {
+      const mime = MIME_MAP[path.extname(targetPath).toLowerCase()] || 'application/octet-stream';
+      return new NextResponse(new Uint8Array(result.buffer), {
+        headers: { 'Content-Type': mime, 'Content-Length': String(result.buffer.length) },
+      });
+    }
+
+    return NextResponse.json({ workspace: ws, label: workspace.label, path: targetPath, type: 'host', content: result.content });
+  }
+
+  // Container workspace
+  if (workspace.type === 'container' && workspace.containerName) {
+    const targetPath = filePath || workspace.path;
+
+    if (wantsTree) {
+      return treeResponse(workspace, ws, targetPath, listContainerTree(workspace.containerName, targetPath));
+    }
+
+    if (filePath) {
+      // Check if it's a directory
+      try {
+        const isDir = execSync(
+          `docker exec ${workspace.containerName} test -d ${targetPath} && echo YES || echo NO`,
+          { timeout: 5000, encoding: 'utf-8' },
+        ).trim();
+        if (isDir === 'YES') {
+          const files = listContainerDir(workspace.containerName, targetPath);
+          return NextResponse.json({ workspace: ws, label: workspace.label, path: targetPath, type: 'container', files });
+        }
+      } catch { /* fall through to read */ }
+    }
+
+    const result = readContainerFile(workspace.containerName, targetPath);
+    return NextResponse.json({ workspace: ws, label: workspace.label, path: targetPath, type: 'container', content: result.content });
+  }
+
+  return NextResponse.json({ error: 'Unsupported workspace type' }, { status: 400 });
+}
+
+export async function PUT(request: NextRequest): Promise<NextResponse> {
+  const denied = await requireAuthJWT(request); if (denied) return denied as any;
+  try {
+    const body = (await request.json()) as { workspace?: string; path?: string; content?: string };
+    const ws = body?.workspace || 'local';
+    const { path: filePath, content } = body ?? {};
+    if (!ws || !filePath || typeof content !== 'string') {
+      return NextResponse.json({ error: 'Missing workspace, path, or content' }, { status: 400 });
+    }
+
+    const workspace = getWorkspace(ws);
+    if (!workspace) {
+      return NextResponse.json({ error: `Unknown workspace: ${ws}` }, { status: 400 });
+    }
+
+    if (workspace.type === 'host') {
+      const normalizedPath = path.resolve(filePath);
+      if (!normalizedPath.startsWith(path.resolve(LOCAL_ROOT))) {
+        return NextResponse.json({ error: 'Access denied' }, { status: 403 });
+      }
+      fs.mkdirSync(path.dirname(normalizedPath), { recursive: true });
+      fs.writeFileSync(normalizedPath, content, 'utf8');
+      return NextResponse.json({ ok: true });
+    }
+
+    if (workspace.type === 'container' && workspace.containerName) {
+      execSync(
+        `docker exec -i ${workspace.containerName} sh -c 'mkdir -p $(dirname '${
+          filePath.replace(/'/g, "'\\''")
+        }') && cat > ${filePath.replace(/'/g, "'\\''")}' << 'EOFINNER'\n${content}\nEOFINNER`,
+        { timeout: 10000, encoding: 'utf-8' },
+      );
+      return NextResponse.json({ ok: true });
+    }
+
+    return NextResponse.json({ error: 'Unsupported workspace type' }, { status: 400 });
+  } catch (e: unknown) {
+    return NextResponse.json({ error: (e as Error).message }, { status: 500 });
+  }
+}

package/app/api/workspace/stream/route.ts

@@ -0,0 +1,136 @@
+import fs from 'fs';
+import path from 'path';
+import { type NextRequest } from 'next/server';
+import { requireAuthJWT } from '@/lib/rev4a-auth';
+
+export const dynamic = 'force-dynamic';
+
+const ROOT_PATH = process.env.REV4A_WORKSPACE_ROOT || '';
+const STREAM_ENABLED = ROOT_PATH.length > 0;
+const POLL_MS = 3000;
+const IGNORED_DIRS = new Set(['node_modules', '.trash']);
+const ALLOWED_EXT = new Set(['.md', '.json', '.txt', '.html', '.py', '.css', '.js', '.ts', '.tsx', '.yaml', '.yml', '.env', '.sh', '.pdf', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.ico']);
+
+interface SnapshotEntry {
+  path: string;
+  rel_path: string;
+  type: 'file' | 'directory';
+  size: number;
+  mtimeMs: number;
+}
+
+interface WorkspaceChange extends SnapshotEntry {
+  change: 'added' | 'modified' | 'removed';
+}
+
+function shouldIgnoreName(name: string): boolean {
+  return name.startsWith('.') || IGNORED_DIRS.has(name);
+}
+
+function collectSnapshot(): Map<string, SnapshotEntry> {
+  const snapshot = new Map<string, SnapshotEntry>();
+
+  function walk(dir: string, prefix = ''): void {
+    let entries: fs.Dirent[] = [];
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+
+    for (const entry of entries) {
+      if (shouldIgnoreName(entry.name)) continue;
+      const absPath = path.join(dir, entry.name);
+      const relPath = prefix ? `${prefix}/${entry.name}` : entry.name;
+
+      let stat: fs.Stats;
+      try {
+        stat = fs.statSync(absPath);
+      } catch {
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        snapshot.set(absPath, { path: absPath, rel_path: relPath, type: 'directory', size: 0, mtimeMs: stat.mtimeMs });
+        walk(absPath, relPath);
+        continue;
+      }
+
+      const ext = path.extname(entry.name).toLowerCase();
+      if (!ALLOWED_EXT.has(ext)) continue;
+      snapshot.set(absPath, { path: absPath, rel_path: relPath, type: 'file', size: stat.size, mtimeMs: stat.mtimeMs });
+    }
+  }
+
+  walk(ROOT_PATH);
+  return snapshot;
+}
+
+function diffSnapshots(previous: Map<string, SnapshotEntry>, next: Map<string, SnapshotEntry>): WorkspaceChange[] {
+  const changes: WorkspaceChange[] = [];
+
+  for (const [key, nextEntry] of next) {
+    const prevEntry = previous.get(key);
+    if (!prevEntry) {
+      changes.push({ ...nextEntry, change: 'added' });
+      continue;
+    }
+    if (prevEntry.mtimeMs !== nextEntry.mtimeMs || prevEntry.size !== nextEntry.size || prevEntry.type !== nextEntry.type) {
+      changes.push({ ...nextEntry, change: 'modified' });
+    }
+  }
+
+  for (const [key, prevEntry] of previous) {
+    if (!next.has(key)) changes.push({ ...prevEntry, change: 'removed' });
+  }
+
+  return changes;
+}
+
+export async function GET(request: NextRequest): Promise<Response> {
+  const denied = await requireAuthJWT(request); if (denied) return denied as any;
+  if (!STREAM_ENABLED) {
+    return new Response('Workspace stream disabled (REV4A_WORKSPACE_ROOT not set)', { status: 404 });
+  }
+
+  const encoder = new TextEncoder();
+  let previous = collectSnapshot();
+
+  const stream = new ReadableStream({
+    start(controller) {
+      const send = (event: string, data: unknown) => {
+        controller.enqueue(encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`));
+      };
+
+      send('workspace_ready', { type: 'workspace_ready', ts: Date.now(), root: ROOT_PATH, count: previous.size });
+
+      const interval = setInterval(() => {
+        try {
+          const next = collectSnapshot();
+          const changes = diffSnapshots(previous, next);
+          previous = next;
+          if (changes.length > 0) {
+            send('workspace_changed', { type: 'workspace_changed', ts: Date.now(), changed: changes.slice(0, 200), truncated: changes.length > 200 });
+          } else {
+            send('heartbeat', { type: 'heartbeat', ts: Date.now() });
+          }
+        } catch (error) {
+          send('workspace_error', { type: 'workspace_error', ts: Date.now(), error: error instanceof Error ? error.message : String(error) });
+        }
+      }, POLL_MS);
+
+      request.signal.addEventListener('abort', () => {
+        clearInterval(interval);
+        controller.close();
+      });
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+    },
+  });
+}

package/app/components/AppShell.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import AuthGuard from './AuthGuard';
+import Sidebar from './Sidebar';
+import FloatingActions from './FloatingActions';
+import VersionBanner from './VersionBanner';
+
+export default function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isLogin = pathname === '/login';
+  const isSetup = pathname === '/setup';
+  const isWizard = pathname === '/wizard';
+
+  if (isLogin || isSetup || isWizard) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AuthGuard>
+      <div className="app-shell">
+        <VersionBanner />
+        <div className="app-shell__body">
+          <Sidebar />
+          <main className="app-shell__content">
+            {children}
+          </main>
+        </div>
+        <FloatingActions />
+      </div>
+    </AuthGuard>
+  );
+}

package/app/components/AuthGuard.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+
+// Cache auth result per session to avoid re-checking on every navigation
+const authCache = { valid: false, checked: false, ts: 0 };
+const AUTH_CACHE_TTL = 30_000; // 30s before re-check
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [redirecting, setRedirecting] = useState(false);
+  const checkingRef = useRef(false);
+
+  useEffect(() => {
+    // /setup: always accessible
+    if (pathname === '/setup') return;
+
+    // /login: public, check if already authenticated
+    if (pathname === '/login') {
+      fetch('/api/auth/status')
+        .then((r) => r.json())
+        .then((d: { configured: boolean }) => {
+          if (!d.configured) router.replace('/setup');
+        })
+        .catch(() => {});
+      return;
+    }
+
+    // Already checking — prevent duplicate
+    if (checkingRef.current) return;
+
+    // Cache hit — skip check
+    if (authCache.checked && authCache.valid && (Date.now() - authCache.ts) < AUTH_CACHE_TTL) {
+      return; // Still valid, no re-check
+    }
+
+    checkingRef.current = true;
+
+    // Protected routes — check auth in background
+    fetch('/api/auth/check')
+      .then(async (r) => {
+        if (!r.ok) {
+          // Not authenticated — redirect
+          authCache.valid = false;
+          authCache.checked = true;
+          const status = await fetch('/api/auth/status').then((r2) => r2.json());
+          setRedirecting(true);
+          router.replace(status.configured ? '/login' : '/setup');
+          return;
+        }
+
+        // Auth valid
+        authCache.valid = true;
+        authCache.checked = true;
+        authCache.ts = Date.now();
+
+        if (pathname === '/wizard') return;
+
+        // Check wizard status
+        const [statusRes, wizardRes] = await Promise.all([
+          fetch('/api/auth/status'),
+          fetch('/api/wizard/status'),
+        ]);
+        const { configured } = await statusRes.json();
+        const { done: wizardDone } = await wizardRes.json();
+
+        if (!configured && !wizardDone) {
+          setRedirecting(true);
+          router.replace('/wizard');
+        }
+      })
+      .catch(async () => {
+        try {
+          const status = await fetch('/api/auth/status').then((r) => r.json());
+          setRedirecting(true);
+          router.replace(status.configured ? '/login' : '/setup');
+        } catch {
+          setRedirecting(true);
+          router.replace('/login');
+        }
+      })
+      .finally(() => {
+        checkingRef.current = false;
+      });
+  }, [pathname, router]);
+
+  // NEVER hide children — always render, auth check happens in background
+  return <>{children}</>;
+}

package/app/components/CostBreakdown.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import type { ModelCost } from '@/lib/types';
+import { formatUsd } from '@/lib/utils/format';
+import { SkeletonLines } from './Skeleton';
+
+interface CostBreakdownProps {
+  byModel: ModelCost[];
+  loading?: boolean;
+}
+
+export default function CostBreakdown({ byModel, loading = false }: CostBreakdownProps) {
+  return (
+    <article className="panel cost-panel">
+      <h2>Costs by Model (Today)</h2>
+      <div>
+        {loading ? (
+          <div style={{ padding: 12 }}>
+            <SkeletonLines count={4} />
+          </div>
+        ) : byModel.length === 0 ? (
+          <div className="cost-row">
+            <span className="k">no data</span>
+            <span className="v">$0.00</span>
+          </div>
+        ) : (
+          byModel.map((row, index) => (
+            <div key={`${row.model ?? 'unknown'}-${index}`} className="cost-row">
+              <span className="k">{row.model ?? 'unknown'}</span>
+              <span className="v">{formatUsd(row.cost_usd)}</span>
+            </div>
+          ))
+        )}
+      </div>
+    </article>
+  );
+}