@xenide-io/the-old-ui-theme 0.9.18 → 0.11.0

package/src/styles/themes.css

@@ -87,55 +87,55 @@
 [data-theme="hedgehog-dark"] {
   color-scheme: dark;
 
-  /* Microsoft Copilot-style dark UI: neutral graphite surfaces, blue accent. */
-  --ph-canvas: hsl(240 7% 6%);
-  --ph-surface: hsl(240 6% 10%);
-  --ph-muted: hsl(240 5% 13%);
-  --ph-toolbar: hsl(240 5% 15%);
-  --ph-surface-inset: hsl(240 7% 7%);
-  --ph-surface-raised: hsl(240 5% 13%);
-  --ph-surface-overlay: hsl(240 5% 14%);
-  --ph-border: hsl(240 5% 21%);
-  --ph-border-subtle: hsl(240 5% 15%);
-  --ph-border-strong: hsl(240 4% 36%);
-
-  --ph-text-primary: hsl(240 8% 94%);
-  --ph-text-secondary: hsl(240 5% 78%);
-  --ph-text-tertiary: hsl(240 4% 58%);
-
-  --ph-accent: #0084e8;
-  --ph-accent-hover: #106ebe;
-  --ph-blue: #00bcf2;
-  --ph-violet: #b146c2;
-  --ph-purple: #b146c2;
-
-  --ph-success: #6bb700;
-  --ph-warning: #ffb900;
-  --ph-danger: #d13438;
-  --ph-info: #00bcf2;
-  --ph-on-accent: #111111;
+  /* Warm graphite keeps the Hedgehog pair recognisable after dark. */
+  --ph-canvas: hsl(36 8% 7%);
+  --ph-surface: hsl(34 7% 10%);
+  --ph-muted: hsl(32 7% 13%);
+  --ph-toolbar: hsl(30 7% 16%);
+  --ph-surface-inset: hsl(36 8% 6%);
+  --ph-surface-raised: hsl(32 7% 14%);
+  --ph-surface-overlay: hsl(30 7% 16%);
+  --ph-border: hsl(31 6% 22%);
+  --ph-border-subtle: hsl(32 6% 17%);
+  --ph-border-strong: hsl(30 5% 38%);
+
+  --ph-text-primary: hsl(40 18% 94%);
+  --ph-text-secondary: hsl(36 10% 76%);
+  --ph-text-tertiary: hsl(34 7% 59%);
+
+  --ph-accent: #e8682a;
+  --ph-accent-hover: #f27b3d;
+  --ph-blue: #5b9cff;
+  --ph-violet: #b66ce0;
+  --ph-purple: #b66ce0;
+
+  --ph-success: #63b77b;
+  --ph-warning: #e6ad48;
+  --ph-danger: #df625c;
+  --ph-info: #5b9cff;
+  --ph-on-accent: #1a0e08;
   --ph-on-violet: #ffffff;
   --ph-on-success: #111114;
   --ph-on-warning: #111114;
   --ph-on-danger: #ffffff;
-  --ph-on-info: #111114;
-  --ph-focus-ring: #4ca3f5;
-  --ph-selected-bg: #0078d426;
-  --ph-selected-text: #4ca3f5;
-  --ph-selected-border: #0078d4;
-
-  --ph-text-3000: hsl(240 8% 94%);
-  --ph-primary-button-face: #0078d4;
-  --ph-primary-button-border: #0078d4;
-  --ph-primary-button-border-hover: #106ebe;
-  --ph-primary-frame-bg: #0078d4;
-  --ph-secondary-button-bg: hsl(240 5% 15%);
-  --ph-secondary-frame-bg: hsl(240 5% 18%);
-  --ph-secondary-button-border: hsl(240 4% 30%);
-  --ph-secondary-button-border-hover: hsl(240 4% 40%);
-
-  --ph-border-3000: hsl(240 5% 18%);
-  --ph-accent-highlight-secondary: #0078d424;
+  --ph-on-info: #101725;
+  --ph-focus-ring: #66a5ff;
+  --ph-selected-bg: hsl(19 72% 17%);
+  --ph-selected-text: hsl(22 92% 76%);
+  --ph-selected-border: hsl(19 66% 48%);
+
+  --ph-text-3000: #1a0e08;
+  --ph-primary-button-face: #ef8a4c;
+  --ph-primary-button-border: #c75a24;
+  --ph-primary-button-border-hover: #e8682a;
+  --ph-primary-frame-bg: #883714;
+  --ph-secondary-button-bg: hsl(30 7% 16%);
+  --ph-secondary-frame-bg: hsl(30 7% 20%);
+  --ph-secondary-button-border: hsl(30 5% 31%);
+  --ph-secondary-button-border-hover: hsl(30 5% 44%);
+
+  --ph-border-3000: hsl(30 7% 18%);
+  --ph-accent-highlight-secondary: hsl(19 82% 56% / 16%);
 }
 
 /* OneNote — brand purple #7719aa on lavender paper. */

package/src/styles/typography.css

@@ -6,10 +6,25 @@
  * 2. Monospace stack — code, CSV, token chips, shortcuts. Functional only.
  *
  * Marketing type uses `clamp()` so a hero has ONE definition instead of three
- * breakpoint variants per app. Product UI keeps Tailwind's step scale.
+ * breakpoint variants per app. Product roles and Tailwind text utilities share
+ * the tokens below, including every suite component and consuming app.
  */
 
 :root {
+  --ph-font-sans-stack: var(--font-open-runde, "Open Runde"), ui-sans-serif, system-ui, sans-serif;
+  /* Product scale: comfortable body/control text, compact readable metadata. */
+  --ph-type-page: 1.5rem;
+  --ph-type-product-section: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
+  --ph-type-subsection: 1.25rem;
+  --ph-type-card: 1.125rem;
+  --ph-type-body: 1rem;
+  --ph-type-ui: 0.9375rem;
+  --ph-type-small: 0.9375rem;
+  --ph-type-meta: 0.8125rem;
+  --ph-type-overline: 0.75rem;
+  --ph-leading-body: 1.6;
+  --ph-leading-ui: 1.5;
+  --ph-leading-title: 1.2;
   /* Code / CSV / token chips — monospace with clear ASCII */
   --ph-font-monospace-stack:
     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
@@ -30,6 +45,15 @@
   --ph-type-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
 }
 
+@media (max-width: 639px) {
+  :root {
+    --ph-type-page: 1.375rem;
+    --ph-type-ui: 1rem;
+    --ph-type-small: 1rem;
+    --ph-type-meta: 0.875rem;
+  }
+}
+
 /* ── Marketing / landing type ─────────────────────────────────────────────
    Use these on public pages so all five apps share one hero rhythm.
    In-app chrome keeps the Tailwind step scale; do not use hero classes

package/src/suite/components/ai-draft-editor.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+const EDITABLE_FIELDS: Record<string, string[]> = {
+  propose_project_handover: ["title", "body"],
+  propose_requirement_update: ["description"],
+  propose_source_tasks: ["tasks"],
+  propose_source_task_update: ["description"],
+  propose_knowledge_pack: ["title", "body", "tasks"],
+  propose_document_update: ["body"],
+};
+
+export function suiteAiDraftFields(
+  kind: string,
+  payload?: Record<string, unknown>,
+): Record<string, unknown> | null {
+  const fields = EDITABLE_FIELDS[kind];
+  return fields && payload
+    ? Object.fromEntries(
+        fields.map((key) => [key, payload[key] ?? (key === "tasks" ? [] : "")]),
+      )
+    : null;
+}
+
+export function SuiteAiDraftEditor({
+  kind,
+  draft,
+  canAddTasks,
+  onChange,
+}: {
+  kind: string;
+  draft: Record<string, unknown>;
+  canAddTasks: boolean;
+  onChange: (draft: Record<string, unknown>) => void;
+}) {
+  const change = (key: string, value: unknown) =>
+    onChange({ ...draft, [key]: value });
+  const tasks = Array.isArray(draft.tasks)
+    ? (draft.tasks as Record<string, unknown>[])
+    : [];
+  const editTask = (index: number, key: string, value: unknown) =>
+    change(
+      "tasks",
+      tasks.map((task, i) => (i === index ? { ...task, [key]: value } : task)),
+    );
+  return (
+    <div
+      className="mt-3 space-y-3 rounded-lg border border-ph-border bg-ph-canvas p-3"
+      data-test="ai-draft-editor"
+    >
+      <p className="text-xs text-ph-mutedtext">
+        Edit draft content. Source evidence, versions and destination remain
+        protected.
+      </p>
+      {Object.entries(draft)
+        .filter(([key]) => key !== "tasks")
+        .map(([key, value]) => (
+          <label key={key} className="block space-y-1 text-sm">
+            <span className="font-medium">
+              {key === "title" ? "Title" : "Proposed content"}
+            </span>
+            {key === "title" ? (
+              <input
+                className="ph-input min-h-11 w-full"
+                value={String(value)}
+                maxLength={255}
+                onChange={(event) => change(key, event.target.value)}
+              />
+            ) : (
+              <textarea
+                className="ph-input min-h-40 w-full"
+                value={String(value)}
+                maxLength={kind === "propose_project_handover" ? 16000 : 12000}
+                onChange={(event) => change(key, event.target.value)}
+              />
+            )}
+          </label>
+        ))}
+      {"tasks" in draft ? (
+        <div className="space-y-3">
+          <p className="text-sm font-medium">Task drafts</p>
+          {tasks.map((task, index) => (
+            <fieldset
+              key={index}
+              className="space-y-2 rounded border border-ph-border p-2"
+            >
+              <legend className="px-1 text-xs">Task {index + 1}</legend>
+              <label className="block text-sm">
+                Title
+                <input
+                  className="ph-input min-h-11 w-full"
+                  value={String(task.title ?? "")}
+                  maxLength={255}
+                  onChange={(event) =>
+                    editTask(index, "title", event.target.value)
+                  }
+                />
+              </label>
+              <label className="block text-sm">
+                Description
+                <textarea
+                  className="ph-input min-h-24 w-full"
+                  value={String(task.description ?? "")}
+                  maxLength={10000}
+                  onChange={(event) =>
+                    editTask(index, "description", event.target.value)
+                  }
+                />
+              </label>
+              <div className="flex flex-wrap gap-2">
+                <label className="text-sm">
+                  Due date
+                  <input
+                    type="date"
+                    className="ph-input min-h-11 block"
+                    value={String(task.due_date ?? "")}
+                    onChange={(event) =>
+                      editTask(index, "due_date", event.target.value || null)
+                    }
+                  />
+                </label>
+                <label className="text-sm">
+                  Priority
+                  <select
+                    className="ph-input min-h-11 block"
+                    value={String(task.priority ?? "low")}
+                    onChange={(event) =>
+                      editTask(index, "priority", event.target.value)
+                    }
+                  >
+                    {["low", "medium", "high", "urgent"].map((value) => (
+                      <option key={value}>{value}</option>
+                    ))}
+                  </select>
+                </label>
+              </div>
+              <label className="flex min-h-11 items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={Boolean(task.assign_me)}
+                  onChange={(event) =>
+                    editTask(index, "assign_me", event.target.checked)
+                  }
+                />
+                Assign to me
+              </label>
+              <button
+                type="button"
+                className="ph-btn ph-btn-secondary ph-btn-xs"
+                disabled={kind === "propose_source_tasks" && tasks.length === 1}
+                onClick={() =>
+                  change(
+                    "tasks",
+                    tasks.filter((_, i) => i !== index),
+                  )
+                }
+              >
+                Remove draft
+              </button>
+            </fieldset>
+          ))}
+          {canAddTasks && tasks.length < 5 ? (
+            <button
+              type="button"
+              className="ph-btn ph-btn-secondary ph-btn-sm"
+              onClick={() =>
+                change("tasks", [
+                  ...tasks,
+                  {
+                    title: "",
+                    description: "",
+                    priority: "low",
+                    assign_me: false,
+                  },
+                ])
+              }
+            >
+              Add task draft
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/suite/components/ai-panel-workflows.test.tsx

@@ -0,0 +1,179 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { SuiteAiPanel, type SuiteAiAction } from "./ai-panel";
+
+beforeAll(() => {
+  // jsdom has no layout/scroll implementation; the real panel uses this API.
+  HTMLElement.prototype.scrollTo = vi.fn();
+});
+afterEach(cleanup);
+
+function TestSpinner() {
+  return <span aria-hidden="true" />;
+}
+
+describe("integration draft review", () => {
+  it("shows the handover and source revisions without applying it", async () => {
+    const action: SuiteAiAction = {
+      id: "handover",
+      kind: "propose_project_handover",
+      status: "proposed",
+      summary: "Save a private project handover",
+      payload: {
+        body: "Open work and next steps from the brief.",
+        sources: [{ title: "Project brief", revision_number: 3 }],
+      },
+    };
+    const resolveAction = vi.fn();
+    const fetchChat = vi.fn().mockResolvedValue({
+      configured: true,
+      messages: [
+        { role: "assistant", content: "Review this draft.", actions: [action] },
+      ],
+    });
+    render(
+      <SuiteAiPanel
+        spinner={TestSpinner}
+        clearChat={vi.fn().mockResolvedValue(undefined)}
+        open
+        fetchChat={fetchChat}
+        sendMessage={vi.fn()}
+        resolveAction={resolveAction}
+      />,
+    );
+    fireEvent.click(
+      await screen.findByText("Review proposed content and evidence"),
+    );
+    expect(
+      screen.getByText("Open work and next steps from the brief."),
+    ).toBeVisible();
+    expect(screen.getByText(/"revision_number": 3/)).toBeVisible();
+    expect(resolveAction).not.toHaveBeenCalled();
+  });
+
+  it("shows before/after content and delegates only explicit confirmation", async () => {
+    const action: SuiteAiAction = {
+      id: "requirements",
+      kind: "propose_requirement_update",
+      status: "proposed",
+      summary: "Update acceptance criteria",
+      payload: {
+        before: "Existing human note.",
+        description: "Existing human note. Added acceptance criterion.",
+        document_revision: 2,
+        task_updated_at: "2026-10-06T10:00:00Z",
+      },
+    };
+    const messages = [
+      {
+        role: "assistant" as const,
+        content: "Review the change.",
+        actions: [action],
+      },
+    ];
+    const resolveAction = vi.fn().mockResolvedValue({ messages });
+    render(
+      <SuiteAiPanel
+        spinner={TestSpinner}
+        clearChat={vi.fn().mockResolvedValue(undefined)}
+        open
+        fetchChat={vi.fn().mockResolvedValue({ configured: true, messages })}
+        sendMessage={vi.fn()}
+        resolveAction={resolveAction}
+      />,
+    );
+    fireEvent.click(
+      await screen.findByText("Review proposed content and evidence"),
+    );
+    expect(screen.getByText("Existing human note.")).toBeVisible();
+    expect(
+      screen.getByText("Existing human note. Added acceptance criterion."),
+    ).toBeVisible();
+    expect(resolveAction).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+    await waitFor(() =>
+      expect(resolveAction).toHaveBeenCalledWith("requirements", "confirm"),
+    );
+  });
+
+  it("keeps workflows available in an existing chat and only prefills the composer", async () => {
+    const sendMessage = vi.fn();
+    render(
+      <SuiteAiPanel
+        spinner={TestSpinner}
+        clearChat={vi.fn()}
+        open
+        fetchChat={vi
+          .fn()
+          .mockResolvedValue({
+            configured: true,
+            messages: [{ role: "assistant", content: "Existing conversation" }],
+          })}
+        sendMessage={sendMessage}
+        presets={[
+          {
+            label: "Prepare knowledge pack",
+            prompt: "Prepare a reviewed knowledge pack.",
+          },
+        ]}
+      />,
+    );
+    await screen.findByRole("button", { name: "Clear" });
+    fireEvent.click(screen.getByText("Workflows"));
+    fireEvent.click(
+      screen.getByRole("button", { name: "Prepare knowledge pack" }),
+    );
+    expect(
+      screen.getByDisplayValue("Prepare a reviewed knowledge pack."),
+    ).toBeVisible();
+    expect(sendMessage).not.toHaveBeenCalled();
+  });
+
+  it("submits human-edited task drafts without exposing scope as an editable field", async () => {
+    const action: SuiteAiAction = {
+      id: "tasks",
+      kind: "propose_source_tasks",
+      status: "proposed",
+      summary: "Create source tasks",
+      payload: {
+        project_id: "project-1",
+        tasks: [{ title: "Initial task", description: "Criteria" }],
+        requested_by: "user-1",
+      },
+    };
+    const messages = [
+      {
+        role: "assistant" as const,
+        content: "Review task drafts.",
+        actions: [action],
+      },
+    ];
+    const resolveAction = vi.fn().mockResolvedValue({ messages });
+    render(
+      <SuiteAiPanel
+        spinner={TestSpinner}
+        clearChat={vi.fn()}
+        open
+        fetchChat={vi.fn().mockResolvedValue({ configured: true, messages })}
+        sendMessage={vi.fn()}
+        resolveAction={resolveAction}
+      />,
+    );
+    fireEvent.click(await screen.findByRole("button", { name: "Edit draft" }));
+    fireEvent.change(screen.getByLabelText("Title"), {
+      target: { value: "Human-edited task" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+    await waitFor(() =>
+      expect(resolveAction).toHaveBeenCalledWith("tasks", "confirm", {
+        tasks: [{ title: "Human-edited task", description: "Criteria" }],
+      }),
+    );
+  });
+});