@atlassian/chippy 0.0.0-stage → 0.0.1-beta.2

package/lib/storybook/connection-fallback.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export const CHIPPY_INSTALL_COMMAND = 'npx skills add atlassian-labs/chippy --skill chippy -g';
+
+const unavailableConnectionStates = new Set(['failed', 'reconnecting']);
+
+export function shouldShowChippyInstallHint(connState) {
+  return unavailableConnectionStates.has(connState);
+}
+
+export function ChippyConnectionFallback({ connState }) {
+  if (!shouldShowChippyInstallHint(connState)) return null;
+
+  return (
+    <div
+      role="status"
+      data-testid="chippy-install-hint"
+      style={{
+        marginBottom: 8,
+        padding: '10px 12px',
+        border: '1px solid var(--color-warning-border, #b88a00)',
+        borderRadius: 8,
+        background: 'var(--color-warning-background, color-mix(in srgb, #b88a00 12%, Canvas))',
+        color: 'var(--color-default-text, CanvasText)',
+        fontSize: 12,
+        lineHeight: 1.45,
+      }}
+    >
+      <div style={{ marginBottom: 6 }}>
+        Chippy’s local helper isn’t reachable. If Chippy isn’t installed for your agent, run:
+      </div>
+      <code
+        style={{
+          display: 'block',
+          padding: '7px 8px',
+          borderRadius: 6,
+          background: 'var(--color-elevated-surface, color-mix(in srgb, Canvas 88%, CanvasText 12%))',
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+          overflowWrap: 'anywhere',
+          userSelect: 'all',
+        }}
+      >
+        {CHIPPY_INSTALL_COMMAND}
+      </code>
+    </div>
+  );
+}

package/lib/storybook/constants.js

@@ -0,0 +1,15 @@
+export const ADDON_ID = 'local/chippy';
+export const CHIPPY_PANEL_ID = `${ADDON_ID}/chippy-panel`;
+export const AVALANCHE_PANEL_ID = `${ADDON_ID}/avalanche-panel`;
+
+export const EVENTS = {
+  REQUEST_STATE: `${ADDON_ID}/request-state`,
+  STATE: `${ADDON_ID}/state`,
+  COMMAND: `${ADDON_ID}/command`,
+  RESULT: `${ADDON_ID}/result`,
+  SET_MODE: `${ADDON_ID}/set-mode`,
+  BLOCKED: `${ADDON_ID}/blocked`,
+  ERROR: `${ADDON_ID}/error`,
+};
+
+export const PREVIEW_MESSAGE_SOURCE = 'local/chippy/storybook-preview-message';

package/lib/storybook/context-card.jsx

@@ -0,0 +1,171 @@
+import React from 'react';
+
+const colors = {
+  text: 'var(--color-default-text, CanvasText)',
+  muted: 'var(--color-subtle-text, color-mix(in srgb, CanvasText 64%, transparent))',
+  border: 'var(--color-medium-border, color-mix(in srgb, CanvasText 18%, transparent))',
+  provider: 'var(--color-accent, #5e6c84)',
+  error: 'var(--color-negative-text, #ae2e24)',
+  suspense: 'var(--color-purple-text, #7c3aed)',
+};
+
+function DetailFields({ fields }) {
+  const visible = fields.filter(([, value]) => value != null && value !== '');
+  if (!visible.length) return null;
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px 10px', marginTop: 5, color: colors.muted, fontSize: 11 }}>
+      {visible.map(([label, value]) => (
+        <span key={label}>
+          <span style={{ textTransform: 'lowercase' }}>{label}</span>{' '}
+          <strong style={{ color: colors.text }}>{String(value)}</strong>
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function DistanceBadge({ distance }) {
+  if (distance == null) return null;
+  const hops = distance === 1 ? '1 hop' : `${distance} hops`;
+  return (
+    <span
+      data-testid="chippy-boundary-distance"
+      style={{
+        marginLeft: 'auto',
+        padding: '1px 6px',
+        borderRadius: 999,
+        background: 'color-mix(in srgb, CanvasText 12%, transparent)',
+        color: colors.muted,
+        fontSize: 10,
+        fontWeight: 600,
+        flexShrink: 0,
+      }}
+    >
+      {hops}
+    </span>
+  );
+}
+
+// A single declarative boundary block. Clickable: reports the boundary + its
+// fiber-hop distance to the Chippy backend so it can be investigated later.
+// This is NOT the React render owner -- it is a collateral-scope boundary.
+function BoundaryBlock({ testId, kind, label, title, accent, distance, fields, onInspect, selected, onSelect }) {
+  const clickable = typeof onInspect === 'function';
+  const activate = clickable
+    ? () => {
+        if (onSelect) onSelect(kind);
+        onInspect(kind);
+      }
+    : undefined;
+  return (
+    <div
+      data-testid={testId}
+      data-chippy-boundary={kind}
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      onClick={activate}
+      onKeyDown={
+        clickable
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                activate();
+              }
+            }
+          : undefined
+      }
+      style={{
+        borderLeft: `3px solid ${accent}`,
+        padding: '6px 8px',
+        background: 'color-mix(in srgb, Canvas 94%, CanvasText 6%)',
+        cursor: clickable ? 'pointer' : 'default',
+        outline: selected ? '2px solid var(--color-default-text, CanvasText)' : 'none',
+        outlineOffset: selected ? 1 : 0,
+      }}
+      data-chippy-boundary-selected={selected ? 'true' : undefined}
+    >
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, minWidth: 0 }}>
+        <span style={{ color: accent, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em', flexShrink: 0 }}>{label}</span>
+        <strong style={{ color: colors.text, fontSize: 12, overflowWrap: 'anywhere' }}>{title}</strong>
+        <DistanceBadge distance={distance} />
+      </div>
+      <DetailFields fields={fields} />
+    </div>
+  );
+}
+
+const EMPTY_DISPLAY = { kinds: [], titles: {}, fields: {}, showError: false };
+
+function contextDisplay(context) {
+  return context.display || EMPTY_DISPLAY;
+}
+
+function toFieldPairs(fields) {
+  return (fields || []).map((field) => [field.label, field.value]);
+}
+
+/**
+ * Renders the marker context: provider boundary kinds first (for example a
+ * team ownership marker), then the fiber-native error and suspense boundaries.
+ * Without onInspectBoundary the boundary blocks render as static facts.
+ * @param {{ context: any, onInspectBoundary?: (kind: string) => void }} props
+ */
+export function ContextCard({ context, onInspectBoundary }) {
+  const [selectedKind, setSelectedKind] = React.useState(null);
+  if (!context) return null;
+  const display = contextDisplay(context);
+  const boundaries = context.boundaries || {};
+  const providerKinds = (display.kinds || []).filter((kind) => boundaries[kind.kind]);
+  const error = boundaries.error || null;
+  const suspense = boundaries.suspense || null;
+  const showError = !!(error || display.showError);
+  if (!providerKinds.length && !showError && !suspense) return null;
+
+  const blockProps = (kind) => ({
+    onInspect: onInspectBoundary,
+    selected: selectedKind === kind,
+    onSelect: setSelectedKind,
+  });
+
+  return (
+    <div data-testid="chippy-context" style={{ display: 'grid', gap: 5, marginTop: 8, borderTop: `1px solid ${colors.border}`, paddingTop: 8 }}>
+      {providerKinds.map((kind) => (
+        <BoundaryBlock
+          key={kind.kind}
+          testId={`chippy-boundary-${kind.kind}`}
+          kind={kind.kind}
+          label={kind.label}
+          title={display.titles?.[kind.kind] || boundaries[kind.kind]?.componentName || kind.label}
+          accent={kind.accent || colors.provider}
+          distance={boundaries[kind.kind]?.distance}
+          fields={toFieldPairs(display.fields?.[kind.kind])}
+          {...blockProps(kind.kind)}
+        />
+      ))}
+      {showError ? (
+        <BoundaryBlock
+          testId="chippy-boundary-error"
+          kind="error"
+          label="error boundary"
+          title={display.titles?.error || error?.componentName || 'ErrorBoundary'}
+          accent={colors.error}
+          distance={error?.distance}
+          fields={toFieldPairs(display.fields?.error)}
+          {...blockProps('error')}
+        />
+      ) : null}
+      {suspense ? (
+        <BoundaryBlock
+          testId="chippy-boundary-suspense"
+          kind="suspense"
+          label="suspense boundary"
+          title={suspense.componentName || 'Suspense'}
+          accent={colors.suspense}
+          distance={suspense.distance}
+          fields={[]}
+          {...blockProps('suspense')}
+        />
+      ) : null}
+    </div>
+  );
+}

package/lib/storybook/manager-owner.js

@@ -0,0 +1,42 @@
+// The addon owns Chippy for the whole Storybook page, not only the preview
+// iframe. The Chippy extension injects into the top frame, which is the
+// Storybook manager, and stands down when a live owner of another integration
+// holds window.__CHIPPY_OWNER__. Claiming the manager window keeps agents on the
+// preview's `storybook` client instead of Storybook's own UI.
+const OWNER_ID = 'storybook-addon-manager';
+const STALE_AFTER_MS = 15_000;
+const HEARTBEAT_MS = 5_000;
+
+export const MANAGER_INTEGRATION = Object.freeze({
+  kind: 'storybook',
+  who: 'Chippy Storybook addon',
+  source: '.storybook/chippy-addon/manager-owner.js',
+  reinjectsOnReload: true,
+  reloadAction: 'The manager window holds no Chippy client; the preview iframe is the inspected page.',
+});
+
+export function claimManagerOwner(scope = globalThis) {
+  const now = Date.now();
+  scope.__CHIPPY_OWNER__ = {
+    ownerId: OWNER_ID,
+    ownerType: OWNER_ID,
+    integration: MANAGER_INTEGRATION,
+    staleAfterMs: STALE_AFTER_MS,
+    startedAt: now,
+    heartbeatAt: now,
+  };
+  try {
+    scope.dispatchEvent(new CustomEvent('chippy-owner-claimed', { detail: JSON.stringify({ ownerId: OWNER_ID }) }));
+  } catch (_) {}
+  const timer = setInterval(() => {
+    if (scope.__CHIPPY_OWNER__?.ownerId === OWNER_ID) scope.__CHIPPY_OWNER__.heartbeatAt = Date.now();
+  }, HEARTBEAT_MS);
+  return () => clearInterval(timer);
+}
+
+// An extension bridge that did not stand down, such as one from an older
+// extension version, is still connected to the helper from this window.
+export function extensionBridgeInManager(scope = globalThis) {
+  const state = scope.__CHIPPY?.pageBridge?.getState?.();
+  return state?.integration?.kind === 'extension' && state.connState !== 'yielded' ? state : null;
+}