gitfor/platform

import { TONE_SURFACE } from "~/ui/tones";
import { useDemoTimeline } from "~/hooks/use-demo-timeline";
import { ProgressTrack } from "~/ui/ProgressTrack";
import { StatusDot } from "~/ui/StatusDot";
import { cn } from "~/utils/cn";
import { DemoWindow } from "../DemoWindow";

const STEPS = 4;
const INTERVAL_MS = 1300;
const ANALYZING_AT = 1;
const SCORED_AT = 2;
const REVEALED_AT = 3;

const CONFLICT = [
  { text: "<<<<<<< main", tone: "text-kumo-subtle" },
  { text: "const TIMEOUT_MS = 30_000;", tone: "text-kumo-danger" },
  { text: "=======", tone: "text-kumo-subtle" },
  { text: "const TIMEOUT_MS = Number(env.TIMEOUT ?? 15_000);", tone: "text-kumo-success" },
  { text: ">>>>>>> feat/configurable-timeout", tone: "text-kumo-subtle" },
] as const;

const CANDIDATES = [
  { label: "Keep env override, default 30s", percent: 94 },
  { label: "Keep main", percent: 4 },
] as const;

export function AiDemo({ className }: { className?: string }) {
  const step = useDemoTimeline(STEPS, INTERVAL_MS);
  const resolved = step >= STEPS;
  return (
    <DemoWindow
      title="acme/api · merge fix for #77"
      label="An AI merge fix scores two candidate resolutions and commits the confident one"
      className={className}
    >
      <div className="space-y-px bg-kumo-base/40 px-4 py-3 font-mono text-xs">
        {CONFLICT.map((line) => (
          <p key={line.text} className={cn("truncate", line.tone)}>
            {line.text}
          </p>