@assistkick/create 1.0.0

package/templates/product-system/packages/frontend/src/components/GraphSettings.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import type { GraphViewHandle } from './GraphView';
+
+const STORAGE_KEY = 'graph-settings';
+const DEFAULTS = { edgeLabels: false, hideDefined: false, allNodeNames: false, featureNodeNames: true, absoluteSizing: false };
+
+interface GraphSettingsProps {
+  isOpen: boolean;
+  onClose: () => void;
+  graphRef: React.RefObject<GraphViewHandle | null>;
+}
+
+export function GraphSettings({ isOpen, onClose, graphRef }: GraphSettingsProps) {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const [settings, setSettings] = useState(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return { ...DEFAULTS, ...parsed };
+      }
+    } catch { /* ignore */ }
+    return { ...DEFAULTS };
+  });
+
+  const applySetting = useCallback((key: string, value: boolean) => {
+    const graph = graphRef.current;
+    if (!graph) return;
+    switch (key) {
+      case 'edgeLabels':
+        if (graph.edgeLabelsVisible !== value) graph.toggleEdgeLabels();
+        break;
+      case 'hideDefined':
+        if (graph.hideDefinedActive !== value) graph.toggleHideDefined();
+        break;
+      case 'allNodeNames':
+      case 'featureNodeNames':
+        graph.setNodeNameVisibility(
+          key === 'allNodeNames' ? value : settings.allNodeNames,
+          key === 'featureNodeNames' ? value : settings.featureNodeNames,
+        );
+        break;
+      case 'absoluteSizing':
+        graph.setAbsoluteSizing(value);
+        break;
+    }
+  }, [graphRef, settings]);
+
+  // Apply defaults on mount
+  useEffect(() => {
+    Object.entries(settings).forEach(([key, value]) => applySetting(key, value as boolean));
+  }, []);
+
+  const handleToggle = (key: string) => {
+    const newValue = !settings[key];
+    const newSettings = { ...settings, [key]: newValue };
+    setSettings(newSettings);
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(newSettings)); } catch { /* ignore */ }
+    applySetting(key, newValue);
+  };
+
+  // Close on outside click (use mousedown to avoid conflict with the toggle click)
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // Ignore clicks on the gear button itself — the toggle handler manages that
+      if (target.closest('.settings-gear-btn')) return;
+      if (sheetRef.current && !sheetRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    // Defer attachment so the current click event doesn't immediately trigger close
+    const id = requestAnimationFrame(() => {
+      document.addEventListener('mousedown', handleMouseDown);
+    });
+    return () => {
+      cancelAnimationFrame(id);
+      document.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, [isOpen, onClose]);
+
+  const toggleItems = [
+    { key: 'edgeLabels', label: 'Edge Labels' },
+    { key: 'hideDefined', label: 'Hide Defined' },
+    { key: 'allNodeNames', label: 'All Node Names' },
+    { key: 'featureNodeNames', label: 'Feature Node Names' },
+    { key: 'absoluteSizing', label: 'Absolute Node Sizing' },
+  ];
+
+  return (
+    <div className={`settings-sheet${isOpen ? ' open' : ''}`} ref={sheetRef}>
+      <div className="settings-header">
+        <span className="settings-title">Settings</span>
+        <button className="settings-close" onClick={onClose}>&times;</button>
+      </div>
+      <div className="settings-body">
+        {toggleItems.map(({ key, label }) => (
+          <label key={key} className="settings-row">
+            <span className="settings-label">{label}</span>
+            <input
+              type="checkbox"
+              className="settings-toggle"
+              checked={settings[key]}
+              onChange={() => handleToggle(key)}
+            />
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/components/GraphView.tsx

@@ -0,0 +1,370 @@
+/**
+ * D3 force-directed graph — React provides the container, D3 owns the SVG.
+ */
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import * as d3 from 'd3';
+import { NODE_COLORS, EDGE_COLORS, EDGE_LABELS, NODE_SHAPES, nodeShapePath } from '../constants/graph';
+import { nodeRadius as calcNodeRadius } from '../utils/node_sizing';
+
+export interface GraphViewHandle {
+  fitToView: () => void;
+  focusNode: (nodeId: string) => void;
+  setHiddenTypes: (types: Set<string>) => void;
+  highlightBySearch: (query: string) => void;
+  clearSelection: () => void;
+  getNodeById: (nodeId: string) => any;
+  toggleEdgeLabels: () => boolean;
+  toggleHideDefined: () => boolean;
+  setNodeNameVisibility: (all: boolean, feature: boolean) => void;
+  setAbsoluteSizing: (enabled: boolean) => void;
+  edgeLabelsVisible: boolean;
+  hideDefinedActive: boolean;
+  absoluteSizingActive: boolean;
+}
+
+interface GraphViewProps {
+  graphData: any;
+  onNodeClick: (node: any) => void;
+  visible: boolean;
+}
+
+export const GraphView = forwardRef<GraphViewHandle, GraphViewProps>(
+  ({ graphData, onNodeClick, visible }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const stateRef = useRef<any>({
+      simulation: null, svg: null, zoom: null, zoomGroup: null,
+      nodesG: null, linksG: null, labelsG: null, edgeLabelsG: null,
+      gapRingsG: null, gapIconsG: null,
+      nodes: null, links: null, selectedNodeId: null,
+      edgeLabelsVisible: true, hideDefinedActive: false,
+      allNodeNamesVisible: true, featureNodeNamesVisible: true,
+      hiddenTypes: new Set(), searchQuery: null,
+      absoluteSizing: false,
+    });
+
+    const nodeRadius = (d: any) => calcNodeRadius(d.edgeCount, stateRef.current.absoluteSizing);
+
+    const renderGraph = () => {
+      if (!containerRef.current || !graphData) return;
+      const state = stateRef.current;
+
+      containerRef.current.innerHTML = '';
+      const width = containerRef.current.clientWidth;
+      const height = containerRef.current.clientHeight;
+
+      // Build nodes
+      const edgeCounts = new Map<string, number>();
+      graphData.edges.forEach((e: any) => {
+        edgeCounts.set(e.from, (edgeCounts.get(e.from) || 0) + 1);
+        edgeCounts.set(e.to, (edgeCounts.get(e.to) || 0) + 1);
+      });
+
+      let nodes = graphData.nodes.map((n: any) => ({
+        ...n, edgeCount: edgeCounts.get(n.id) || 0,
+      }));
+
+      if (state.hideDefinedActive) {
+        nodes = nodes.filter((n: any) => !(n.status === 'defined' && n.completeness === 1));
+      }
+      if (state.hiddenTypes.size > 0) {
+        nodes = nodes.filter((n: any) => !state.hiddenTypes.has(n.type));
+      }
+
+      const nodeIds = new Set(nodes.map((n: any) => n.id));
+      const links = graphData.edges
+        .filter((e: any) => nodeIds.has(e.from) && nodeIds.has(e.to))
+        .map((e: any) => ({ source: e.from, target: e.to, relation: e.relation }));
+
+      state.nodes = nodes;
+      state.links = links;
+
+      const svg = d3.select(containerRef.current)
+        .append('svg').attr('width', width).attr('height', height);
+      state.svg = svg;
+
+      // Arrow markers
+      const defs = svg.append('defs');
+      Object.entries(EDGE_COLORS).forEach(([relation, color]) => {
+        defs.append('marker')
+          .attr('id', `arrow-${relation}`).attr('viewBox', '0 0 10 6')
+          .attr('refX', 20).attr('refY', 3)
+          .attr('markerWidth', 8).attr('markerHeight', 5)
+          .attr('orient', 'auto')
+          .append('path').attr('d', 'M0,0 L10,3 L0,6 Z').attr('fill', color);
+      });
+
+      // Zoom
+      state.zoom = d3.zoom<SVGSVGElement, unknown>()
+        .scaleExtent([0.1, 4])
+        .on('zoom', (event) => {
+          state.zoomGroup.attr('transform', event.transform);
+        });
+      svg.call(state.zoom);
+      svg.on('click', (event) => {
+        if (event.target === svg.node()) clearSelectionFn();
+      });
+
+      state.zoomGroup = svg.append('g').attr('class', 'zoom-group');
+      state.linksG = state.zoomGroup.append('g').attr('class', 'links');
+      state.edgeLabelsG = state.zoomGroup.append('g').attr('class', 'edge-labels');
+      state.gapRingsG = state.zoomGroup.append('g').attr('class', 'gap-rings');
+      state.nodesG = state.zoomGroup.append('g').attr('class', 'nodes');
+      state.gapIconsG = state.zoomGroup.append('g').attr('class', 'gap-icons');
+      state.labelsG = state.zoomGroup.append('g').attr('class', 'labels');
+
+      const linkEls = state.linksG.selectAll('line').data(links).join('line')
+        .attr('stroke', (d: any) => EDGE_COLORS[d.relation] || '#868e96')
+        .attr('stroke-opacity', 0.5).attr('stroke-width', 1.5)
+        .attr('marker-end', (d: any) => `url(#arrow-${d.relation})`);
+
+      const edgeLabelEls = state.edgeLabelsG.selectAll('text').data(links).join('text')
+        .text((d: any) => EDGE_LABELS[d.relation] || d.relation)
+        .attr('font-size', 9)
+        .attr('font-family', 'ui-monospace, "SF Mono", "Cascadia Code", monospace')
+        .attr('fill', (d: any) => EDGE_COLORS[d.relation] || '#868e96')
+        .attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
+        .attr('pointer-events', 'none')
+        .attr('opacity', state.edgeLabelsVisible ? 0.8 : 0);
+
+      const nodeEls = state.nodesG.selectAll('.node-shape').data(nodes).join('path')
+        .attr('class', 'node-shape')
+        .attr('d', (d: any) => nodeShapePath(NODE_SHAPES[d.type] || 'circle', nodeRadius(d)))
+        .attr('fill', (d: any) => NODE_COLORS[d.type] || '#adb5bd')
+        .attr('stroke', (d: any) => {
+          if (d.completeness < 1 && d.open_questions_count > 0) return '#ff6b6b';
+          if (d.completeness < 1) return '#ffd43b';
+          return 'transparent';
+        })
+        .attr('stroke-width', (d: any) => d.completeness < 1 ? 3 : 0)
+        .attr('cursor', 'pointer')
+        .on('click', (event: any, d: any) => {
+          event.stopPropagation();
+          selectNodeFn(d.id);
+          onNodeClick(d);
+        })
+        .call(d3.drag<SVGPathElement, any>()
+          .on('start', (event, d) => {
+            if (!event.active) state.simulation.alphaTarget(0.3).restart();
+            d.fx = d.x; d.fy = d.y;
+          })
+          .on('drag', (event, d) => {
+            const transform = d3.zoomTransform(svg.node()!);
+            d.fx = (event.sourceEvent.offsetX - transform.x) / transform.k;
+            d.fy = (event.sourceEvent.offsetY - transform.y) / transform.k;
+          })
+          .on('end', (event, d) => {
+            if (!event.active) state.simulation.alphaTarget(0);
+            d.fx = null; d.fy = null;
+          })
+        );
+
+      const gapNodes = nodes.filter((d: any) => d.open_questions_count > 0);
+      const gapRingEls = state.gapRingsG.selectAll('circle').data(gapNodes, (d: any) => d.id).join('circle')
+        .attr('r', (d: any) => nodeRadius(d) + 5)
+        .attr('fill', 'none').attr('stroke', '#ff6b6b').attr('stroke-width', 2)
+        .attr('class', 'gap-pulse-ring').attr('pointer-events', 'none');
+
+      const gapIconEls = state.gapIconsG.selectAll('text').data(gapNodes, (d: any) => d.id).join('text')
+        .text('\u26A0')
+        .attr('font-size', (d: any) => Math.max(10, nodeRadius(d) * 0.7))
+        .attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
+        .attr('dx', (d: any) => nodeRadius(d) * 0.7)
+        .attr('dy', (d: any) => -nodeRadius(d) * 0.7)
+        .attr('pointer-events', 'none').attr('class', 'gap-warning-icon');
+
+      const allNames = state.allNodeNamesVisible;
+      const featNames = state.featureNodeNamesVisible;
+      const labelEls = state.labelsG.selectAll('text').data(nodes).join('text')
+        .text((d: any) => d.name).attr('font-size', 11)
+        .attr('font-family', 'ui-monospace, "SF Mono", "Cascadia Code", monospace')
+        .attr('fill', 'var(--text-primary)').attr('text-anchor', 'middle')
+        .attr('dy', (d: any) => nodeRadius(d) + 14).attr('pointer-events', 'none')
+        .attr('opacity', (d: any) => {
+          if (allNames) return 1;
+          if (featNames && d.type === 'feature') return 1;
+          return 0;
+        });
+
+      state.simulation = d3.forceSimulation(nodes)
+        .force('link', d3.forceLink(links).id((d: any) => d.id).distance(80))
+        .force('charge', d3.forceManyBody().strength(-200))
+        .force('center', d3.forceCenter(width / 2, height / 2))
+        .force('x', d3.forceX(width / 2).strength(0.05))
+        .force('y', d3.forceY(height / 2).strength(0.05))
+        .force('collision', d3.forceCollide().radius((d: any) => nodeRadius(d) + 10))
+        .on('tick', () => {
+          linkEls.attr('x1', (d: any) => d.source.x).attr('y1', (d: any) => d.source.y)
+            .attr('x2', (d: any) => d.target.x).attr('y2', (d: any) => d.target.y);
+          edgeLabelEls.attr('x', (d: any) => (d.source.x + d.target.x) / 2)
+            .attr('y', (d: any) => (d.source.y + d.target.y) / 2);
+          nodeEls.attr('transform', (d: any) => `translate(${d.x},${d.y})`);
+          gapRingEls.attr('cx', (d: any) => d.x).attr('cy', (d: any) => d.y);
+          gapIconEls.attr('x', (d: any) => d.x).attr('y', (d: any) => d.y);
+          labelEls.attr('x', (d: any) => d.x).attr('y', (d: any) => d.y);
+        });
+
+      state.simulation.on('end', () => fitToViewFn());
+      setTimeout(() => fitToViewFn(), 1500);
+    };
+
+    const fitToViewFn = () => {
+      const state = stateRef.current;
+      if (!state.nodes || state.nodes.length === 0 || !state.svg || !state.zoom) return;
+      const width = containerRef.current!.clientWidth;
+      const height = containerRef.current!.clientHeight;
+
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      state.nodes.forEach((d: any) => {
+        const r = nodeRadius(d) + 20;
+        if (d.x - r < minX) minX = d.x - r;
+        if (d.y - r < minY) minY = d.y - r;
+        if (d.x + r > maxX) maxX = d.x + r;
+        if (d.y + r > maxY) maxY = d.y + r;
+      });
+
+      const gw = maxX - minX;
+      const gh = maxY - minY;
+      if (gw <= 0 || gh <= 0) return;
+
+      const scale = Math.min(width / gw, height / gh, 1.5) * 0.9;
+      const cx = (minX + maxX) / 2;
+      const cy = (minY + maxY) / 2;
+
+      const transform = d3.zoomIdentity.translate(width / 2, height / 2).scale(scale).translate(-cx, -cy);
+      state.svg.transition().duration(500).call(state.zoom.transform, transform);
+    };
+
+    const selectNodeFn = (nodeId: string) => {
+      const state = stateRef.current;
+      state.selectedNodeId = nodeId;
+      const neighborIds = new Set<string>();
+      if (state.links) {
+        for (const link of state.links) {
+          const src = typeof link.source === 'object' ? link.source.id : link.source;
+          const tgt = typeof link.target === 'object' ? link.target.id : link.target;
+          if (src === nodeId) neighborIds.add(tgt);
+          if (tgt === nodeId) neighborIds.add(src);
+        }
+      }
+      const isInFocus = (id: string) => id === nodeId || neighborIds.has(id);
+
+      state.nodesG.selectAll('.node-shape').attr('opacity', (d: any) => isInFocus(d.id) ? 1 : 0.15);
+      state.linksG.selectAll('line').attr('stroke-opacity', (d: any) =>
+        d.source.id === nodeId || d.target.id === nodeId ? 0.8 : 0.05);
+      if (state.edgeLabelsVisible) {
+        state.edgeLabelsG.selectAll('text').attr('opacity', (d: any) =>
+          d.source.id === nodeId || d.target.id === nodeId ? 1 : 0.05);
+      }
+      state.labelsG.selectAll('text').attr('opacity', (d: any) => isInFocus(d.id) ? 1 : 0.1);
+      state.gapRingsG.selectAll('circle').attr('opacity', (d: any) => isInFocus(d.id) ? 1 : 0.1);
+      state.gapIconsG.selectAll('text').attr('opacity', (d: any) => isInFocus(d.id) ? 1 : 0.1);
+    };
+
+    const clearSelectionFn = () => {
+      const state = stateRef.current;
+      state.selectedNodeId = null;
+      state.nodesG?.selectAll('.node-shape').attr('opacity', 1);
+      state.linksG?.selectAll('line').attr('stroke-opacity', 0.5);
+      if (state.edgeLabelsVisible) {
+        state.edgeLabelsG?.selectAll('text').attr('opacity', 0.8);
+      }
+      state.labelsG?.selectAll('text').attr('opacity', (d: any) => {
+        if (state.allNodeNamesVisible) return 1;
+        if (state.featureNodeNamesVisible && d.type === 'feature') return 1;
+        return 0;
+      });
+      state.gapRingsG?.selectAll('circle').attr('opacity', 1);
+      state.gapIconsG?.selectAll('text').attr('opacity', 1);
+    };
+
+    useImperativeHandle(ref, () => ({
+      fitToView: fitToViewFn,
+      focusNode: (nodeId: string) => {
+        const state = stateRef.current;
+        if (!state.nodes || !state.svg || !state.zoom) return;
+        const node = state.nodes.find((n: any) => n.id === nodeId);
+        if (!node || node.x == null) return;
+        const width = containerRef.current!.clientWidth;
+        const height = containerRef.current!.clientHeight;
+        const transform = d3.zoomIdentity.translate(width / 2, height / 2).scale(1.2).translate(-node.x, -node.y);
+        state.svg.transition().duration(500).call(state.zoom.transform, transform);
+        selectNodeFn(nodeId);
+      },
+      setHiddenTypes: (types: Set<string>) => {
+        stateRef.current.hiddenTypes = new Set(types);
+        renderGraph();
+      },
+      highlightBySearch: (query: string) => {
+        const state = stateRef.current;
+        if (!query || query.trim().length === 0) {
+          state.searchQuery = null;
+          clearSelectionFn();
+          return;
+        }
+        state.searchQuery = query.toLowerCase();
+        const matches = (d: any) => d.name.toLowerCase().includes(state.searchQuery);
+        state.nodesG.selectAll('.node-shape').attr('opacity', (d: any) => matches(d) ? 1 : 0.15);
+        state.linksG.selectAll('line').attr('stroke-opacity', (d: any) => {
+          const src = state.nodes.find((n: any) => n.id === (typeof d.source === 'object' ? d.source.id : d.source));
+          const tgt = state.nodes.find((n: any) => n.id === (typeof d.target === 'object' ? d.target.id : d.target));
+          return (src && matches(src)) || (tgt && matches(tgt)) ? 0.5 : 0.05;
+        });
+        state.labelsG.selectAll('text').attr('opacity', (d: any) => matches(d) ? 1 : 0.1);
+      },
+      clearSelection: clearSelectionFn,
+      getNodeById: (nodeId: string) => stateRef.current.nodes?.find((n: any) => n.id === nodeId) || null,
+      toggleEdgeLabels: () => {
+        const state = stateRef.current;
+        state.edgeLabelsVisible = !state.edgeLabelsVisible;
+        state.edgeLabelsG?.selectAll('text').attr('opacity', state.edgeLabelsVisible ? 0.8 : 0);
+        return state.edgeLabelsVisible;
+      },
+      toggleHideDefined: () => {
+        const state = stateRef.current;
+        state.hideDefinedActive = !state.hideDefinedActive;
+        renderGraph();
+        return state.hideDefinedActive;
+      },
+      setNodeNameVisibility: (all: boolean, feature: boolean) => {
+        const state = stateRef.current;
+        state.allNodeNamesVisible = all;
+        state.featureNodeNamesVisible = feature;
+        state.labelsG?.selectAll('text').attr('opacity', (d: any) => {
+          if (all) return 1;
+          if (feature && d.type === 'feature') return 1;
+          return 0;
+        });
+      },
+      setAbsoluteSizing: (enabled: boolean) => {
+        stateRef.current.absoluteSizing = enabled;
+        renderGraph();
+      },
+      get edgeLabelsVisible() { return stateRef.current.edgeLabelsVisible; },
+      get hideDefinedActive() { return stateRef.current.hideDefinedActive; },
+      get absoluteSizingActive() { return stateRef.current.absoluteSizing; },
+    }));
+
+    useEffect(() => {
+      if (visible && graphData) renderGraph();
+    }, [graphData, visible]);
+
+    useEffect(() => {
+      if (!visible) return;
+      const handleResize = () => {
+        const state = stateRef.current;
+        if (!state.svg) return;
+        const width = containerRef.current!.clientWidth;
+        const height = containerRef.current!.clientHeight;
+        state.svg.attr('width', width).attr('height', height);
+        if (state.simulation) {
+          state.simulation.force('center', d3.forceCenter(width / 2, height / 2));
+          state.simulation.alpha(0.3).restart();
+        }
+      };
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, [visible]);
+
+    return <div id="graph-container" ref={containerRef} style={{ display: visible ? 'block' : 'none' }} />;
+  }
+);

package/templates/product-system/packages/frontend/src/components/InviteUserDialog.tsx

@@ -0,0 +1,85 @@
+/**
+ * Invite User Dialog — admin-only modal for sending email invitations.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { apiClient } from '../api/client';
+import { validateEmail } from '../utils/auth_validation';
+
+interface InviteUserDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function InviteUserDialog({ isOpen, onClose }: InviteUserDialogProps) {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+
+    const emailErr = validateEmail(email);
+    if (emailErr) {
+      setError(emailErr);
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const data = await apiClient.sendInvitation(email);
+      setSuccess(data.message);
+      setEmail('');
+    } catch (err: any) {
+      setError(err.message || 'Failed to send invitation');
+    } finally {
+      setSubmitting(false);
+    }
+  }, [email]);
+
+  const handleClose = useCallback(() => {
+    setEmail('');
+    setError('');
+    setSuccess('');
+    onClose();
+  }, [onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="invite-dialog-overlay" onClick={handleClose}>
+      <div className="invite-dialog" onClick={e => e.stopPropagation()}>
+        <div className="invite-dialog-header">
+          <h2>Invite User</h2>
+          <button className="invite-dialog-close" onClick={handleClose} type="button">&times;</button>
+        </div>
+
+        <form onSubmit={handleSubmit} noValidate>
+          {error && <div className="auth-error-banner">{error}</div>}
+          {success && <div className="invite-dialog-success">{success}</div>}
+
+          <div className="auth-field">
+            <label className="auth-label" htmlFor="invite-email">Email address</label>
+            <input
+              id="invite-email"
+              className={`auth-input${error ? ' auth-input-error' : ''}`}
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="user@example.com"
+              autoFocus
+              disabled={submitting}
+            />
+          </div>
+
+          <button className="auth-submit" type="submit" disabled={submitting}>
+            {submitting ? 'Sending...' : 'Send Invitation'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}