create-ekka-desktop-app 0.2.2

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

@@ -0,0 +1,192 @@
+/**
+ * Sidebar Navigation
+ * Clean admin-style left navigation
+ */
+
+import { type CSSProperties, type ReactElement } from 'react';
+
+export type Page = 'audit-log' | 'path-permissions' | 'vault' | 'doc-gen' | 'runner' | 'system';
+
+interface SidebarProps {
+  selectedPage: Page;
+  onNavigate: (page: Page) => void;
+  darkMode: boolean;
+}
+
+export function Sidebar({ selectedPage, onNavigate, darkMode }: SidebarProps): ReactElement {
+  const colors = {
+    bg: darkMode ? '#2c2c2e' : '#f5f5f7',
+    border: darkMode ? '#3a3a3c' : '#e5e5e5',
+    text: darkMode ? '#ffffff' : '#1d1d1f',
+    textMuted: darkMode ? '#98989d' : '#86868b',
+    hover: darkMode ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.04)',
+    active: darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)',
+  };
+
+  const styles: Record<string, CSSProperties> = {
+    sidebar: {
+      width: '220px',
+      minWidth: '220px',
+      height: '100vh',
+      background: colors.bg,
+      borderRight: `1px solid ${colors.border}`,
+      display: 'flex',
+      flexDirection: 'column',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif',
+    },
+    logo: {
+      padding: '20px 16px 16px',
+      borderBottom: `1px solid ${colors.border}`,
+    },
+    logoText: {
+      fontSize: '14px',
+      fontWeight: 600,
+      color: colors.text,
+      letterSpacing: '-0.01em',
+    },
+    nav: {
+      flex: 1,
+      padding: '12px 8px',
+      overflowY: 'auto',
+    },
+    sectionLabel: {
+      fontSize: '11px',
+      fontWeight: 600,
+      color: colors.textMuted,
+      textTransform: 'uppercase',
+      letterSpacing: '0.04em',
+      padding: '12px 10px 6px',
+      marginTop: '4px',
+    },
+    navItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      width: '100%',
+      padding: '8px 10px',
+      margin: '1px 0',
+      background: 'transparent',
+      border: 'none',
+      borderRadius: '6px',
+      fontSize: '13px',
+      fontWeight: 400,
+      color: colors.text,
+      textAlign: 'left' as const,
+      cursor: 'pointer',
+      transition: 'background 0.15s ease',
+    },
+    navItemActive: {
+      background: colors.active,
+      fontWeight: 500,
+    },
+    bottomSection: {
+      padding: '8px',
+      borderTop: `1px solid ${colors.border}`,
+    },
+  };
+
+  const NavButton = ({
+    page,
+    label,
+    icon,
+  }: {
+    page: Page;
+    label: string;
+    icon: ReactElement;
+  }) => {
+    const isActive = selectedPage === page;
+    return (
+      <button
+        onClick={() => onNavigate(page)}
+        style={{
+          ...styles.navItem,
+          ...(isActive ? styles.navItemActive : {}),
+        }}
+        onMouseEnter={(e) => {
+          if (!isActive) e.currentTarget.style.background = colors.hover;
+        }}
+        onMouseLeave={(e) => {
+          if (!isActive) e.currentTarget.style.background = 'transparent';
+        }}
+      >
+        {icon}
+        {label}
+      </button>
+    );
+  };
+
+  return (
+    <aside style={styles.sidebar}>
+      <div style={styles.logo}>
+        <span style={styles.logoText}>EKKA Desktop</span>
+      </div>
+
+      <nav style={styles.nav}>
+        <div style={styles.sectionLabel}>Tools</div>
+        <NavButton page="path-permissions" label="Path Permissions" icon={<PathIcon />} />
+        <NavButton page="vault" label="Vault" icon={<VaultIcon />} />
+        <NavButton page="doc-gen" label="Generate Docs" icon={<DocGenIcon />} />
+        <NavButton page="runner" label="Runner" icon={<RunnerIcon />} />
+        <NavButton page="audit-log" label="Audit Log" icon={<AuditIcon />} />
+      </nav>
+
+      <div style={styles.bottomSection}>
+        <NavButton page="system" label="System" icon={<SystemIcon />} />
+      </div>
+    </aside>
+  );
+}
+
+function PathIcon(): ReactElement {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.7 }}>
+      <path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.764.382 2.236 1l.472.707c.188.282.51.543 1.028.543h4.5A1.5 1.5 0 0 1 15 5.75v6.75A1.5 1.5 0 0 1 13.5 14h-11A1.5 1.5 0 0 1 1 12.5v-9zm1.5-.5a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V5.75a.5.5 0 0 0-.5-.5H9a2.016 2.016 0 0 1-1.528-.793l-.472-.707C6.764 3.393 6.366 3 5.264 3H2.5z" />
+    </svg>
+  );
+}
+
+function AuditIcon(): ReactElement {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.7 }}>
+      <path d="M2.5 2a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-11zm0-1h11A1.5 1.5 0 0 1 15 2.5v11a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 13.5v-11A1.5 1.5 0 0 1 2.5 1z" />
+      <path d="M4 4.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z" />
+    </svg>
+  );
+}
+
+function VaultIcon(): ReactElement {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.7 }}>
+      <path d="M4 4a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v1h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1V4zm3-2a2 2 0 0 0-2 2v1h6V4a2 2 0 0 0-2-2H7zM3 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3z" />
+      <path d="M8 9a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0v-1a1 1 0 0 0-1-1z" />
+    </svg>
+  );
+}
+
+function SystemIcon(): ReactElement {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.7 }}>
+      <path d="M8 0L1 3v5c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V3L8 0zm0 1.2L14 3.7v4.8c0 3.8-2.5 6.3-6 7.7-3.5-1.4-6-3.9-6-7.7V3.7L8 1.2z" />
+      <path d="M6.5 7.5L5 9l2 2 4-4-1.5-1.5L7 8l-.5-.5z" />
+    </svg>
+  );
+}
+
+function DocGenIcon(): ReactElement {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.7 }}>
+      <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zM9.5 4V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-3.5z" />
+      <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 8h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z" />
+    </svg>
+  );
+}
+
+function RunnerIcon(): ReactElement {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style={{ opacity: 0.7 }}>
+      <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+      <path d="M8 8a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1z" />
+    </svg>
+  );
+}

package/template/src/demo/pages/AuditLogPage.tsx

@@ -0,0 +1,235 @@
+/**
+ * Audit Log Page
+ * Displays audit events with expandable technical details.
+ */
+
+import { type CSSProperties, type ReactElement } from 'react';
+import { clearAuditEvents, type AuditEvent } from '../../ekka/audit';
+import { formatLocalTime, formatRelativeTime } from '../../ekka/utils';
+import { useAuditEvents } from '../hooks/useAuditEvents';
+import { EmptyState } from '../components/EmptyState';
+import { LearnMore } from '../components/LearnMore';
+
+interface AuditLogPageProps {
+  darkMode: boolean;
+}
+
+export function AuditLogPage({ darkMode }: AuditLogPageProps): ReactElement {
+  const events = useAuditEvents();
+
+  const colors = {
+    text: darkMode ? '#ffffff' : '#1d1d1f',
+    textMuted: darkMode ? '#98989d' : '#6e6e73',
+    bg: darkMode ? '#2c2c2e' : '#fafafa',
+    border: darkMode ? '#3a3a3c' : '#e5e5e5',
+    cardBg: darkMode ? '#2c2c2e' : '#ffffff',
+    codeBg: darkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)',
+    buttonBg: darkMode ? '#3a3a3c' : '#f3f4f6',
+    buttonHover: darkMode ? '#48484a' : '#e5e7eb',
+    buttonText: darkMode ? '#ffffff' : '#1d1d1f',
+  };
+
+  const styles: Record<string, CSSProperties> = {
+    header: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      marginBottom: '32px',
+    },
+    headerText: {},
+    title: {
+      fontSize: '28px',
+      fontWeight: 700,
+      color: colors.text,
+      marginBottom: '8px',
+      letterSpacing: '-0.02em',
+    },
+    description: {
+      fontSize: '13px',
+      lineHeight: 1.5,
+      color: colors.textMuted,
+    },
+    clearButton: {
+      padding: '8px 14px',
+      fontSize: '13px',
+      fontWeight: 500,
+      color: colors.buttonText,
+      background: colors.buttonBg,
+      border: 'none',
+      borderRadius: '6px',
+      cursor: 'pointer',
+      transition: 'background 0.15s ease',
+    },
+    card: {
+      background: colors.cardBg,
+      border: `1px solid ${colors.border}`,
+      borderRadius: '8px',
+      overflow: 'hidden',
+    },
+    eventList: {
+      listStyle: 'none',
+      margin: 0,
+      padding: 0,
+    },
+    eventItem: {
+      padding: '14px 16px',
+      borderBottom: `1px solid ${colors.border}`,
+    },
+    eventItemLast: {
+      padding: '14px 16px',
+    },
+    eventHeader: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      marginBottom: '4px',
+    },
+    eventType: {
+      fontSize: '12px',
+      fontWeight: 600,
+      color: colors.text,
+      fontFamily: 'SF Mono, Monaco, Consolas, monospace',
+      background: colors.codeBg,
+      padding: '2px 8px',
+      borderRadius: '4px',
+    },
+    eventTime: {
+      fontSize: '12px',
+      color: colors.textMuted,
+    },
+    eventDescription: {
+      fontSize: '13px',
+      color: colors.text,
+      marginBottom: '4px',
+      lineHeight: 1.4,
+    },
+    eventExplanation: {
+      fontSize: '12px',
+      color: colors.textMuted,
+      fontStyle: 'italic',
+      marginBottom: '8px',
+    },
+    technicalSection: {
+      marginTop: '10px',
+    },
+    technicalContent: {
+      fontFamily: 'SF Mono, Monaco, Consolas, monospace',
+      fontSize: '11px',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+    },
+  };
+
+  const handleClear = (): void => {
+    clearAuditEvents();
+  };
+
+  const renderEmptyIcon = (): ReactElement => (
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+      <rect
+        x="8"
+        y="6"
+        width="32"
+        height="36"
+        rx="3"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <line
+        x1="14"
+        y1="14"
+        x2="34"
+        y2="14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <line
+        x1="14"
+        y1="22"
+        x2="28"
+        y2="22"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <line
+        x1="14"
+        y1="30"
+        x2="32"
+        y2="30"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+
+  const renderEvent = (event: AuditEvent, isLast: boolean): ReactElement => (
+    <li key={event.id} style={isLast ? styles.eventItemLast : styles.eventItem}>
+      <div style={styles.eventHeader}>
+        <span style={styles.eventType}>{event.type}</span>
+        <span style={styles.eventTime} title={formatLocalTime(event.timestamp)}>
+          {formatRelativeTime(event.timestamp)}
+        </span>
+      </div>
+      <p style={styles.eventDescription}>{event.description}</p>
+      {event.explanation && (
+        <p style={styles.eventExplanation}>{event.explanation}</p>
+      )}
+      {event.technical && Object.keys(event.technical).length > 0 && (
+        <div style={styles.technicalSection}>
+          <LearnMore title="Technical Details" darkMode={darkMode}>
+            <pre style={styles.technicalContent}>
+              {JSON.stringify(event.technical, null, 2)}
+            </pre>
+          </LearnMore>
+        </div>
+      )}
+    </li>
+  );
+
+  return (
+    <div>
+      <header style={styles.header}>
+        <div style={styles.headerText}>
+          <h1 style={styles.title}>Audit Log</h1>
+          <p style={styles.description}>
+            Track system events and operations for debugging and compliance.
+          </p>
+        </div>
+        {events.length > 0 && (
+          <button
+            style={styles.clearButton}
+            onClick={handleClear}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = colors.buttonHover;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = colors.buttonBg;
+            }}
+          >
+            Clear
+          </button>
+        )}
+      </header>
+
+      <div style={styles.card}>
+        {events.length === 0 ? (
+          <EmptyState
+            icon={renderEmptyIcon()}
+            message="No audit events yet"
+            hint="Events will appear here as you interact with the system."
+            darkMode={darkMode}
+          />
+        ) : (
+          <ul style={styles.eventList}>
+            {events.map((event, index) =>
+              renderEvent(event, index === events.length - 1)
+            )}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}