@porkytheblack/garage-dashboard 0.1.0

package/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-md",
+        "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/lib"
+  },
+  "iconLibrary": "lucide"
+}

package/lib/api.ts

@@ -0,0 +1,85 @@
+/**
+ * Typed client for the Garage REST API. All requests are made from the browser
+ * with the admin JWT (or an API key) as a Bearer token and an optional
+ * X-Glorp-Namespace header. The base URL comes from NEXT_PUBLIC_GARAGE_URL.
+ */
+
+export const GARAGE_URL = (process.env.NEXT_PUBLIC_GARAGE_URL ?? "http://127.0.0.1:4271").replace(/\/$/, "");
+export const API_BASE = `${GARAGE_URL}/api/v1`;
+
+const TOKEN_KEY = "garage.token";
+const NS_KEY = "garage.namespace";
+
+export function getToken(): string | null {
+  return typeof window === "undefined" ? null : localStorage.getItem(TOKEN_KEY);
+}
+export function setToken(token: string | null): void {
+  if (typeof window === "undefined") return;
+  if (token) localStorage.setItem(TOKEN_KEY, token);
+  else localStorage.removeItem(TOKEN_KEY);
+}
+export function getNamespace(): string | null {
+  return typeof window === "undefined" ? null : localStorage.getItem(NS_KEY);
+}
+export function setNamespace(ns: string | null): void {
+  if (typeof window === "undefined") return;
+  if (ns) localStorage.setItem(NS_KEY, ns);
+  else localStorage.removeItem(NS_KEY);
+}
+
+export class ApiError extends Error {
+  constructor(
+    readonly status: number,
+    message: string,
+  ) {
+    super(message);
+  }
+}
+
+interface Opts {
+  method?: string;
+  body?: unknown;
+  namespace?: string | null;
+  auth?: boolean;
+}
+
+export async function api<T>(path: string, opts: Opts = {}): Promise<T> {
+  const headers: Record<string, string> = { "content-type": "application/json" };
+  const token = getToken();
+  if (opts.auth !== false && token) headers.authorization = `Bearer ${token}`;
+  const ns = opts.namespace ?? getNamespace();
+  if (ns) headers["x-glorp-namespace"] = ns;
+
+  const res = await fetch(API_BASE + path, {
+    method: opts.method ?? "GET",
+    headers,
+    body: opts.body === undefined ? undefined : JSON.stringify(opts.body),
+  });
+
+  const text = await res.text();
+  const data = text ? safeParse(text) : null;
+  if (!res.ok) {
+    const message = (data && (data.message || data.error)) || res.statusText;
+    throw new ApiError(res.status, message);
+  }
+  return data as T;
+}
+
+function safeParse(text: string): any {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return { raw: text };
+  }
+}
+
+/** WebSocket URL for a session's event stream (token + ns ride as query params). */
+export function sessionWsUrl(id: string): string {
+  const u = new URL(`${API_BASE}/sessions/${id}/events`);
+  u.protocol = u.protocol === "https:" ? "wss:" : "ws:";
+  const token = getToken();
+  if (token) u.searchParams.set("api_key", token);
+  const ns = getNamespace();
+  if (ns) u.searchParams.set("ns", ns);
+  return u.toString();
+}

package/lib/auth.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+/**
+ * Admin auth context. Holds the JWT + identity, exposes login/logout, and
+ * gates the dashboard: unauthenticated users are routed to /login.
+ */
+
+import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { api, setToken, getToken } from "./api";
+import type { Identity } from "./types";
+
+interface AuthState {
+  identity: Identity | null;
+  ready: boolean;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => void;
+}
+
+const Ctx = createContext<AuthState | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [identity, setIdentity] = useState<Identity | null>(null);
+  const [ready, setReady] = useState(false);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const refresh = useCallback(async () => {
+    if (!getToken()) {
+      setIdentity(null);
+      setReady(true);
+      return;
+    }
+    try {
+      const me = await api<Identity>("/auth/me");
+      setIdentity(me.authenticated ? me : null);
+    } catch {
+      setIdentity(null);
+    } finally {
+      setReady(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  // Redirect rules once we know the auth state.
+  useEffect(() => {
+    if (!ready) return;
+    const onLogin = pathname === "/login";
+    if (!identity && !onLogin) router.replace("/login");
+    if (identity && onLogin) router.replace("/");
+  }, [ready, identity, pathname, router]);
+
+  const login = useCallback(async (username: string, password: string) => {
+    const res = await api<{ token: string }>("/auth/login", {
+      method: "POST",
+      body: { username, password },
+      auth: false,
+    });
+    setToken(res.token);
+    await refresh();
+    router.replace("/");
+  }, [refresh, router]);
+
+  const logout = useCallback(() => {
+    setToken(null);
+    setIdentity(null);
+    router.replace("/login");
+  }, [router]);
+
+  return <Ctx.Provider value={{ identity, ready, login, logout }}>{children}</Ctx.Provider>;
+}
+
+export function useAuth(): AuthState {
+  const v = useContext(Ctx);
+  if (!v) throw new Error("useAuth must be used within AuthProvider");
+  return v;
+}

package/lib/format.ts

@@ -0,0 +1,34 @@
+/** Small humanizers so the UI shows meaning, not raw machine numbers. */
+
+/** Relative time: "just now", "5m", "2h", "3d", then a short date. */
+export function timeAgo(iso: string | null | undefined): string {
+  if (!iso) return "—";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "—";
+  const secs = Math.floor((Date.now() - then) / 1000);
+  if (secs < 45) return "just now";
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d`;
+  return new Date(then).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+/** Compact counts: 980 → "980", 12_300 → "12.3K", 4_500_000 → "4.5M". */
+export function compact(n: number | null | undefined): string {
+  if (n == null || Number.isNaN(n)) return "—";
+  return new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 }).format(n);
+}
+
+/** Last path segment of a workspace path, for a friendly label. */
+export function baseName(path: string): string {
+  const parts = path.replace(/\/+$/, "").split("/");
+  return parts[parts.length - 1] || path;
+}
+
+/** "1 step" / "3 steps". */
+export function plural(n: number, word: string): string {
+  return `${n} ${word}${n === 1 ? "" : "s"}`;
+}

package/lib/hooks.ts

@@ -0,0 +1,65 @@
+"use client";
+
+/** Small data-fetching hook so pages stay declarative. Toasts use `sonner`. */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { api, ApiError } from "./api";
+
+export interface Query<T> {
+  data: T | null;
+  error: string | null;
+  loading: boolean;
+  /** True only while a silent background refresh (poll/reload) is in flight. */
+  refreshing: boolean;
+  reload: () => void;
+}
+
+/**
+ * Fetch `path` on mount and whenever a dep changes. Pass `pollMs` to keep the
+ * data live: it refetches on an interval *silently* — `loading` stays false and
+ * the previous data stays on screen, so polled views never flicker.
+ */
+export function useQuery<T>(path: string | null, deps: unknown[] = [], pollMs?: number): Query<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [tick, setTick] = useState(0);
+  const hasData = useRef(false);
+
+  useEffect(() => {
+    if (!path) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    if (hasData.current) setRefreshing(true);
+    else setLoading(true);
+    api<T>(path)
+      .then((d) => {
+        if (cancelled) return;
+        setData(d);
+        hasData.current = true;
+        setError(null);
+      })
+      .catch((e: ApiError) => !cancelled && setError(e.message))
+      .finally(() => {
+        if (cancelled) return;
+        setLoading(false);
+        setRefreshing(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [path, tick, ...deps]);
+
+  useEffect(() => {
+    if (!path || !pollMs) return;
+    const t = setInterval(() => setTick((n) => n + 1), pollMs);
+    return () => clearInterval(t);
+  }, [path, pollMs]);
+
+  const reload = useCallback(() => setTick((t) => t + 1), []);
+  return { data, error, loading, refreshing, reload };
+}

package/lib/launch.ts

@@ -0,0 +1,25 @@
+import { api } from "./api";
+import type { SessionDto } from "./types";
+
+export interface LaunchOpts {
+  prompt?: string;
+  workspaceId?: string;
+  workspace?: string;
+  profileId?: string;
+  permissionMode?: string;
+}
+
+/** Create a session (optionally with a first message) and return its id. */
+export async function launchSession(opts: LaunchOpts): Promise<string> {
+  const body: Record<string, unknown> = {};
+  if (opts.workspaceId) body.workspaceId = opts.workspaceId;
+  else if (opts.workspace?.trim()) body.workspace = opts.workspace.trim();
+  if (opts.profileId) body.profileId = opts.profileId;
+  if (opts.permissionMode) body.permissionMode = opts.permissionMode;
+
+  const session = await api<SessionDto>("/sessions", { method: "POST", body });
+  if (opts.prompt?.trim()) {
+    await api(`/sessions/${session.id}/messages`, { method: "POST", body: { text: opts.prompt.trim() } });
+  }
+  return session.id;
+}

package/lib/template.ts

@@ -0,0 +1,34 @@
+import type { TemplateStep } from "./types";
+
+const TOKEN = /\{(param|env):([A-Za-z0-9_]+)\}/g;
+
+/** Unique `{param:NAME}` names referenced anywhere in a template's steps. */
+export function templateParams(steps: TemplateStep[]): string[] {
+  const names = new Set<string>();
+  const scan = (s?: string) => {
+    if (!s) return;
+    TOKEN.lastIndex = 0;
+    let m: RegExpExecArray | null;
+    while ((m = TOKEN.exec(s))) if (m[1] === "param") names.add(m[2]);
+  };
+  for (const step of steps) {
+    if (step.type === "git-clone") {
+      scan(step.repo);
+      scan(step.dest);
+      scan(step.ref);
+    } else if (step.type === "shell") {
+      scan(step.command);
+    } else if (step.type === "copy") {
+      scan(step.from);
+      scan(step.to);
+    }
+  }
+  return [...names];
+}
+
+/** One-line, human description of a step. */
+export function stepSummary(step: TemplateStep): string {
+  if (step.type === "git-clone") return `Clone ${step.repo}${step.ref ? ` @ ${step.ref}` : ""}${step.dest ? ` → ${step.dest}` : ""}`;
+  if (step.type === "shell") return step.command;
+  return `Copy ${step.from} → ${step.to}`;
+}

package/lib/theme.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Light/dark theme state. The source of truth is the `dark` class on <html>,
+ * set before paint by the boot script in app/layout.tsx (reads localStorage,
+ * falls back to the OS preference). This hook mirrors that state into React
+ * and keeps every consumer (toggle, toaster) in sync via a window event.
+ */
+
+const KEY = "garage.theme";
+const EVENT = "garage-theme";
+
+export type ThemePref = "light" | "dark" | "system";
+export type Theme = "light" | "dark";
+
+function readPref(): ThemePref {
+  if (typeof window === "undefined") return "system";
+  const v = window.localStorage.getItem(KEY);
+  return v === "light" || v === "dark" ? v : "system";
+}
+
+function systemTheme(): Theme {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function resolveTheme(pref: ThemePref): Theme {
+  return pref === "system" ? systemTheme() : pref;
+}
+
+function apply(pref: ThemePref) {
+  document.documentElement.classList.toggle("dark", resolveTheme(pref) === "dark");
+}
+
+export function useTheme(): { pref: ThemePref; resolved: Theme; setPref: (p: ThemePref) => void } {
+  // Server renders "system"; the boot script has already set the class, so
+  // the first client effect only aligns React state — no visual flip.
+  const [pref, setPrefState] = React.useState<ThemePref>("system");
+  const [resolved, setResolved] = React.useState<Theme>("dark");
+
+  React.useEffect(() => {
+    const sync = () => {
+      const p = readPref();
+      setPrefState(p);
+      setResolved(resolveTheme(p));
+      apply(p);
+    };
+    sync();
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", sync);
+    window.addEventListener(EVENT, sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      mq.removeEventListener("change", sync);
+      window.removeEventListener(EVENT, sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, []);
+
+  const setPref = React.useCallback((p: ThemePref) => {
+    if (p === "system") window.localStorage.removeItem(KEY);
+    else window.localStorage.setItem(KEY, p);
+    window.dispatchEvent(new Event(EVENT));
+  }, []);
+
+  return { pref, resolved, setPref };
+}
+
+/** Inline <head> script: sets the `dark` class before first paint. */
+export const THEME_BOOT_SCRIPT = `(function(){try{var t=localStorage.getItem(${JSON.stringify(KEY)});var d=t==="dark"||(t!=="light"&&matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d);}catch(e){}})();`;