@grackle-ai/web-components 0.107.2

package/src/components/panels/TaskOverviewPanel.module.scss

@@ -0,0 +1,236 @@
+@use '../../styles/mixins' as *;
+
+.overviewDashboard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.overviewHero {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+// Status badge
+.statusBadge {
+  display: inline-block;
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border: 1px solid currentColor;
+}
+
+.statusPending {
+  color: var(--text-tertiary);
+  background: rgba(107, 122, 141, 0.12);
+}
+
+.statusAssigned {
+  color: var(--accent-yellow);
+  background: var(--accent-yellow-dim);
+}
+
+.statusInProgress {
+  color: var(--accent-blue);
+  background: var(--accent-blue-dim);
+}
+
+.statusReview {
+  color: var(--accent-purple);
+  background: var(--accent-purple-dim);
+}
+
+.statusDone {
+  color: var(--accent-green);
+  background: var(--accent-green-dim);
+}
+
+.statusFailed {
+  color: var(--accent-red);
+  background: var(--accent-red-dim);
+}
+
+.statusWaitingInput {
+  color: var(--accent-yellow);
+  background: var(--accent-yellow-dim);
+}
+
+// Branch pill
+.overviewBranchPill {
+  @include surface-inset;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px var(--space-sm);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+}
+
+.branchLink {
+  color: var(--accent-blue);
+  text-decoration: none;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--accent-cyan);
+  }
+}
+
+// Sections
+.overviewSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.overviewLabel {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.overviewValue {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.overviewMuted {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+// Markdown description
+.overviewMarkdown {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  line-height: 1.6;
+
+  p { margin: 0 0 var(--space-sm) 0; }
+  p:last-child { margin-bottom: 0; }
+  ul, ol { margin: 0 0 var(--space-sm) var(--space-lg); padding: 0; }
+  li { margin-bottom: var(--space-xs); }
+  code {
+    @include surface-inset;
+    padding: 1px var(--space-xs);
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    color: var(--accent-cyan);
+  }
+  pre {
+    @include surface-inset;
+    padding: var(--space-sm) var(--space-md);
+    overflow: auto;
+    margin: var(--space-xs) 0;
+    code { background: none; border: none; padding: 0; color: inherit; }
+  }
+  blockquote {
+    border-left: 3px solid var(--border-primary);
+    margin: 0 0 var(--space-sm) 0;
+    padding-left: var(--space-md);
+    color: var(--text-tertiary);
+  }
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--text-primary);
+    margin: var(--space-sm) 0 var(--space-xs) 0;
+    font-size: var(--font-size-sm);
+  }
+  strong { color: var(--text-primary); }
+  a { color: var(--accent-blue); text-decoration: none;
+    &:hover { text-decoration: underline; }
+  }
+}
+
+// Environment row with status dot
+.envRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.envDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.envDotGreen  { background: var(--accent-green); }
+.envDotYellow { background: var(--accent-yellow); }
+.envDotRed    { background: var(--accent-red); }
+.envDotGray   { background: var(--text-disabled); }
+
+// Dependencies
+.depList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.depItem {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: var(--font-size-sm);
+}
+
+.depBlocked {
+  color: var(--accent-yellow);
+}
+
+.depDone {
+  color: var(--accent-green);
+}
+
+// Timeline
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.timelineRow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm);
+  font-size: var(--font-size-sm);
+}
+
+.timelineKey {
+  color: var(--text-tertiary);
+  min-width: 72px;
+  flex-shrink: 0;
+}
+
+.timelineValue {
+  color: var(--text-secondary);
+}
+
+.timelineDelta {
+  color: var(--text-tertiary);
+  font-size: 11px;
+
+  &::before { content: "("; }
+  &::after  { content: ")"; }
+}
+
+// Review notes
+.reviewNotes {
+  font-size: var(--font-size-sm);
+  color: var(--accent-yellow);
+  background: var(--accent-yellow-dim);
+  border: 1px solid var(--accent-yellow-border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-sm) var(--space-md);
+  white-space: pre-wrap;
+  line-height: 1.5;
+}

package/src/components/panels/TaskOverviewPanel.stories.tsx

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { TaskOverviewPanel } from "./TaskOverviewPanel.js";
+import type { TaskData, Workspace, Environment, Session } from "../../hooks/types.js";
+import { makeTask, makeEnvironment, makeSession, makeWorkspace } from "../../test-utils/storybook-helpers.js";
+
+const defaultTask: TaskData = makeTask({
+  id: "t-1",
+  workspaceId: "ws-1",
+  title: "Implement auth",
+  description: "Add **OAuth2** login flow with refresh tokens.",
+  status: "working",
+  branch: "feat/auth",
+});
+
+const workspace: Workspace = makeWorkspace({
+  id: "ws-1",
+  name: "My Workspace",
+  repoUrl: "https://github.com/example/repo",
+});
+
+const env: Environment = makeEnvironment({ id: "env-1", displayName: "Local Dev", status: "connected" });
+const session: Session = makeSession({ id: "sess-1", environmentId: "env-1" });
+
+const meta: Meta<typeof TaskOverviewPanel> = {
+  title: "Grackle/Panels/TaskOverviewPanel",
+  component: TaskOverviewPanel,
+  tags: ["autodocs"],
+  args: {
+    task: defaultTask,
+    tasksById: new Map([[defaultTask.id, defaultTask]]),
+    environments: [env],
+    workspaces: [workspace],
+    taskSessions: [session],
+    selectedEnvId: "env-1",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TaskOverviewPanel>;
+
+/** Renders status badge, branch link (with repo URL), and markdown description. */
+export const BasicOverview: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("task-overview-panel")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-overview-status-badge")).toBeInTheDocument();
+    // Branch pill should contain a link since workspace has repoUrl
+    const branchPill = canvas.getByTestId("task-overview-branch");
+    await expect(branchPill).toBeInTheDocument();
+    const link = branchPill.querySelector("a");
+    await expect(link).not.toBeNull();
+    // Markdown bold renders
+    await expect(canvas.getByText("OAuth2")).toBeInTheDocument();
+  },
+};
+
+/** All four timeline timestamps render with delta labels. */
+export const WithTimeline: Story = {
+  args: {
+    task: makeTask({
+      id: "t-tl",
+      status: "complete",
+      createdAt: "2026-01-01T10:00:00Z",
+      assignedAt: "2026-01-01T10:05:00Z",
+      startedAt: "2026-01-01T10:06:00Z",
+      completedAt: "2026-01-01T10:36:00Z",
+    }),
+    taskSessions: [],
+  },
+  play: async ({ canvas }) => {
+    const timeline = canvas.getByTestId("task-overview-timeline");
+    await expect(timeline).toBeInTheDocument();
+    await expect(canvas.getByText("Created")).toBeInTheDocument();
+    await expect(canvas.getByText("Assigned")).toBeInTheDocument();
+    await expect(canvas.getByText("Started")).toBeInTheDocument();
+    await expect(canvas.getByText("Completed")).toBeInTheDocument();
+  },
+};
+
+/** Only created and started timestamps render when others are missing. */
+export const PartialTimeline: Story = {
+  args: {
+    task: makeTask({
+      id: "t-pt",
+      status: "working",
+      createdAt: "2026-01-01T10:00:00Z",
+      startedAt: "2026-01-01T10:10:00Z",
+    }),
+    taskSessions: [],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Created")).toBeInTheDocument();
+    await expect(canvas.getByText("Started")).toBeInTheDocument();
+    await expect(canvas.queryByText("Assigned")).toBeNull();
+    await expect(canvas.queryByText("Completed")).toBeNull();
+  },
+};
+
+/** Shows "No timing data" when no timestamps are set. */
+export const NoTimeline: Story = {
+  args: {
+    task: makeTask({
+      id: "t-nt",
+      status: "not_started",
+      createdAt: "",
+    }),
+    taskSessions: [],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("No timing data")).toBeInTheDocument();
+  },
+};
+
+/** Dependencies render with check/circle status indicators. */
+export const WithDependencies: Story = {
+  args: {
+    task: makeTask({
+      id: "t-dep",
+      status: "not_started",
+      dependsOn: ["dep-a", "dep-b"],
+    }),
+    tasksById: new Map([
+      ["dep-a", makeTask({ id: "dep-a", title: "Setup DB", status: "complete" })],
+      ["dep-b", makeTask({ id: "dep-b", title: "Deploy infra", status: "working" })],
+    ]),
+    taskSessions: [],
+  },
+  play: async ({ canvas }) => {
+    const deps = canvas.getByTestId("task-overview-dependencies");
+    await expect(deps).toBeInTheDocument();
+    await expect(canvas.getByText("Setup DB")).toBeInTheDocument();
+    await expect(canvas.getByText("Deploy infra")).toBeInTheDocument();
+  },
+};
+
+/** Empty dependencies show "None". */
+export const NoDependencies: Story = {
+  args: {
+    task: makeTask({ id: "t-nd", dependsOn: [] }),
+    taskSessions: [],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("None")).toBeInTheDocument();
+  },
+};
+
+/** Usage section renders when taskUsage has a positive cost. */
+export const WithUsage: Story = {
+  args: {
+    taskUsage: { inputTokens: 1000, outputTokens: 500, costMillicents: 15_000, sessionCount: 2 },
+  },
+  play: async ({ canvas }) => {
+    const usage = canvas.getByTestId("task-overview-usage");
+    await expect(usage).toBeInTheDocument();
+    await expect(canvas.getByText("Cost")).toBeInTheDocument();
+  },
+};
+
+/** Tree usage row appears when treeUsage cost exceeds taskUsage cost. */
+export const WithTreeUsage: Story = {
+  args: {
+    task: makeTask({ id: "t-tu", childTaskIds: ["child-1"] }),
+    taskUsage: { inputTokens: 1000, outputTokens: 500, costMillicents: 15_000, sessionCount: 2 },
+    treeUsage: { inputTokens: 5000, outputTokens: 2000, costMillicents: 85_000, sessionCount: 6 },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Cost")).toBeInTheDocument();
+    await expect(canvas.getByText("Total (incl. subtasks)")).toBeInTheDocument();
+  },
+};
+
+/** Review notes section renders when present. */
+export const WithReviewNotes: Story = {
+  args: {
+    task: makeTask({ id: "t-rn", reviewNotes: "Needs refactoring before merge" }),
+    taskSessions: [],
+  },
+  play: async ({ canvas }) => {
+    const notes = canvas.getByTestId("task-overview-review-notes");
+    await expect(notes).toBeInTheDocument();
+    await expect(canvas.getByText("Needs refactoring before merge")).toBeInTheDocument();
+  },
+};
+
+/** Environment row shows the session's environment name and status. */
+export const WithEnvironment: Story = {
+  play: async ({ canvas }) => {
+    const envRow = canvas.getByTestId("task-overview-environment");
+    await expect(envRow).toBeInTheDocument();
+    await expect(canvas.getByText("Local Dev")).toBeInTheDocument();
+  },
+};
+
+/** Falls back to workspace default environment with label. */
+export const FallbackToWorkspaceDefault: Story = {
+  args: {
+    taskSessions: [],
+    selectedEnvId: "env-1",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Local Dev")).toBeInTheDocument();
+    await expect(canvas.getByText("(workspace default)")).toBeInTheDocument();
+  },
+};
+
+/** Branch renders as plain text when workspace has no repoUrl. */
+export const BranchWithoutRepoUrl: Story = {
+  args: {
+    task: makeTask({ id: "t-br", branch: "fix/typo" }),
+    workspaces: [makeWorkspace({ id: "ws-1", repoUrl: "" })],
+    taskSessions: [],
+  },
+  play: async ({ canvas }) => {
+    const branchPill = canvas.getByTestId("task-overview-branch");
+    await expect(branchPill).toBeInTheDocument();
+    const link = branchPill.querySelector("a");
+    await expect(link).toBeNull();
+  },
+};