@flamingo-stack/openframe-frontend-core 0.0.669 → 0.0.670-2401.7221.1

package/dist/utils/list-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-url.d.ts","sourceRoot":"","sources":["../../src/utils/list-url.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAaH;;;;iEAIiE;AACjE,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAKtE;AAqFD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,SAAK,GAAG,MAAM,GAAG,IAAI,CAa5F"}
+{"version":3,"file":"list-url.d.ts","sourceRoot":"","sources":["../../src/utils/list-url.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAaH;;;;iEAIiE;AACjE,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAKtE;AAsFD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,SAAK,GAAG,MAAM,GAAG,IAAI,CAa5F"}

package/dist/utils/source-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"source-icons.d.ts","sourceRoot":"","sources":["../../src/utils/source-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkEpD,CAAC;AAEF;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGxF;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwEzD,CAAC;AAEF;;kEAEkE;AAClE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkEpE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEjF;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAK5E"}
+{"version":3,"file":"source-icons.d.ts","sourceRoot":"","sources":["../../src/utils/source-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmEpD,CAAC;AAEF;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGxF;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyEzD,CAAC;AAEF;;kEAEkE;AAClE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmEpE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEjF;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAK5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.669",
+  "version": "0.0.670-2401.7221.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/entity-cards/design-doc-card.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+/**
+ * DesignDocCard (pure presentation) — a design doc as the entity card every surface shows it with: the full card
+ * (`default`, the `RoadmapCard` layout: glyph slot, title, DRI and date, sign-off status, summary, sign-off count and
+ * the people) for admin surfaces, and the chat's compact card (`DesignDocChatCard` in `dispatch.tsx`, which reads
+ * the same status and meta through the helpers below). The card writes no click logic beyond its `href` anchor.
+ */
+
+import type { DesignDoc, DesignDocCompletion } from '../../../types/design-doc';
+import { formatDateShort } from '../../../utils/date-formatters';
+import { FileContentIcon } from '../../icons-v2-generated/documents/file-content-icon';
+import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
+import { StatusBadge, type StatusBadgeProps } from '../../ui/status-badge';
+import { safeHref } from '../utils/compact-card-classes';
+
+/** A doc's sign-off state: ready (every section signed off), blocked (an open blocking comment or a blocked section), else in review. */
+export function designDocSignOffStatus(completion: DesignDocCompletion): {
+  label: string;
+  scheme: NonNullable<StatusBadgeProps['colorScheme']>;
+  tag: 'success' | 'error' | 'warning';
+} {
+  if (completion.isComplete) return { label: 'Ready', scheme: 'success', tag: 'success' };
+  if (completion.openBlocking > 0 || completion.blocked > 0) return { label: 'Blocked', scheme: 'error', tag: 'error' };
+  return { label: 'In review', scheme: 'warning', tag: 'warning' };
+}
+
+/** "3/4 reviews signed off" — the count the design-docs screen prints. */
+export function designDocSignOffLabel(completion: DesignDocCompletion): string {
+  return `${completion.completed}/${completion.total} review${completion.total === 1 ? '' : 's'} signed off`;
+}
+
+/** The people behind a doc: the DRI first, then the implementation owners (display only). */
+export function designDocPeople(doc: Pick<DesignDoc, 'author' | 'feature_leads'>): AvatarStackPerson[] {
+  const people: AvatarStackPerson[] = [];
+  if (doc.author?.full_name)
+    people.push({
+      key: `dri-${doc.author.id ?? doc.author.full_name}`,
+      name: doc.author.full_name,
+      avatarUrl: doc.author.avatar_url,
+    });
+  for (const p of doc.feature_leads ?? []) {
+    if (!p.full_name) continue;
+    people.push({ key: `lead-${p.id}`, name: p.full_name, avatarUrl: p.avatar_url });
+  }
+  return people;
+}
+
+/** "DRI Jane Doe · updated Sep 24, 2026" — the card's subtitle. */
+export function designDocMetaLine(doc: Pick<DesignDoc, 'author' | 'updated_at'>): string {
+  return [doc.author?.full_name ? `DRI ${doc.author.full_name}` : null, `updated ${formatDateShort(doc.updated_at)}`]
+    .filter(Boolean)
+    .join(' · ');
+}
+
+export interface DesignDocCardProps {
+  doc: DesignDoc;
+  /** The doc's page. */
+  href?: string | null;
+  target?: '_blank';
+  rel?: 'noopener' | 'noopener noreferrer';
+  className?: string;
+}
+
+export function DesignDocCardSkeleton() {
+  return (
+    <div className="flex h-full animate-pulse flex-col gap-[16px] rounded-[6px] border border-ods-border bg-ods-card p-[24px]">
+      <div className="flex items-center gap-[16px]">
+        <div className="h-16 w-16 rounded-lg bg-ods-bg" />
+        <div className="flex flex-1 flex-col gap-2">
+          <div className="h-5 w-3/4 rounded bg-ods-bg" />
+          <div className="h-4 w-1/3 rounded bg-ods-bg/70" />
+        </div>
+      </div>
+      <div className="h-4 w-full rounded bg-ods-bg/60" />
+      <div className="h-4 w-5/6 rounded bg-ods-bg/60" />
+    </div>
+  );
+}
+
+export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCardProps) {
+  const status = designDocSignOffStatus(doc.completion);
+  const people = designDocPeople(doc);
+  const link = safeHref(href ?? null);
+  const body = (
+    <>
+      <div className="flex w-full items-center gap-[16px]">
+        <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg text-ods-accent">
+          <FileContentIcon size={32} />
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="flex min-h-[48px] items-center">
+            <h3 className="line-clamp-2 flex-1 text-ods-text-primary text-h3">{doc.title || 'Untitled design doc'}</h3>
+          </div>
+          <div className="flex min-h-[20px] items-center">
+            <p className="truncate text-ods-text-secondary text-h5">{designDocMetaLine(doc)}</p>
+          </div>
+        </div>
+        <StatusBadge
+          text={status.label.toUpperCase()}
+          colorScheme={status.scheme}
+          className="hidden border border-ods-border md:inline-flex"
+        />
+      </div>
+      <div className="md:hidden">
+        <StatusBadge
+          text={status.label.toUpperCase()}
+          colorScheme={status.scheme}
+          className="border border-ods-border"
+        />
+      </div>
+      <div className="flex min-h-[72px] items-center">
+        <p className="line-clamp-3 text-ods-text-secondary text-h4">{doc.summary || ''}</p>
+      </div>
+      <div className="flex-1" />
+      <div className="flex w-full items-center justify-between gap-2">
+        <span className="truncate text-ods-text-secondary text-h6">{designDocSignOffLabel(doc.completion)}</span>
+        {people.length > 0 ? <AvatarStack size="xs" people={people} className="shrink-0" /> : null}
+      </div>
+    </>
+  );
+  const outer = `flex h-full flex-col gap-[16px] rounded-[6px] border border-ods-border bg-ods-card p-[24px] transition-all hover:border-ods-accent ${className ?? ''}`;
+  return link ? (
+    <a href={link} target={target} rel={rel} className={outer}>
+      {body}
+    </a>
+  ) : (
+    <div className={outer}>{body}</div>
+  );
+}

package/src/components/chat/entity-cards/dispatch.tsx

@@ -33,6 +33,7 @@ import React, { type ReactNode } from 'react';
 import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context';
 import Image from '../../../embed-shims/next-image';
 import { useRouter } from '../../../embed-shims/next-navigation';
+import type { DesignDoc } from '../../../types/design-doc';
 import {
   TRUST_CENTER_DOCUMENT_TYPE,
   TRUST_CENTER_PAGE_PATH,
@@ -62,6 +63,7 @@ import { CodeIcon } from '../../icons-v2-generated/coding/code-icon';
 import { CodeSquareIcon } from '../../icons-v2-generated/coding/code-square-icon';
 import { CodingBranchIcon } from '../../icons-v2-generated/coding/coding-branch-icon';
 import { CodingCommitIcon } from '../../icons-v2-generated/coding/coding-commit-icon';
+import { CodingMergeIcon } from '../../icons-v2-generated/coding/coding-merge-icon';
 import { CodingPullRequestIcon } from '../../icons-v2-generated/coding/coding-pull-request-icon';
 import { PackageIcon } from '../../icons-v2-generated/coding/package-icon';
 import { CallIcon } from '../../icons-v2-generated/communication/call-icon';
@@ -115,6 +117,7 @@ import { CaseStudyCardSkeleton } from './case-study-card';
 import { ChatVideoEntityCard } from './chat-video-entity-card';
 import { CustomerInterviewCardSkeleton } from './customer-interview-card';
 import { DeletedDataCard } from './deleted-data-card';
+import { designDocMetaLine, designDocSignOffLabel, designDocSignOffStatus } from './design-doc-card';
 import {
   parseGithubTitle,
   formatActivityId,
@@ -1068,6 +1071,42 @@ function CustomerInterviewChatCard({
   );
 }
 
+/**
+ * Design doc → the doc glyph, its sign-off state as the pill (Ready / In review / Blocked, `designDocSignOffStatus`)
+ * and "DRI · updated · n/m reviews signed off" under the title. The hub's card route attaches the doc's list row as
+ * `item.doc`; a row without it (an older hub) renders the ref's own title and preview.
+ */
+function DesignDocChatCard({
+  item,
+  chatRef,
+  isNewTab,
+  discuss,
+}: {
+  item: (ChatCardItem & { doc?: DesignDoc }) | undefined;
+  chatRef: ChatRef;
+  isNewTab: boolean;
+  discuss?: CardDiscussAction;
+}) {
+  const displayRef = fetchedItemDisplayRef(item, chatRef);
+  const doc = item?.doc;
+  const status = doc ? designDocSignOffStatus(doc.completion) : null;
+  return (
+    <MingoInfoCard
+      title={doc?.title ?? displayRef.title}
+      description={
+        doc
+          ? [designDocMetaLine(doc), designDocSignOffLabel(doc.completion)].join(' · ')
+          : (displayRef.preview ?? undefined)
+      }
+      icon={<FileContentIcon size={24} />}
+      status={status ? { label: status.label, variant: status.tag } : { label: 'Design doc', variant: 'grey' }}
+      anchorProps={buildAnchorProps(displayRef.url, isNewTab)}
+      menuGroups={cardMenuGroups(displayRef.url, discuss)}
+      menuAriaLabel="Design doc actions"
+    />
+  );
+}
+
 /** Investor update → presentation icon + "Investor update" pill. Title falls
  *  back to "Update #N" when the row has no explicit title. */
 function InvestorUpdateChatCard({
@@ -1411,7 +1450,6 @@ interface GlyphCardConfig {
 /** The OpenFrame logo every OpenFrame surface uses (the `openframe` icon name). */
 const OpenFrameGlyph = resolveIcon('openframe');
 const REF_GLYPH_CARD_CONFIGS: Record<string, GlyphCardConfig> = {
-  design_doc: { label: 'Design doc', icon: () => <FileContentIcon size={24} /> },
   openframe_tenant: { label: 'OpenFrame tenant', icon: () => <OpenFrameGlyph size={24} /> },
   prospect_call: { label: 'Prospect call', icon: () => <CallIcon size={24} />, media: true },
   // Code intelligence (product-hub internal): the review rules a repository is
@@ -1429,6 +1467,9 @@ const REF_GLYPH_CARD_CONFIGS: Record<string, GlyphCardConfig> = {
   code_symbol: { label: 'Code symbol', icon: () => <CodeSquareIcon size={24} /> },
   code_duplicate: { label: 'Duplicate code', icon: () => <Copy01Icon size={24} /> },
   code_impact: { label: 'Change impact', icon: () => <CodingPullRequestIcon size={24} /> },
+  // A change set: pull requests across repositories declared as one change, with the ClickUp tasks and design
+  // docs its pull requests are attached to. ONE card for it wherever a set is shown (chat, a design doc's page).
+  change_set: { label: 'Change set', icon: () => <CodingMergeIcon size={24} /> },
 };
 function refGlyphRegistryEntries(): Record<string, ChatCardRegistryEntry> {
   return registryEntries(REF_GLYPH_CARD_CONFIGS, (cfg, docType) =>
@@ -1698,6 +1739,17 @@ const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
       />
     ),
   },
+  design_doc: {
+    label: 'Design doc',
+    contentRefType: 'design_doc',
+    bareInline: true,
+    noComposedHref: true,
+    fallbackHref: (item: { url?: string | null }) => item?.url ?? null,
+    skeleton: () => <MingoInfoCardSkeleton />,
+    render: (item, chatRef, opts) => (
+      <DesignDocChatCard item={item} chatRef={chatRef} isNewTab={opts.isNewTab} discuss={opts.discuss} />
+    ),
+  },
   customer_interview: {
     label: 'Customer interview',
     contentRefType: 'customer_interview',

package/src/components/chat/entity-cards/index.ts

@@ -69,6 +69,15 @@ export {
   type OnboardingGuideCardProps,
 } from './onboarding-guide-card';
 export { RoadmapCard, RoadmapCardSkeleton, type RoadmapCardProps, type VoteType } from './roadmap-card';
+export {
+  DesignDocCard,
+  DesignDocCardSkeleton,
+  designDocMetaLine,
+  designDocPeople,
+  designDocSignOffLabel,
+  designDocSignOffStatus,
+  type DesignDocCardProps,
+} from './design-doc-card';
 export { RoadmapVoteButton, type RoadmapVoteButtonProps } from './roadmap-vote-button';
 export { TaskTypeIcon, type TaskTypeIconProps } from './task-type-icon';
 export {

package/src/utils/list-url.ts

@@ -128,6 +128,7 @@ const BUILDERS: Record<string, (ids: string[], base: string) => string> = {
   code_symbol: (ids, b) => `${b}/api/code-graph/symbols?ids=${ids.join(',')}`,
   code_duplicate: (ids, b) => `${b}/api/code-graph/duplicates?ids=${ids.join(',')}`,
   code_impact: (ids, b) => `${b}/api/code-graph/impacts?ids=${ids.join(',')}`,
+  change_set: (ids, b) => `${b}/api/code-graph/change-sets?ids=${ids.join(',')}`,
   // Single-record live source: the route ignores `?ids=` and returns the ONE
   // `TrustCenterPublic` object (card id `TRUST_CENTER_CARD_ID`); see
   // `extractCardItems` for how the loader matches it back.

package/src/utils/source-icons.ts

@@ -91,6 +91,7 @@ export const SOURCE_ICON_NAMES: Record<string, string> = {
   'code-symbols': 'box',
   'code-duplicates': 'search',
   'code-impact': 'activity',
+  'change-sets': 'coding-branch',
 };
 
 /** Lookup an icon name by RagTableConfig.id. Returns undefined when
@@ -185,6 +186,7 @@ export const SOURCE_LABELS_BY_TABLE: Record<string, string> = {
   'code-symbols': 'Code Symbols',
   'code-duplicates': 'Duplicates',
   'code-impact': 'Change Impact',
+  'change-sets': 'Change Sets',
 };
 
 /** Lookup a human-readable label by RagTableConfig.id. Falls back
@@ -281,6 +283,7 @@ export const DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID: Record<string, string> = {
   code_symbol: 'code-symbols',
   code_duplicate: 'code-duplicates',
   code_impact: 'code-impact',
+  change_set: 'change-sets',
 };
 
 /**