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

package/src/styles/suite-skin.css

@@ -62,20 +62,56 @@ body {
 }
 
 /* Shared app canvas. Dense workspaces do not paint a decorative background. */
-/* One centred marketing header and one button face across the product family. */
+/* One centred marketing header and one button face across the product family.
+   The header stays transparent; scrolling content blurs and fades behind it,
+   the same treatment as the Today title and the blog/guide chrome. */
+.marketing-header,
+.landing-page-nav {
+  isolation: isolate;
+  background: transparent;
+  border-bottom: none;
+}
+
 .marketing-header {
   position: sticky;
   top: 0;
   z-index: 50;
-  border-bottom: 1px solid var(--ph-border-subtle);
-  background: color-mix(in oklab, var(--ph-canvas) 88%, transparent);
-  -webkit-backdrop-filter: blur(16px) saturate(1.15);
-  backdrop-filter: blur(16px) saturate(1.15);
 }
-@supports not (backdrop-filter: blur(1px)) {
-  .marketing-header {
-    background: var(--ph-canvas);
-  }
+
+.marketing-header::before,
+.landing-page-nav::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: calc(100% + var(--suite-scroll-fade));
+  z-index: -1;
+  /* No surface fill: the page background shows through from the very top,
+     and only passing content is blurred. Keeps the header from reading as a
+     lighter bar. */
+  background: transparent;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - var(--suite-scroll-fade)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - var(--suite-scroll-fade)),
+    transparent
+  );
+  pointer-events: none;
+}
+
+/* At rest the header is fully transparent so the page background starts at the
+   top. The frost only kicks in once content scrolls beneath it. */
+.marketing-header[data-scrolled="false"]::before {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  -webkit-mask-image: none;
+  mask-image: none;
 }
 .marketing-header__inner {
   display: flex;
@@ -269,8 +305,10 @@ body {
 .marketing-landing::before {
   content: "";
   position: absolute;
-  inset: 5rem 0 auto;
-  height: 70rem;
+  /* Start at the very top so the atmosphere is behind the header too — the
+     header is transparent, so an inset here would read as a bare strip. */
+  inset: 0 0 auto;
+  height: 75rem;
   z-index: -1;
   pointer-events: none;
   background:
@@ -458,7 +496,7 @@ html[data-marketing-paused] .marketing-landing::before {
 }
 
 .suite-settings-sidebar {
-  padding: 0.375rem;
+  padding: 0.375rem 0.375rem 0.75rem;
   border: 1px solid var(--ph-border-subtle);
   border-radius: var(--ph-radius-surface);
   background: var(--ph-surface-inset);
@@ -480,6 +518,33 @@ html[data-marketing-paused] .marketing-landing::before {
 .today-page-frame .suite-page-inset {
   padding-top: var(--suite-today-pad-y-top);
 }
+
+/* Start the body below the sticky header's fade, with a clear 16px gap. */
+.today-page-frame .suite-page-header + .suite-page-body {
+  margin-top: calc(var(--suite-scroll-fade) + var(--suite-space-4));
+}
+
+.today-work-row {
+  display: flex;
+  min-height: 2.75rem;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-radius: var(--ph-radius-control);
+  transition: background-color var(--ph-motion-fast) ease;
+}
+
+:is(a, button).today-work-row:hover {
+  background: var(--ph-surface-hover);
+}
+
+:is(a, button).today-work-row:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 3px
+    color-mix(in oklab, var(--ph-focus-ring) 30%, transparent);
+}
+
 @media (min-width: 640px) {
   .today-page-frame .suite-page-inset {
     padding-top: var(--suite-today-pad-y-top-sm);
@@ -734,40 +799,7 @@ html.dark .today-page-frame__cloud--2 {
   }
 }
 
-/* Public landing nav — same sit-on-the-page fade as Today. No bar, no border;
-   the page background shows through and only scrolling content dissolves. */
-.landing-page-nav {
-  isolation: isolate;
-  background: transparent;
-  border-bottom: none;
-}
-.landing-page-nav::before {
-  content: "";
-  position: absolute;
-  inset-inline: 0;
-  top: 0;
-  height: calc(100% + var(--suite-scroll-fade));
-  z-index: -1;
-  background: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--ph-canvas) 18%, transparent)
-      calc(100% - var(--suite-scroll-fade)),
-    transparent
-  );
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    #000 calc(100% - var(--suite-scroll-fade)),
-    transparent
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    #000 calc(100% - var(--suite-scroll-fade)),
-    transparent
-  );
-  pointer-events: none;
-}
+/* Public landing nav (see the shared header rule above for its fade layer). */
 
 /* Page stage — ONE layout standard for every suite app.
    - Default width="full": use the full main column (no max-width centring)

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" }],
+      }),
+    );
+  });
+});