create-ekka-desktop-app 0.2.2

package/template/src/demo/components/LearnMore.tsx

@@ -0,0 +1,98 @@
+/**
+ * Learn More Component
+ * Expandable section for additional information.
+ */
+
+import { useState, type CSSProperties, type ReactElement, type ReactNode } from 'react';
+
+interface LearnMoreProps {
+  title: string;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  darkMode?: boolean;
+}
+
+export function LearnMore({
+  title,
+  children,
+  defaultExpanded = false,
+  darkMode = false,
+}: LearnMoreProps): ReactElement {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const colors = {
+    text: darkMode ? '#ffffff' : '#1d1d1f',
+    textMuted: darkMode ? '#98989d' : '#6e6e73',
+    border: darkMode ? '#3a3a3c' : '#e5e5e5',
+    bg: darkMode ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.02)',
+    hover: darkMode ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.04)',
+  };
+
+  const styles: Record<string, CSSProperties> = {
+    container: {
+      border: `1px solid ${colors.border}`,
+      borderRadius: '6px',
+      overflow: 'hidden',
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '10px 14px',
+      background: colors.bg,
+      border: 'none',
+      borderRadius: 0,
+      width: '100%',
+      cursor: 'pointer',
+      transition: 'background 0.15s ease',
+    },
+    title: {
+      fontSize: '13px',
+      fontWeight: 500,
+      color: colors.text,
+      margin: 0,
+    },
+    icon: {
+      width: '14px',
+      height: '14px',
+      color: colors.textMuted,
+      transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+      transition: 'transform 0.2s ease',
+    },
+    content: {
+      padding: '14px',
+      fontSize: '13px',
+      lineHeight: 1.6,
+      color: colors.textMuted,
+      borderTop: `1px solid ${colors.border}`,
+      display: expanded ? 'block' : 'none',
+    },
+  };
+
+  return (
+    <div style={styles.container}>
+      <button
+        style={styles.header}
+        onClick={() => setExpanded(!expanded)}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.hover;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = colors.bg;
+        }}
+      >
+        <span style={styles.title}>{title}</span>
+        <svg style={styles.icon} viewBox="0 0 16 16" fill="none">
+          <path
+            d="M4 6l4 4 4-4"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+      <div style={styles.content}>{children}</div>
+    </div>
+  );
+}

package/template/src/demo/components/NodeCredentialsOnboarding.tsx

@@ -0,0 +1,219 @@
+/**
+ * Node Credentials Onboarding Component
+ *
+ * Minimal UI for one-time node_id + node_secret input.
+ * Stores credentials securely in OS keychain.
+ */
+
+import { useState, useCallback } from 'react';
+import { ekka } from '../../ekka';
+
+interface NodeCredentialsOnboardingProps {
+  /** Called when credentials are successfully saved */
+  onComplete?: () => void;
+  /** If true, renders without outer container (for embedding in wizard) */
+  embedded?: boolean;
+}
+
+export function NodeCredentialsOnboarding({
+  onComplete,
+  embedded = false,
+}: NodeCredentialsOnboardingProps) {
+  const [nodeId, setNodeId] = useState('');
+  const [nodeSecret, setNodeSecret] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  // Validation states
+  const nodeIdValid = ekka.nodeCredentials.isValidNodeId(nodeId);
+  const nodeSecretValid = ekka.nodeCredentials.isValidNodeSecret(nodeSecret);
+  const canSubmit = nodeIdValid && nodeSecretValid && !loading;
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError(null);
+      setLoading(true);
+
+      try {
+        await ekka.nodeCredentials.set(nodeId, nodeSecret);
+        setSuccess(true);
+        onComplete?.();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to save credentials');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [nodeId, nodeSecret, onComplete]
+  );
+
+  const successContent = (
+    <div style={styles.card}>
+      <div style={styles.successIcon}>&#10003;</div>
+      <h2 style={styles.title}>Node Configured</h2>
+      <p style={styles.text}>
+        Your node credentials have been saved securely.
+        The engine will use them automatically on startup.
+      </p>
+    </div>
+  );
+
+  if (success) {
+    return embedded ? successContent : <div style={styles.container}>{successContent}</div>;
+  }
+
+  const formContent = (
+    <div style={styles.card}>
+        <h2 style={styles.title}>Configure Node Identity</h2>
+        <p style={styles.text}>
+          Enter your node credentials to enable headless engine startup.
+          These will be stored securely in your system keychain.
+        </p>
+
+        <form onSubmit={handleSubmit} style={styles.form}>
+          <div style={styles.field}>
+            <label style={styles.label}>Node ID</label>
+            <input
+              type="text"
+              value={nodeId}
+              onChange={(e) => setNodeId(e.target.value.trim())}
+              placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+              style={{
+                ...styles.input,
+                borderColor: nodeId && !nodeIdValid ? '#ef4444' : '#d1d5db',
+              }}
+              disabled={loading}
+            />
+            {nodeId && !nodeIdValid && (
+              <span style={styles.error}>Must be a valid UUID</span>
+            )}
+          </div>
+
+          <div style={styles.field}>
+            <label style={styles.label}>Node Secret</label>
+            <input
+              type="password"
+              value={nodeSecret}
+              onChange={(e) => setNodeSecret(e.target.value)}
+              placeholder="Enter node secret"
+              style={{
+                ...styles.input,
+                borderColor: nodeSecret && !nodeSecretValid ? '#ef4444' : '#d1d5db',
+              }}
+              disabled={loading}
+            />
+            {nodeSecret && !nodeSecretValid && (
+              <span style={styles.error}>Must be at least 16 characters</span>
+            )}
+          </div>
+
+          {error && <div style={styles.errorBox}>{error}</div>}
+
+          <button
+            type="submit"
+            disabled={!canSubmit}
+            style={{
+              ...styles.button,
+              opacity: canSubmit ? 1 : 0.5,
+              cursor: canSubmit ? 'pointer' : 'not-allowed',
+            }}
+          >
+            {loading ? 'Saving...' : 'Save Credentials'}
+          </button>
+        </form>
+      </div>
+  );
+
+  return embedded ? formContent : <div style={styles.container}>{formContent}</div>;
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    padding: '1rem',
+    backgroundColor: '#f3f4f6',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: '0.5rem',
+    padding: '2rem',
+    maxWidth: '400px',
+    width: '100%',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+  },
+  title: {
+    margin: '0 0 0.5rem 0',
+    fontSize: '1.25rem',
+    fontWeight: 600,
+    color: '#111827',
+  },
+  text: {
+    margin: '0 0 1.5rem 0',
+    fontSize: '0.875rem',
+    color: '#6b7280',
+    lineHeight: 1.5,
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+  },
+  field: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+  },
+  label: {
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: '#374151',
+  },
+  input: {
+    padding: '0.5rem 0.75rem',
+    fontSize: '0.875rem',
+    border: '1px solid #d1d5db',
+    borderRadius: '0.375rem',
+    outline: 'none',
+    fontFamily: 'monospace',
+  },
+  error: {
+    fontSize: '0.75rem',
+    color: '#ef4444',
+  },
+  errorBox: {
+    padding: '0.75rem',
+    backgroundColor: '#fef2f2',
+    border: '1px solid #fecaca',
+    borderRadius: '0.375rem',
+    fontSize: '0.875rem',
+    color: '#b91c1c',
+  },
+  button: {
+    padding: '0.625rem 1rem',
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: '#ffffff',
+    backgroundColor: '#3b82f6',
+    border: 'none',
+    borderRadius: '0.375rem',
+    marginTop: '0.5rem',
+  },
+  successIcon: {
+    width: '3rem',
+    height: '3rem',
+    lineHeight: '3rem',
+    textAlign: 'center',
+    fontSize: '1.5rem',
+    color: '#ffffff',
+    backgroundColor: '#10b981',
+    borderRadius: '50%',
+    margin: '0 auto 1rem auto',
+  },
+};
+
+export default NodeCredentialsOnboarding;

package/template/src/demo/components/SetupWizard.tsx

@@ -0,0 +1,48 @@
+/**
+ * Pre-Login Setup Wizard
+ *
+ * Single-step setup flow: Connect Node (node_id + node_secret)
+ *
+ * This runs BEFORE login - no user auth required.
+ * Home folder grant is handled POST-login via HomeSetupPage.
+ */
+
+import { useCallback } from 'react';
+import type { SetupStatus } from '../../ekka';
+import { NodeCredentialsOnboarding } from './NodeCredentialsOnboarding';
+
+interface SetupWizardProps {
+  /** Initial setup status */
+  initialStatus: SetupStatus;
+  /** Called when setup is complete */
+  onComplete: () => void;
+  /** Dark mode */
+  darkMode?: boolean;
+}
+
+export function SetupWizard({
+  onComplete,
+  darkMode = false,
+}: SetupWizardProps) {
+  // Handle node credentials complete
+  const handleNodeComplete = useCallback(() => {
+    onComplete();
+  }, [onComplete]);
+
+  return (
+    <div style={{
+      minHeight: '100vh',
+      backgroundColor: darkMode ? '#1c1c1e' : '#f5f5f7',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '2rem',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif',
+    }}>
+      <NodeCredentialsOnboarding onComplete={handleNodeComplete} embedded />
+    </div>
+  );
+}
+
+export default SetupWizard;

package/template/src/demo/components/StatusBadge.tsx

@@ -0,0 +1,83 @@
+/**
+ * Status Badge Component
+ * Visual status indicator with color coding.
+ */
+
+import { type CSSProperties, type ReactElement } from 'react';
+
+interface StatusBadgeProps {
+  status: string;
+  darkMode?: boolean;
+}
+
+type StatusColor = 'green' | 'amber' | 'red' | 'blue' | 'gray';
+
+function getStatusColor(status: string): StatusColor {
+  const normalized = status.toLowerCase();
+
+  // Success states
+  if (['success', 'completed', 'active', 'connected', 'online'].includes(normalized)) {
+    return 'green';
+  }
+
+  // Warning states
+  if (['warning', 'pending', 'processing', 'running'].includes(normalized)) {
+    return 'amber';
+  }
+
+  // Error states
+  if (['error', 'failed', 'disconnected', 'offline'].includes(normalized)) {
+    return 'red';
+  }
+
+  // Info states
+  if (['info', 'new', 'created'].includes(normalized)) {
+    return 'blue';
+  }
+
+  // Default
+  return 'gray';
+}
+
+export function StatusBadge({ status, darkMode = false }: StatusBadgeProps): ReactElement {
+  const color = getStatusColor(status);
+
+  const colorMap: Record<StatusColor, { bg: string; text: string }> = {
+    green: {
+      bg: darkMode ? '#14532d' : '#dcfce7',
+      text: darkMode ? '#4ade80' : '#166534',
+    },
+    amber: {
+      bg: darkMode ? '#422006' : '#fef3c7',
+      text: darkMode ? '#fbbf24' : '#92400e',
+    },
+    red: {
+      bg: darkMode ? '#3c1618' : '#fef2f2',
+      text: darkMode ? '#fca5a5' : '#991b1b',
+    },
+    blue: {
+      bg: darkMode ? '#1e3a5f' : '#e0f2fe',
+      text: darkMode ? '#60a5fa' : '#0369a1',
+    },
+    gray: {
+      bg: darkMode ? '#374151' : '#f3f4f6',
+      text: darkMode ? '#9ca3af' : '#6b7280',
+    },
+  };
+
+  const { bg, text } = colorMap[color];
+
+  const styles: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 10px',
+    borderRadius: '4px',
+    fontSize: '12px',
+    fontWeight: 500,
+    background: bg,
+    color: text,
+    textTransform: 'capitalize',
+  };
+
+  return <span style={styles}>{status}</span>;
+}

package/template/src/demo/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Demo Components
+ * Re-exports all demo UI components.
+ */
+
+export { InfoTooltip } from './InfoTooltip';
+export { LearnMore } from './LearnMore';
+export { EmptyState } from './EmptyState';
+export { StatusBadge } from './StatusBadge';
+export { Banner } from './Banner';

package/template/src/demo/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Demo Hooks
+ * Re-exports all demo hooks.
+ */
+
+export { useAuditEvents } from './useAuditEvents';

package/template/src/demo/hooks/useAuditEvents.ts

@@ -0,0 +1,30 @@
+/**
+ * useAuditEvents Hook
+ * React hook for subscribing to audit events.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  getAuditEvents,
+  subscribeToAuditEvents,
+  type AuditEvent,
+} from '../../ekka/audit';
+
+/**
+ * Hook to subscribe to and retrieve audit events.
+ * Re-renders when events change.
+ */
+export function useAuditEvents(): AuditEvent[] {
+  const [events, setEvents] = useState<AuditEvent[]>(getAuditEvents);
+
+  useEffect(() => {
+    // Subscribe to changes
+    const unsubscribe = subscribeToAuditEvents(() => {
+      setEvents(getAuditEvents());
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return events;
+}

package/template/src/demo/layout/Shell.tsx

@@ -0,0 +1,110 @@
+/**
+ * Application Shell
+ * Main layout with sidebar navigation and content area
+ * Supports light/dark mode
+ */
+
+import { CSSProperties, ReactNode } from 'react';
+import { Sidebar, Page } from './Sidebar';
+
+interface ShellProps {
+  selectedPage: Page;
+  onNavigate: (page: Page) => void;
+  children: ReactNode;
+  darkMode: boolean;
+  onToggleDarkMode: () => void;
+}
+
+export function Shell({ selectedPage, onNavigate, children, darkMode, onToggleDarkMode }: ShellProps) {
+  const styles: Record<string, CSSProperties> = {
+    shell: {
+      display: 'flex',
+      height: '100vh',
+      width: '100vw',
+      overflow: 'hidden',
+      background: darkMode ? '#1c1c1e' : '#ffffff',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif',
+    },
+    main: {
+      flex: 1,
+      overflow: 'auto',
+      background: darkMode ? '#1c1c1e' : '#ffffff',
+      position: 'relative',
+    },
+    header: {
+      position: 'absolute',
+      top: '16px',
+      right: '24px',
+      zIndex: 10,
+    },
+    toggleButton: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '36px',
+      height: '36px',
+      background: darkMode ? '#2c2c2e' : '#f5f5f7',
+      border: `1px solid ${darkMode ? '#3a3a3c' : '#e5e5e5'}`,
+      borderRadius: '8px',
+      cursor: 'pointer',
+      color: darkMode ? '#ffffff' : '#1d1d1f',
+      transition: 'background 0.15s ease',
+    },
+    content: {
+      padding: '32px 40px',
+      width: '100%',
+      minHeight: 'calc(100vh - 64px)',
+      boxSizing: 'border-box' as const,
+    },
+  };
+
+  return (
+    <div style={styles.shell}>
+      <Sidebar selectedPage={selectedPage} onNavigate={onNavigate} darkMode={darkMode} />
+      <main style={styles.main}>
+        <div style={styles.header}>
+          <button
+            onClick={onToggleDarkMode}
+            style={styles.toggleButton}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = darkMode ? '#3a3a3c' : '#e5e5e5';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = darkMode ? '#2c2c2e' : '#f5f5f7';
+            }}
+            title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+          >
+            {darkMode ? <SunIcon /> : <MoonIcon />}
+          </button>
+        </div>
+        <div style={styles.content}>
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function SunIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}