@principal-ai/subsystems-react 0.51.2 → 0.51.3

package/src/stories/Subsystem/C4Graph/ProposedElements.stories.tsx

@@ -1,293 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import '@xyflow/react/dist/style.css';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import { C4Graph } from '../../../subsystem/C4Graph';
-import { buildC4Model, summarizeElements, type C4View } from '../../../subsystem/c4';
-import type { C4Element, C4ElementState } from '../../../subsystem/c4';
-import { mergeElements, suggestMerges } from '../../../subsystem/c4Evidence';
-import {
-  c4ProposedElements,
-  c4FixtureDocument,
-  c4OpenQuestions,
-} from './c4ProposedElements.fixture';
-
-const meta = {
-  title: 'Subsystem/C4Graph/ProposedElements',
-  component: C4Graph,
-  parameters: { layout: 'fullscreen' },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={defaultEditorTheme}>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-} satisfies Meta<typeof C4Graph>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Proposed C4 elements — authored, not converted.
- *
- * Nothing here is derived from `process`. The boxes exist because someone
- * (here, an agent) claimed they exist, and each claim carries a `rationale`
- * saying why. This story is that set plus the three decisions a person makes:
- *
- *   accept   the box goes solid — it is part of the architecture
- *   reject   the box disappears, and so do the lines into it
- *   merge    two elements fold into one, carrying both member sets
- *
- * Try rejecting `container:in-memory-state`. That is the shape question: those
- * are process-lifetime Sets and Maps, not a container, so the element should
- * not exist at all. Watch "components unclaimed" go up — rejecting an element
- * orphans whatever was in it, and the build says so rather than re-homing it.
- *
- * Four elements are deliberately wrong and say so: `container:shared-ui` is an
- * npm package, `container:legacy-host` is a second app name for the same
- * process, `container:in-memory-state` is process-lifetime state, and
- * `external:opencode-db` is disputed between two models.
- */
-
-/**
- * Which keys could fold together, found by the same evidence helper an agent
- * would use: two `process` keys ending in the same role are one deployable
- * unit or two, and the corpus cannot say which.
- */
-function mergeCandidates(elements: readonly C4Element[]) {
-  const rollup = elements
-    .filter((e) => e.kind === 'container' && e.derivedFrom?.length)
-    .flatMap((e) =>
-      e.derivedFrom!.map((key) => ({ key, memberCount: e.members.length })),
-    );
-  return suggestMerges(rollup);
-}
-
-function Demo({ initialAccepted = [] as string[] }: { initialAccepted?: string[] }) {
-  const [view, setView] = useState<C4View>('container');
-  const [selected, setSelected] = useState<string | null>(null);
-  const [state, setState] = useState<Record<string, C4ElementState>>(() =>
-    Object.fromEntries(initialAccepted.map((id) => [id, 'accepted' as const])),
-  );
-  /** Role names the user has folded, e.g. `host`. */
-  const [mergedRoles, setMergedRoles] = useState<string[]>([]);
-
-  const candidates = useMemo(() => mergeCandidates(c4ProposedElements), []);
-
-  const elements = useMemo<C4Element[]>(() => {
-    let set = c4ProposedElements;
-    // Merging applies a decision the user already made; `mergeElements` is the
-    // same helper an agent would call, so the story cannot drift from the API.
-    for (const role of mergedRoles) {
-      const candidate = candidates.find((c) => c.role === role);
-      if (candidate) set = mergeElements(set, candidate.keys);
-    }
-    return set.map((e) => ({ ...e, state: state[e.id] ?? e.state }) as C4Element);
-  }, [state, mergedRoles, candidates]);
-
-  const { model, problems, unmapped } = useMemo(
-    () =>
-      buildC4Model({
-        elements,
-        document: c4FixtureDocument as never,
-        view,
-        systemLabel: 'Subsystem Modeling',
-      }),
-    [elements, view],
-  );
-
-  const stats = useMemo(() => summarizeElements(elements), [elements]);
-  const decide = (id: string, next: C4ElementState) => setState((p) => ({ ...p, [id]: next }));
-  const reset = () => {
-    setState({});
-    setMergedRoles([]);
-  };
-
-  /** Merge candidates this element's keys take part in. */
-  const roleOf = (id: string) => {
-    const element = c4ProposedElements.find((e) => e.id === id);
-    return candidates
-      .filter((c) => element?.derivedFrom?.some((k) => c.keys.includes(k)))
-      .map((c) => c.role);
-  };
-
-  const button = (label: string, value: C4View) => (
-    <button
-      type="button"
-      onClick={() => setView(value)}
-      style={{
-        fontFamily: 'monospace',
-        fontSize: 12,
-        padding: '2px 10px',
-        borderRadius: 4,
-        cursor: 'pointer',
-        border: '1px solid #555',
-        background: view === value ? '#1D9E75' : 'transparent',
-        color: view === value ? '#020B12' : '#ddd',
-      }}
-    >
-      {label}
-    </button>
-  );
-
-  const act = (label: string, onClick: () => void) => (
-    <button
-      type="button"
-      onClick={onClick}
-      style={{
-        fontFamily: 'monospace',
-        fontSize: 11,
-        padding: '2px 8px',
-        borderRadius: 4,
-        cursor: 'pointer',
-        border: '1px solid #555',
-        background: 'transparent',
-        color: '#ddd',
-      }}
-    >
-      {label}
-    </button>
-  );
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        background: '#12141a',
-      }}
-    >
-      <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
-        <C4Graph model={model} title="Subsystem Modeling" onSelectNode={setSelected} />
-      </div>
-
-      <div
-        style={{
-          maxHeight: 300,
-          overflowY: 'auto',
-          padding: '8px 12px',
-          display: 'flex',
-          gap: 18,
-          fontFamily: 'monospace',
-          fontSize: 12,
-          color: '#aaa',
-          borderTop: '1px solid #333',
-        }}
-      >
-        <div style={{ minWidth: 200 }}>
-          <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
-            {button('container', 'container')}
-            {button('component', 'component')}
-          </div>
-          <div>
-            {stats.containers}c · {stats.components}k · {stats.externals}x · {stats.people}p
-          </div>
-          <div>
-            {stats.accepted} confirmed · {stats.proposed} proposed · {stats.rejected} rejected
-          </div>
-          <div style={{ color: stats.missingTechnology > 0 ? '#e8a33a' : '#5a5' }}>
-            {stats.missingTechnology} missing technology
-          </div>
-          <div style={{ color: stats.missingDescription > 0 ? '#e8a33a' : '#5a5' }}>
-            {stats.missingDescription} missing description
-          </div>
-          <div>{model.edges.length} lines · {unmapped.length} components unclaimed</div>
-          <div style={{ marginTop: 8 }}>{act('reset', reset)}</div>
-        </div>
-
-        <div style={{ minWidth: 280, maxWidth: 320 }}>
-          <div style={{ color: '#ddd', marginBottom: 4 }}>OPEN QUESTIONS</div>
-          {c4OpenQuestions.map((q) => (
-            <div key={q.id} style={{ marginBottom: 7, color: '#c96', lineHeight: 1.35, fontSize: 11 }}>
-              <div style={{ color: '#9a9aa0' }}>{q.label}</div>
-              {q.rationale}
-            </div>
-          ))}
-        </div>
-
-        <div style={{ flex: 1, minWidth: 420 }}>
-          <div style={{ color: '#ddd', marginBottom: 4 }}>PROPOSED ELEMENTS</div>
-          {elements.map((e) => {
-            const s = state[e.id] ?? e.state;
-            const roles = roleOf(e.id);
-            const kindLabel = e.kind === 'container' ? e.containerKind : e.kind;
-            return (
-              <div
-                key={e.id}
-                style={{
-                  display: 'flex',
-                  gap: 10,
-                  alignItems: 'flex-start',
-                  padding: '4px 0',
-                  borderBottom: '1px solid #222',
-                  opacity: s === 'rejected' ? 0.45 : 1,
-                }}
-              >
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ color: '#ddd' }}>
-                    {e.label}
-                    <span style={{ color: s === 'accepted' ? '#5a5' : '#e8a33a' }}>
-                      {' '}
-                      · {s} · {kindLabel}
-                      {e.kind === 'component' ? ` → ${e.container.replace('container:', '')}` : ''}
-                    </span>
-                  </div>
-                  <div style={{ color: '#777', fontSize: 11 }}>
-                    {e.members.length} members
-                    {'technology' in e ? (e.technology ? ` · ${e.technology}` : ' · no technology') : ''}
-                    {e.description ? '' : ' · no description'}
-                    {e.derivedFrom && e.derivedFrom.length > 1
-                      ? ` · consolidated from ${e.derivedFrom.join(' + ')}`
-                      : ''}
-                  </div>
-                </div>
-                <div style={{ display: 'flex', gap: 4 }}>
-                  {act('accept', () => decide(e.id, 'accepted'))}
-                  {act('reject', () => decide(e.id, 'rejected'))}
-                  {roles.map((role) =>
-                    mergedRoles.includes(role) ? null : (
-                      <React.Fragment key={role}>
-                        {act(`merge /${role}`, () => setMergedRoles((p) => [...p, role]))}
-                      </React.Fragment>
-                    ),
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-
-        <div style={{ minWidth: 200, fontSize: 11, color: '#777' }}>
-          <div>selected: {selected ?? '(none)'}</div>
-          {problems.length > 0 && (
-            <div style={{ color: '#e06c6c', marginTop: 6 }}>
-              {problems.length} authoring problem{problems.length === 1 ? '' : 's'}:
-              {problems.slice(0, 3).map((p) => (
-                <div key={p.subject + p.kind}>{p.message}</div>
-              ))}
-            </div>
-          )}
-          <div style={{ marginTop: 6 }}>solid = confirmed</div>
-          <div>dashed = proposed</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const Proposed: Story = {
-  render: () => <Demo />,
-};
-
-/** Half-confirmed, so the accepted/proposed difference is visible at a glance. */
-export const PartiallyConfirmed: Story = {
-  render: () => (
-    <Demo
-      initialAccepted={['container:studio-host', 'container:studio-renderer', 'external:gists']}
-    />
-  ),
-};