Compare commits

..

2 Commits

Author SHA1 Message Date
c25b77ae39 chore(api): add helmet dependency
Some checks failed
ci/woodpecker/push/ci Pipeline failed
2026-03-01 16:39:14 -06:00
45ce76061b fix(api): helmet security headers + auth endpoint rate limiting 2026-03-01 16:39:10 -06:00
11 changed files with 70 additions and 579 deletions

View File

@@ -1,27 +0,0 @@
when:
- event: manual
- event: cron
cron: weekly-base-image
variables:
- &kaniko_setup |
mkdir -p /kaniko/.docker
echo "{\"auths\":{\"git.mosaicstack.dev\":{\"username\":\"$GITEA_USER\",\"password\":\"$GITEA_TOKEN\"}}}" > /kaniko/.docker/config.json
steps:
build-base:
image: gcr.io/kaniko-project/executor:debug
environment:
GITEA_USER:
from_secret: gitea_username
GITEA_TOKEN:
from_secret: gitea_token
commands:
- *kaniko_setup
- /kaniko/executor
--context .
--dockerfile docker/base.Dockerfile
--destination git.mosaicstack.dev/mosaic/node-base:24-slim
--destination git.mosaicstack.dev/mosaic/node-base:latest
--cache=true
--cache-repo git.mosaicstack.dev/mosaic/node-base/cache

View File

@@ -32,7 +32,6 @@ variables:
- &node_image "node:24-alpine" - &node_image "node:24-alpine"
- &install_deps | - &install_deps |
corepack enable corepack enable
pnpm config set store-dir /root/.local/share/pnpm/store
pnpm install --frozen-lockfile pnpm install --frozen-lockfile
- &use_deps | - &use_deps |
corepack enable corepack enable
@@ -169,7 +168,7 @@ steps:
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-api:latest" DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-api:latest"
fi fi
/kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-api/cache $DESTINATIONS /kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo $DESTINATIONS
when: when:
- branch: [main] - branch: [main]
event: [push, manual, tag] event: [push, manual, tag]
@@ -194,7 +193,7 @@ steps:
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-orchestrator:latest" DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-orchestrator:latest"
fi fi
/kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-orchestrator/cache $DESTINATIONS /kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo $DESTINATIONS
when: when:
- branch: [main] - branch: [main]
event: [push, manual, tag] event: [push, manual, tag]
@@ -219,7 +218,7 @@ steps:
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-web:latest" DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-web:latest"
fi fi
/kaniko/executor --context . --dockerfile apps/web/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-web/cache --build-arg NEXT_PUBLIC_API_URL=https://api.mosaicstack.dev $DESTINATIONS /kaniko/executor --context . --dockerfile apps/web/Dockerfile --snapshot-mode=redo --build-arg NEXT_PUBLIC_API_URL=https://api.mosaicstack.dev $DESTINATIONS
when: when:
- branch: [main] - branch: [main]
event: [push, manual, tag] event: [push, manual, tag]

View File

@@ -1,7 +1,7 @@
# Base image for all stages # Base image for all stages
# Uses Debian slim (glibc) instead of Alpine (musl) because native Node.js addons # Uses Debian slim (glibc) instead of Alpine (musl) because native Node.js addons
# (matrix-sdk-crypto-nodejs, Prisma engines) require glibc-compatible binaries. # (matrix-sdk-crypto-nodejs, Prisma engines) require glibc-compatible binaries.
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base FROM node:24-slim AS base
# Install pnpm globally # Install pnpm globally
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -19,9 +19,9 @@ COPY turbo.json ./
FROM base AS deps FROM base AS deps
# Install build tools for native addons (node-pty requires node-gyp compilation) # Install build tools for native addons (node-pty requires node-gyp compilation)
# Note: openssl and ca-certificates pre-installed in base image # and OpenSSL for Prisma engine detection
RUN apt-get update && apt-get install -y --no-install-recommends \ RUN apt-get update && apt-get install -y --no-install-recommends \
python3 make g++ \ python3 make g++ openssl \
&& rm -rf /var/lib/apt/lists/* && rm -rf /var/lib/apt/lists/*
# Copy all package.json files for workspace resolution # Copy all package.json files for workspace resolution
@@ -61,14 +61,19 @@ RUN pnpm turbo build --filter=@mosaic/api --force
# ====================== # ======================
# Production stage # Production stage
# ====================== # ======================
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production FROM node:24-slim AS production
# dumb-init, openssl, ca-certificates pre-installed in base image # Install dumb-init for proper signal handling (static binary from GitHub,
# avoids apt-get which fails under Kaniko with bookworm GPG signature errors)
ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64 /usr/local/bin/dumb-init
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot) # Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
# - Remove npm/npx to reduce image size (not used in production) # - openssl: Prisma engine detection requires libssl
# - Create non-root user # - No build tools needed here — native addons are compiled in the deps stage
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \ RUN apt-get update && apt-get install -y --no-install-recommends openssl \
&& rm -rf /var/lib/apt/lists/* \
&& rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
&& chmod 755 /usr/local/bin/dumb-init \
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs && groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
WORKDIR /app WORKDIR /app

View File

@@ -384,18 +384,10 @@ describe("ActivityLoggingInterceptor", () => {
const context = createMockExecutionContext("POST", {}, body, user); const context = createMockExecutionContext("POST", {}, body, user);
const next = createMockCallHandler(result); const next = createMockCallHandler(result);
mockActivityService.logActivity.mockResolvedValue({
id: "activity-123",
});
await new Promise<void>((resolve) => { await new Promise<void>((resolve) => {
interceptor.intercept(context, next).subscribe(() => { interceptor.intercept(context, next).subscribe(() => {
// workspaceId is now optional, so logActivity should be called without it // Should not call logActivity when workspaceId is missing
expect(mockActivityService.logActivity).toHaveBeenCalled(); expect(mockActivityService.logActivity).not.toHaveBeenCalled();
const callArgs = mockActivityService.logActivity.mock.calls[0][0];
expect(callArgs.userId).toBe("user-123");
expect(callArgs.entityId).toBe("task-123");
expect(callArgs.workspaceId).toBeUndefined();
resolve(); resolve();
}); });
}); });
@@ -420,18 +412,10 @@ describe("ActivityLoggingInterceptor", () => {
const context = createMockExecutionContext("POST", {}, body, user); const context = createMockExecutionContext("POST", {}, body, user);
const next = createMockCallHandler(result); const next = createMockCallHandler(result);
mockActivityService.logActivity.mockResolvedValue({
id: "activity-123",
});
await new Promise<void>((resolve) => { await new Promise<void>((resolve) => {
interceptor.intercept(context, next).subscribe(() => { interceptor.intercept(context, next).subscribe(() => {
// workspaceId is now optional, so logActivity should be called without it // Should not call logActivity when workspaceId is missing
expect(mockActivityService.logActivity).toHaveBeenCalled(); expect(mockActivityService.logActivity).not.toHaveBeenCalled();
const callArgs = mockActivityService.logActivity.mock.calls[0][0];
expect(callArgs.userId).toBe("user-123");
expect(callArgs.entityId).toBe("task-123");
expect(callArgs.workspaceId).toBeUndefined();
resolve(); resolve();
}); });
}); });

View File

@@ -1,6 +1,6 @@
# Base image for all stages # Base image for all stages
# Uses Debian slim (glibc) instead of Alpine (musl) for native addon compatibility. # Uses Debian slim (glibc) instead of Alpine (musl) for native addon compatibility.
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base FROM node:24-slim AS base
# Install pnpm globally # Install pnpm globally
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -54,7 +54,7 @@ RUN find ./apps/orchestrator/dist \( -name '*.spec.js' -o -name '*.spec.js.map'
# ====================== # ======================
# Production stage # Production stage
# ====================== # ======================
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production FROM node:24-slim AS production
# Add metadata labels # Add metadata labels
LABEL maintainer="mosaic-team@mosaicstack.dev" LABEL maintainer="mosaic-team@mosaicstack.dev"
@@ -65,12 +65,13 @@ LABEL org.opencontainers.image.vendor="Mosaic Stack"
LABEL org.opencontainers.image.title="Mosaic Orchestrator" LABEL org.opencontainers.image.title="Mosaic Orchestrator"
LABEL org.opencontainers.image.description="Agent orchestration service for Mosaic Stack" LABEL org.opencontainers.image.description="Agent orchestration service for Mosaic Stack"
# dumb-init, ca-certificates pre-installed in base image # Install dumb-init for proper signal handling (static binary from GitHub,
# avoids apt-get which fails under Kaniko with bookworm GPG signature errors)
ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64 /usr/local/bin/dumb-init
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot) # Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
# - Remove npm/npx to reduce image size (not used in production)
# - Create non-root user
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \ RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
&& chmod 755 /usr/local/bin/dumb-init \
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs && groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
WORKDIR /app WORKDIR /app

View File

@@ -1,7 +1,7 @@
# Base image for all stages # Base image for all stages
# Uses Debian slim (glibc) for consistency with API/orchestrator and to prevent # Uses Debian slim (glibc) for consistency with API/orchestrator and to prevent
# future native addon compatibility issues with Alpine's musl libc. # future native addon compatibility issues with Alpine's musl libc.
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base FROM node:24-slim AS base
# Install pnpm globally # Install pnpm globally
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -87,14 +87,15 @@ RUN mkdir -p ./apps/web/public
# ====================== # ======================
# Production stage # Production stage
# ====================== # ======================
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production FROM node:24-slim AS production
# dumb-init, ca-certificates pre-installed in base image # Install dumb-init for proper signal handling (static binary from GitHub,
# avoids apt-get which fails under Kaniko with bookworm GPG signature errors)
ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64 /usr/local/bin/dumb-init
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot) # Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
# - Remove npm/npx to reduce image size (not used in production)
# - Create non-root user
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \ RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
&& chmod 755 /usr/local/bin/dumb-init \
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nextjs && groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nextjs
WORKDIR /app WORKDIR /app

View File

@@ -184,11 +184,10 @@ function TaskCard({ task, provided, snapshot, columnAccent }: TaskCardProps): Re
interface KanbanColumnProps { interface KanbanColumnProps {
config: ColumnConfig; config: ColumnConfig;
tasks: Task[]; tasks: Task[];
onAddTask: (status: TaskStatus, title: string, projectId?: string) => Promise<void>; onAddTask: (status: TaskStatus, title: string) => Promise<void>;
projectId?: string;
} }
function KanbanColumn({ config, tasks, onAddTask, projectId }: KanbanColumnProps): ReactElement { function KanbanColumn({ config, tasks, onAddTask }: KanbanColumnProps): ReactElement {
const [showAddForm, setShowAddForm] = useState(false); const [showAddForm, setShowAddForm] = useState(false);
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
@@ -209,7 +208,7 @@ function KanbanColumn({ config, tasks, onAddTask, projectId }: KanbanColumnProps
setIsSubmitting(true); setIsSubmitting(true);
try { try {
await onAddTask(config.status, inputValue.trim(), projectId); await onAddTask(config.status, inputValue.trim());
setInputValue(""); setInputValue("");
setShowAddForm(false); setShowAddForm(false);
} catch (err) { } catch (err) {
@@ -363,45 +362,6 @@ function KanbanColumn({ config, tasks, onAddTask, projectId }: KanbanColumnProps
}} }}
autoFocus autoFocus
/> />
<div style={{ display: "flex", gap: 6, marginTop: 6 }}>
<button
type="submit"
disabled={isSubmitting || !inputValue.trim()}
style={{
padding: "6px 12px",
borderRadius: "var(--r)",
border: "1px solid var(--primary)",
background: "var(--primary)",
color: "#fff",
fontSize: "0.8rem",
fontWeight: 500,
cursor: isSubmitting || !inputValue.trim() ? "not-allowed" : "pointer",
opacity: isSubmitting || !inputValue.trim() ? 0.5 : 1,
}}
>
Add
</button>
<button
type="button"
onClick={() => {
setShowAddForm(false);
setInputValue("");
}}
disabled={isSubmitting}
style={{
padding: "6px 12px",
borderRadius: "var(--r)",
border: "1px solid var(--border)",
background: "transparent",
color: "var(--muted)",
fontSize: "0.8rem",
cursor: isSubmitting ? "not-allowed" : "pointer",
opacity: isSubmitting ? 0.5 : 1,
}}
>
Cancel
</button>
</div>
<div style={{ marginTop: 6, fontSize: "0.75rem", color: "var(--muted)" }}> <div style={{ marginTop: 6, fontSize: "0.75rem", color: "var(--muted)" }}>
Press{" "} Press{" "}
<kbd <kbd
@@ -785,17 +745,10 @@ export default function KanbanPage(): ReactElement {
/* --- add task handler --- */ /* --- add task handler --- */
const handleAddTask = useCallback( const handleAddTask = useCallback(
async (status: TaskStatus, title: string, projectId?: string) => { async (status: TaskStatus, title: string) => {
try { try {
const wsId = workspaceId ?? undefined; const wsId = workspaceId ?? undefined;
const taskData: { title: string; status: TaskStatus; projectId?: string } = { const newTask = await createTask({ title, status }, wsId);
title,
status,
};
if (projectId) {
taskData.projectId = projectId;
}
const newTask = await createTask(taskData, wsId);
// Optimistically add to local state // Optimistically add to local state
setTasks((prev) => [...prev, newTask]); setTasks((prev) => [...prev, newTask]);
} catch (err: unknown) { } catch (err: unknown) {
@@ -913,8 +866,23 @@ export default function KanbanPage(): ReactElement {
Clear filters Clear filters
</button> </button>
</div> </div>
) : tasks.length === 0 ? (
/* Empty state */
<div
style={{
background: "var(--surface)",
border: "1px solid var(--border)",
borderRadius: "var(--r-lg)",
padding: 48,
textAlign: "center",
}}
>
<p style={{ color: "var(--muted)", margin: 0, fontSize: "0.9rem" }}>
No tasks yet. Create some tasks to see them here.
</p>
</div>
) : ( ) : (
/* Board (always render columns to allow adding first task) */ /* Board */
<DragDropContext onDragEnd={handleDragEnd}> <DragDropContext onDragEnd={handleDragEnd}>
<div <div
style={{ style={{
@@ -931,7 +899,6 @@ export default function KanbanPage(): ReactElement {
config={col} config={col}
tasks={grouped[col.status]} tasks={grouped[col.status]}
onAddTask={handleAddTask} onAddTask={handleAddTask}
projectId={filterProject}
/> />
))} ))}
</div> </div>

View File

@@ -5,7 +5,6 @@ import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useAuth } from "@/lib/auth/auth-context"; import { useAuth } from "@/lib/auth/auth-context";
import { ThemeToggle } from "./ThemeToggle"; import { ThemeToggle } from "./ThemeToggle";
import { UsageWidget } from "@/components/ui/UsageWidget";
import { useSidebar } from "./SidebarContext"; import { useSidebar } from "./SidebarContext";
/** /**
@@ -351,9 +350,6 @@ export function AppHeader(): React.JSX.Element {
{/* Theme Toggle */} {/* Theme Toggle */}
<ThemeToggle /> <ThemeToggle />
{/* Usage Widget */}
<UsageWidget />
{/* User Avatar + Dropdown */} {/* User Avatar + Dropdown */}
<div ref={dropdownRef} style={{ position: "relative", flexShrink: 0 }}> <div ref={dropdownRef} style={{ position: "relative", flexShrink: 0 }}>
<button <button

View File

@@ -1,337 +0,0 @@
"use client";
import { useState, useEffect, useRef, useCallback } from "react";
import { fetchUsageSummary, type UsageSummary } from "@/lib/api/telemetry";
// ─── Types ───────────────────────────────────────────────────────────
interface UsageTier {
name: string;
tokens: number;
limit: number;
percentage: number;
}
// ─── Helpers ─────────────────────────────────────────────────────────
function getUsageColor(percentage: number): string {
if (percentage < 60) return "var(--success)";
if (percentage < 80) return "var(--warn)";
return "var(--danger)";
}
function formatTokens(value: number): string {
if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
return value.toFixed(0);
}
// ─── Component ───────────────────────────────────────────────────────
export function UsageWidget(): React.JSX.Element {
const [summary, setSummary] = useState<UsageSummary | null>(null);
const [popoverOpen, setPopoverOpen] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const popoverRef = useRef<HTMLDivElement>(null);
const tiers: UsageTier[] = summary
? [
{
name: "Session",
tokens: summary.totalTokens,
limit: 100_000,
percentage: (summary.totalTokens / 100_000) * 100,
},
{
name: "Daily",
tokens: summary.totalTokens,
limit: 500_000,
percentage: (summary.totalTokens / 500_000) * 100,
},
{
name: "Monthly",
tokens: summary.totalTokens,
limit: 2_000_000,
percentage: (summary.totalTokens / 2_000_000) * 100,
},
]
: [];
const currentTier = tiers[0];
const usageColor = currentTier ? getUsageColor(currentTier.percentage) : "var(--muted)";
const loadSummary = useCallback(async () => {
try {
const data = await fetchUsageSummary("30d");
setSummary(data);
} catch (err) {
console.error("Failed to load usage summary:", err);
} finally {
setIsLoading(false);
}
}, []);
useEffect(() => {
void loadSummary();
}, [loadSummary]);
useEffect(() => {
function handleClickOutside(event: MouseEvent): void {
if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
setPopoverOpen(false);
}
}
if (!popoverOpen) {
return;
}
document.addEventListener("mousedown", handleClickOutside);
return (): void => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [popoverOpen]);
const pct = currentTier ? Math.min(currentTier.percentage, 100) : 0;
return (
<div ref={popoverRef} style={{ position: "relative" }}>
<button
onClick={(): void => {
setPopoverOpen((prev) => !prev);
}}
aria-label="Usage widget"
aria-expanded={popoverOpen}
aria-haspopup="true"
className="hidden lg:flex items-center"
style={{
gap: 6,
padding: "5px 10px",
borderRadius: 6,
background: "var(--surface)",
border: `1px solid ${popoverOpen ? usageColor : "var(--border)"}`,
fontSize: "0.75rem",
fontFamily: "var(--mono)",
color: "var(--text-2)",
cursor: "pointer",
transition: "border-color 0.15s, color 0.15s",
flexShrink: 0,
}}
onMouseEnter={(e): void => {
(e.currentTarget as HTMLButtonElement).style.borderColor = usageColor;
(e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
}}
onMouseLeave={(e): void => {
if (!popoverOpen) {
(e.currentTarget as HTMLButtonElement).style.borderColor = "var(--border)";
(e.currentTarget as HTMLButtonElement).style.color = "var(--text-2)";
}
}}
>
<svg
width="12"
height="12"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
style={{ color: usageColor, flexShrink: 0 }}
aria-hidden="true"
>
<path d="M9 1L3 9h5l-1 6 6-8H8l1-6z" />
</svg>
<span style={{ fontWeight: 500, color: "var(--text-2)" }}>
{isLoading ? "..." : summary ? formatTokens(summary.totalTokens) : "0"}
</span>
{!isLoading && currentTier && (
<div
style={{
width: 24,
height: 4,
borderRadius: 2,
background: "var(--bg-mid)",
overflow: "hidden",
flexShrink: 0,
}}
aria-hidden="true"
>
<div
style={{
width: `${String(pct)}%`,
height: "100%",
background: usageColor,
borderRadius: 2,
transition: "width 0.3s ease-out",
}}
/>
</div>
)}
{!isLoading && currentTier && (
<span style={{ fontWeight: 600, color: usageColor, minWidth: 32, textAlign: "right" }}>
{Math.round(currentTier.percentage)}%
</span>
)}
</button>
{popoverOpen && (
<div
role="dialog"
aria-label="Usage details"
style={{
position: "absolute",
top: "calc(100% + 8px)",
right: 0,
width: 280,
background: "var(--surface)",
border: "1px solid var(--border)",
borderRadius: 8,
padding: 12,
boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
zIndex: 200,
}}
>
<div
style={{
fontSize: "0.83rem",
fontWeight: 600,
color: "var(--text)",
marginBottom: 12,
paddingBottom: 8,
borderBottom: "1px solid var(--border)",
}}
>
Token Usage
</div>
{isLoading ? (
<div
style={{
textAlign: "center",
padding: "20px 0",
color: "var(--muted)",
fontSize: "0.75rem",
}}
>
Loading usage data
</div>
) : summary ? (
<>
<div style={{ marginBottom: 12, display: "flex", flexDirection: "column", gap: 8 }}>
<div
style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
>
<span style={{ color: "var(--muted)" }}>Total Tokens</span>
<span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
{formatTokens(summary.totalTokens)}
</span>
</div>
<div
style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
>
<span style={{ color: "var(--muted)" }}>Estimated Cost</span>
<span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
${summary.totalCost.toFixed(2)}
</span>
</div>
<div
style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
>
<span style={{ color: "var(--muted)" }}>Tasks</span>
<span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
{summary.taskCount}
</span>
</div>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
{tiers.map((tier) => {
const tierPct = Math.min(tier.percentage, 100);
return (
<div key={tier.name}>
<div
style={{
display: "flex",
justifyContent: "space-between",
fontSize: "0.75rem",
marginBottom: 4,
}}
>
<span style={{ color: "var(--text-2)" }}>{tier.name}</span>
<span
style={{
color: getUsageColor(tier.percentage),
fontFamily: "var(--mono)",
fontWeight: 500,
}}
>
{formatTokens(tier.tokens)} / {formatTokens(tier.limit)}
</span>
</div>
<div
style={{
width: "100%",
height: 6,
borderRadius: 3,
background: "var(--bg-mid)",
overflow: "hidden",
}}
>
<div
style={{
width: `${String(tierPct)}%`,
height: "100%",
background: getUsageColor(tier.percentage),
borderRadius: 3,
transition: "width 0.3s ease-out",
}}
/>
</div>
</div>
);
})}
</div>
<a
href="/usage"
onClick={(): void => {
setPopoverOpen(false);
}}
style={{
display: "block",
marginTop: 12,
paddingTop: 8,
borderTop: "1px solid var(--border)",
fontSize: "0.75rem",
color: "var(--primary)",
textDecoration: "none",
textAlign: "center",
}}
onMouseEnter={(e): void => {
(e.currentTarget as HTMLAnchorElement).style.textDecoration = "underline";
}}
onMouseLeave={(e): void => {
(e.currentTarget as HTMLAnchorElement).style.textDecoration = "none";
}}
>
View detailed usage
</a>
</>
) : (
<div
style={{
textAlign: "center",
padding: "20px 0",
color: "var(--muted)",
fontSize: "0.75rem",
}}
>
No usage data available
</div>
)}
</div>
)}
</div>
);
}

View File

@@ -1,6 +1,6 @@
/** /**
* Chat API client * Chat API client
* Handles LLM chat interactions via /api/chat/stream (streaming) and /api/llm/chat (fallback) * Handles LLM chat interactions via /api/llm/chat
*/ */
import { apiPost, fetchCsrfToken, getCsrfToken } from "./client"; import { apiPost, fetchCsrfToken, getCsrfToken } from "./client";
@@ -33,28 +33,9 @@ export interface ChatResponse {
} }
/** /**
* Parsed SSE data chunk from OpenAI-compatible stream * Parsed SSE data chunk from the LLM stream
*/ */
interface OpenAiSseChunk { interface SseChunk {
id?: string;
object?: string;
created?: number;
model?: string;
choices?: {
index: number;
delta?: {
role?: string;
content?: string;
};
finish_reason?: string | null;
}[];
error?: string;
}
/**
* Parsed SSE data chunk from legacy /api/llm/chat stream
*/
interface LegacySseChunk {
error?: string; error?: string;
message?: { message?: {
role: string; role: string;
@@ -65,17 +46,7 @@ interface LegacySseChunk {
} }
/** /**
* Parsed SSE data chunk with simple token format * Send a chat message to the LLM
*/
interface SimpleTokenChunk {
token?: string;
done?: boolean;
error?: string;
}
/**
* Send a chat message to the LLM (non-streaming fallback)
* Uses /api/llm/chat endpoint which supports both streaming and non-streaming
*/ */
export async function sendChatMessage(request: ChatRequest): Promise<ChatResponse> { export async function sendChatMessage(request: ChatRequest): Promise<ChatResponse> {
return apiPost<ChatResponse>("/api/llm/chat", request); return apiPost<ChatResponse>("/api/llm/chat", request);
@@ -95,20 +66,11 @@ async function ensureCsrfTokenForStream(): Promise<string> {
/** /**
* Stream a chat message from the LLM using SSE over fetch. * Stream a chat message from the LLM using SSE over fetch.
* *
* Uses /api/chat/stream endpoint which proxies to OpenClaw. * The backend accepts stream: true in the request body and responds with
* The backend responds with Server-Sent Events in one of these formats: * Server-Sent Events:
* * data: {"message":{"content":"token"},...}\n\n for each token
* OpenAI-compatible format: * data: [DONE]\n\n when the stream is complete
* data: {"choices":[{"delta":{"content":"token"}}],...}\n\n * data: {"error":"message"}\n\n on error
* data: [DONE]\n\n
*
* Legacy format (from /api/llm/chat):
* data: {"message":{"content":"token"},...}\n\n
* data: [DONE]\n\n
*
* Simple token format:
* data: {"token":"..."}\n\n
* data: {"done":true}\n\n
* *
* @param request - Chat request (stream field will be forced to true) * @param request - Chat request (stream field will be forced to true)
* @param onChunk - Called with each token string as it arrives * @param onChunk - Called with each token string as it arrives
@@ -127,14 +89,14 @@ export function streamChatMessage(
try { try {
const csrfToken = await ensureCsrfTokenForStream(); const csrfToken = await ensureCsrfTokenForStream();
const response = await fetch(`${API_BASE_URL}/api/chat/stream`, { const response = await fetch(`${API_BASE_URL}/api/llm/chat`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-CSRF-Token": csrfToken, "X-CSRF-Token": csrfToken,
}, },
credentials: "include", credentials: "include",
body: JSON.stringify({ messages: request.messages, stream: true }), body: JSON.stringify({ ...request, stream: true }),
signal: signal ?? null, signal: signal ?? null,
}); });
@@ -170,25 +132,6 @@ export function streamChatMessage(
const trimmed = part.trim(); const trimmed = part.trim();
if (!trimmed) continue; if (!trimmed) continue;
// Handle event: error format
const eventMatch = /^event:\s*(\S+)\n/i.exec(trimmed);
const dataMatch = /^data:\s*(.+)$/im.exec(trimmed);
if (eventMatch?.[1] === "error" && dataMatch?.[1]) {
try {
const errorData = JSON.parse(dataMatch[1].trim()) as {
error?: string;
};
throw new Error(errorData.error ?? "Stream error occurred");
} catch (parseErr) {
if (parseErr instanceof SyntaxError) {
throw new Error("Stream error occurred");
}
throw parseErr;
}
}
// Standard SSE format: data: {...}
for (const line of trimmed.split("\n")) { for (const line of trimmed.split("\n")) {
if (!line.startsWith("data: ")) continue; if (!line.startsWith("data: ")) continue;
@@ -200,39 +143,14 @@ export function streamChatMessage(
} }
try { try {
const parsed: unknown = JSON.parse(data); const parsed = JSON.parse(data) as SseChunk;
// Handle OpenAI format (from /api/chat/stream via OpenClaw) if (parsed.error) {
const openAiChunk = parsed as OpenAiSseChunk; throw new Error(parsed.error);
if (openAiChunk.choices?.[0]?.delta?.content) {
onChunk(openAiChunk.choices[0].delta.content);
continue;
} }
// Handle legacy format (from /api/llm/chat) if (parsed.message?.content) {
const legacyChunk = parsed as LegacySseChunk; onChunk(parsed.message.content);
if (legacyChunk.message?.content) {
onChunk(legacyChunk.message.content);
continue;
}
// Handle simple token format
const simpleChunk = parsed as SimpleTokenChunk;
if (simpleChunk.token) {
onChunk(simpleChunk.token);
continue;
}
// Handle done flag in simple format
if (simpleChunk.done === true) {
onComplete();
return;
}
// Handle error in any format
const error = openAiChunk.error ?? legacyChunk.error ?? simpleChunk.error;
if (error) {
throw new Error(error);
} }
} catch (parseErr) { } catch (parseErr) {
if (parseErr instanceof SyntaxError) { if (parseErr instanceof SyntaxError) {
@@ -244,7 +162,7 @@ export function streamChatMessage(
} }
} }
// Natural end of stream without [DONE] or done flag // Natural end of stream without [DONE]
onComplete(); onComplete();
} catch (err: unknown) { } catch (err: unknown) {
if (err instanceof DOMException && err.name === "AbortError") { if (err instanceof DOMException && err.name === "AbortError") {

View File

@@ -1,16 +0,0 @@
FROM node:24-slim AS base
# Pre-bake OS updates and common packages shared across all apps.
# Rebuild this image weekly or when base packages change.
# Push to: git.mosaicstack.dev/mosaic/node-base:24-slim
RUN apt-get update && apt-get upgrade -y --no-install-recommends \
&& apt-get install -y --no-install-recommends \
openssl \
ca-certificates \
curl \
dumb-init \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*
# Enable corepack for pnpm
RUN corepack enable