holo-codex 0.1.0

package/plugins/autonomous-pr-loop/ui/src/app.tsx

@@ -0,0 +1,238 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { JSX } from "react";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import { createDashboardApi, storeDashboardToken, storedDashboardToken, type DashboardApi, type DashboardMetaData, type MissionControlData } from "./api.js";
+import { BrandMark } from "./components/BrandMark.js";
+import { createFixtureDashboardApi, dashboardFixture } from "./fixtures.js";
+import {
+  readStoredLocaleSetting,
+  resolveDashboardLocale,
+  t,
+  writeStoredLocaleSetting
+} from "./i18n.js";
+import { CommandCenter } from "./pages/CommandCenter.js";
+import {
+  applyDashboardTheme,
+  DEFAULT_THEME_SETTING,
+  readStoredThemeSetting,
+  resolveEffectiveTheme,
+  writeStoredThemeSetting,
+  type ThemeSetting
+} from "./theme.js";
+import { normalizeLocaleSetting, type LocaleSetting } from "../../core/locale.js";
+import "./styles.css";
+
+export interface AppProps {
+  api?: DashboardApi;
+  initialData?: MissionControlData;
+}
+
+export function App({ api, initialData }: AppProps): JSX.Element {
+  const fixtureData = useMemo(() => dashboardFixture(fixtureNameFromLocation()), []);
+  const requiresToken = !api && !fixtureData && !initialData;
+  const [dashboardToken, setDashboardToken] = useState(() => requiresToken ? storedDashboardToken() : "");
+  const client = useMemo(
+    () => api ?? (fixtureData ? createFixtureDashboardApi(fixtureData) : createDashboardApi(dashboardToken)),
+    [api, dashboardToken, fixtureData]
+  );
+  const [data, setData] = useState<MissionControlData | undefined>(initialData ?? fixtureData);
+  const [meta, setMeta] = useState<DashboardMetaData>();
+  const [error, setError] = useState<string>();
+  const [loading, setLoading] = useState(!initialData && !fixtureData);
+  const [lastRefresh, setLastRefresh] = useState(Date.now());
+  const [actionMessage, setActionMessage] = useState<string>();
+  const [localeSetting, setLocaleSetting] = useState<LocaleSetting>(() => readStoredLocaleSetting() ?? "system");
+  const [themeSetting, setThemeSetting] = useState<ThemeSetting>(() => readStoredThemeSetting() ?? DEFAULT_THEME_SETTING);
+  const [systemPrefersDark, setSystemPrefersDark] = useState(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return true;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+  const [repoLocale, setRepoLocale] = useState<LocaleSetting>();
+  const pollDelayRef = useRef(3000);
+  const effectiveLocale = resolveDashboardLocale(localeSetting, repoLocale);
+  const effectiveTheme = resolveEffectiveTheme(themeSetting, systemPrefersDark);
+  const authenticated = !requiresToken || dashboardToken.length > 0;
+
+  const refresh = useCallback(async (): Promise<void> => {
+    setLoading(true);
+    const result = await client.missionControl();
+    if (result.ok && result.data) {
+      setData(result.data);
+      setError(undefined);
+      setLastRefresh(Date.now());
+      setActionMessage(t(effectiveLocale, "appUpdated"));
+      pollDelayRef.current = 3000;
+    } else {
+      setError(result.error?.message ?? t(effectiveLocale, "appUnknownError"));
+      pollDelayRef.current = Math.min(pollDelayRef.current * 2, 30000);
+    }
+    setLoading(false);
+  }, [client, effectiveLocale]);
+
+  useEffect(() => {
+    applyDashboardTheme(effectiveTheme);
+  }, [effectiveTheme]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const update = (): void => setSystemPrefersDark(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+    void client.dashboardMeta().then((result) => {
+      if (active && result.ok && result.data) {
+        setMeta(result.data);
+      }
+    });
+    void client.policyConfig().then((result) => {
+      if (!active || !result.ok || !result.data) {
+        return;
+      }
+      setRepoLocale(normalizeLocaleSetting(result.data.config.locale));
+    });
+    return () => {
+      active = false;
+    };
+  }, [client]);
+
+  useEffect(() => {
+    let active = true;
+    let timer: number | undefined;
+    const poll = async (): Promise<void> => {
+      await refresh();
+      if (active) {
+        timer = window.setTimeout(() => {
+          void poll();
+        }, pollDelayRef.current);
+      }
+    };
+    if (!authenticated) {
+      setLoading(false);
+    } else if (!initialData && !fixtureData) {
+      void poll();
+    } else {
+      timer = window.setTimeout(() => {
+        void poll();
+      }, pollDelayRef.current);
+    }
+    return () => {
+      active = false;
+      if (timer !== undefined) {
+        window.clearTimeout(timer);
+      }
+    };
+  }, [authenticated, fixtureData, initialData, refresh]);
+
+  if (!authenticated) {
+    return (
+      <LoginScreen
+        locale={effectiveLocale}
+        onLogin={(token) => {
+          storeDashboardToken(token);
+          setDashboardToken(token);
+        }}
+      />
+    );
+  }
+
+  if (loading && !data) {
+    return (
+      <div className="state-screen">
+        <Loader2 className="spin" size={30} />
+        <h1>{t(effectiveLocale, "appLoadingTitle")}</h1>
+        <p>{t(effectiveLocale, "appLoadingMessage")}</p>
+      </div>
+    );
+  }
+
+  if (error && !data) {
+    return (
+      <div className="state-screen state-screen--error">
+        <AlertTriangle size={30} />
+        <h1>{t(effectiveLocale, "appUnavailableTitle")}</h1>
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="state-screen">
+        <h1>{t(effectiveLocale, "appNoDataTitle")}</h1>
+        <p>{t(effectiveLocale, "appNoDataMessage")}</p>
+      </div>
+    );
+  }
+
+  const commandCenterProps = {
+    data,
+    meta,
+    api: client,
+    stale: Date.now() - lastRefresh > 7000,
+    onRefresh: () => void refresh(),
+    locale: effectiveLocale,
+    localeSetting,
+    onLocaleSettingChange: (next: LocaleSetting) => {
+      writeStoredLocaleSetting(next);
+      setLocaleSetting(next);
+    },
+    themeSetting,
+    effectiveTheme,
+    onThemeSettingChange: (next: ThemeSetting) => {
+      writeStoredThemeSetting(next);
+      setThemeSetting(next);
+    },
+    ...(error ?? actionMessage ? { actionMessage: error ?? actionMessage } : {})
+  };
+
+  return (
+    <CommandCenter
+      {...commandCenterProps}
+    />
+  );
+}
+
+function LoginScreen({ locale, onLogin }: { locale: ReturnType<typeof resolveDashboardLocale>; onLogin: (token: string) => void }): JSX.Element {
+  const [value, setValue] = useState("");
+  return (
+    <div className="state-screen login-screen">
+      <div className="login-brand">
+        <BrandMark className="brand-logo brand-logo--login" />
+        <strong>HOLO-Codex</strong>
+      </div>
+      <h1>{t(locale, "loginTitle")}</h1>
+      <p>{t(locale, "loginMessage")}</p>
+      <form
+        className="login-form"
+        onSubmit={(event) => {
+          event.preventDefault();
+          const token = value.trim();
+          if (token) onLogin(token);
+        }}
+      >
+        <input
+          aria-label={t(locale, "loginTokenLabel")}
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          placeholder={t(locale, "loginTokenPlaceholder")}
+          type="password"
+        />
+        <button className="success-button" type="submit" disabled={value.trim().length === 0}>{t(locale, "loginSubmit")}</button>
+      </form>
+    </div>
+  );
+}
+
+function fixtureNameFromLocation(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+  return new URL(window.location.href).searchParams.get("fixture") ?? undefined;
+}

package/plugins/autonomous-pr-loop/ui/src/components/ActivityBadge.tsx

@@ -0,0 +1,31 @@
+import type { JSX } from "react";
+import type { ActivityState } from "../api.js";
+import { displayValueLabel, t } from "../i18n.js";
+import type { EffectiveLocale } from "../pages/CommandCenterParts.js";
+import { StatusBadge } from "./StatusBadge.js";
+
+export function ActivityBadge({ activity, reason, locale }: { activity: ActivityState | undefined; reason: string | undefined; locale: EffectiveLocale }): JSX.Element {
+  if (reason === "stale_worker_failure") {
+    return <StatusBadge value={t(locale, "activityStaleWorker")} tone="red" />;
+  }
+  if (reason === "overridden_by_reality") {
+    return <StatusBadge value={t(locale, "activityOverridden")} tone="blue" />;
+  }
+  if (reason === "marked_handled") {
+    return <StatusBadge value={t(locale, "activityMarkedHandled")} tone="muted" />;
+  }
+  if (activity === "active") {
+    return <StatusBadge value={t(locale, "activityActive")} tone="green" />;
+  }
+  if (activity === "historical") {
+    return <StatusBadge value={t(locale, "activityHistorical")} tone="yellow" />;
+  }
+  return <StatusBadge value={displayValueLabel(locale, "unknown")} tone="muted" />;
+}
+
+export function activityReasonLabel(locale: EffectiveLocale, reason: string | undefined): string {
+  if (!reason) return t(locale, "unknown");
+  const key = `activityReason.${reason}`;
+  const label = t(locale, key);
+  return label === key ? displayValueLabel(locale, reason) : label;
+}

package/plugins/autonomous-pr-loop/ui/src/components/BrandMark.tsx

@@ -0,0 +1,36 @@
+import type { JSX } from "react";
+
+interface BrandMarkProps {
+  className?: string;
+}
+
+/** Renders the HOLO-Codex terminal prompt inside the human-on-loop control ring. */
+export function BrandMark({ className = "brand-logo" }: BrandMarkProps): JSX.Element {
+  return (
+    <svg className={className} viewBox="0 0 128 128" role="img" aria-label="HOLO-Codex">
+      <path
+        d="M111.3 52.6A49 49 0 1 1 84 19.2"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="8"
+      />
+      <circle className="brand-logo__gate" cx="98.6" cy="29.4" r="6.5" />
+      <path
+        d="M41 48L62 64L41 80"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="8"
+      />
+      <path
+        d="M70 81H91"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="8"
+      />
+    </svg>
+  );
+}

package/plugins/autonomous-pr-loop/ui/src/components/Collapsible.tsx

@@ -0,0 +1,6 @@
+import type { JSX } from "react";
+import { StatusBadge } from "./StatusBadge.js";
+
+export function Collapsible({ title, chip, children, defaultOpen = false }: { title: string; chip: string; children: JSX.Element; defaultOpen?: boolean }): JSX.Element {
+  return <details className="disclosure-panel" open={defaultOpen}><summary><span>{title}</span><StatusBadge value={chip} tone="blue" /></summary>{children}</details>;
+}

package/plugins/autonomous-pr-loop/ui/src/components/CommandPreview.tsx

@@ -0,0 +1,15 @@
+import { TerminalSquare } from "lucide-react";
+import type { JSX } from "react";
+
+export function CommandPreview({ commands, emptyMessage }: { commands: string[]; emptyMessage: string }): JSX.Element {
+  return (
+    <div className="command-list">
+      {commands.length === 0 ? <p className="muted-copy">{emptyMessage}</p> : commands.map((command) => (
+        <div className="command-line" key={command}>
+          <TerminalSquare size={15} />
+          <code>{command}</code>
+        </div>
+      ))}
+    </div>
+  );
+}