auramaxx 1.0.0-alpha.4

package/src/components/health/CredentialHealthDashboard.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { api, Api } from '@/lib/api';
+
+type HealthFlagSummary = {
+  totalAnalyzed: number;
+  safe: number;
+  weak: number;
+  reused: number;
+  breached: number;
+  unknown: number;
+  lastScanAt: string;
+};
+
+type HealthRow = {
+  id: string;
+  name: string;
+  type: string;
+  vaultId: string;
+  health: {
+    status: string;
+    flags: { weak: boolean; reused: boolean; breached: boolean; unknown: boolean };
+    evidence: {
+      reuseCount: number;
+      breachCount: number | null;
+      weakReasons: string[];
+    };
+    engineVersion: string;
+    lastScannedAt: string | null;
+  };
+};
+
+type ScanStatus = 'idle' | 'queued' | 'running' | 'complete' | 'failed' | 'expired';
+
+const STATUS_TONE: Record<string, string> = {
+  safe: 'text-emerald-700',
+  weak: 'text-amber-700',
+  reused: 'text-orange-700',
+  breached: 'text-red-700',
+  unknown: 'text-slate-600',
+  weak_reused: 'text-orange-700',
+  weak_breached: 'text-red-700',
+  reused_breached: 'text-red-700',
+  weak_reused_breached: 'text-red-700',
+};
+
+function fmtTime(input?: string | null): string {
+  if (!input) return '—';
+  const date = new Date(input);
+  if (Number.isNaN(date.getTime())) return '—';
+  return date.toLocaleString();
+}
+
+export function CredentialHealthDashboard() {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [summary, setSummary] = useState<HealthFlagSummary | null>(null);
+  const [rows, setRows] = useState<HealthRow[]>([]);
+  const [scanId, setScanId] = useState<string | null>(null);
+  const [scanStatus, setScanStatus] = useState<ScanStatus>('idle');
+  const [scanError, setScanError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setError(null);
+    try {
+      const [summaryRes, rowsRes] = await Promise.all([
+        api.get<{ success: boolean; summary: HealthFlagSummary }>(Api.Wallet, '/credentials/health/summary'),
+        api.get<{ success: boolean; credentials: HealthRow[] }>(Api.Wallet, '/credentials/health'),
+      ]);
+      setSummary(summaryRes.summary);
+      setRows(rowsRes.credentials || []);
+    } catch (err) {
+      setError((err as Error).message || 'Failed to load credential health');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    if (!scanId || (scanStatus !== 'queued' && scanStatus !== 'running')) return;
+
+    const timer = setInterval(async () => {
+      try {
+        const res = await api.get<{
+          success: boolean;
+          scan: { status: ScanStatus; error?: string };
+        }>(Api.Wallet, `/credentials/health/rescan/${scanId}`);
+        setScanStatus(res.scan.status);
+        setScanError(res.scan.error || null);
+        if (res.scan.status === 'complete') {
+          await load();
+        }
+      } catch (err) {
+        setScanStatus('failed');
+        setScanError((err as Error).message || 'Failed to read scan status');
+      }
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [scanId, scanStatus, load]);
+
+  const startRescan = useCallback(async () => {
+    setScanError(null);
+    setScanStatus('queued');
+    try {
+      const res = await api.post<{ accepted: boolean; scanId: string }>(Api.Wallet, '/credentials/health/rescan');
+      setScanId(res.scanId);
+    } catch (err) {
+      setScanStatus('failed');
+      setScanError((err as Error).message || 'Failed to start rescan');
+    }
+  }, []);
+
+  const engineVersion = useMemo(() => rows.find((row) => row.health?.engineVersion)?.health.engineVersion, [rows]);
+
+  if (loading) {
+    return <div className="p-6 font-mono text-xs">LOADING_HEALTH...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="p-6 space-y-4">
+        <div className="font-mono text-xs text-red-700">{error}</div>
+        <button className="border px-3 py-2 font-mono text-xs" onClick={() => void load()}>RETRY</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--color-background,#f4f4f5)] p-6">
+      <div className="max-w-6xl mx-auto space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <h1 className="font-mono text-lg">Credential Health</h1>
+            <p className="font-mono text-xs text-[var(--color-text-muted,#6b7280)]">
+              Last scan: {fmtTime(summary?.lastScanAt)} {engineVersion ? `· Engine v${engineVersion}` : ''}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link href="/" className="border px-3 py-2 font-mono text-xs">VAULT</Link>
+            <button className="border px-3 py-2 font-mono text-xs" onClick={() => void startRescan()}>
+              RESCAN
+            </button>
+          </div>
+        </div>
+
+        {(scanStatus !== 'idle' || scanError) && (
+          <div className="border p-3 font-mono text-xs bg-white">
+            RESCAN_STATUS: {scanStatus.toUpperCase()}
+            {scanError ? ` · ${scanError}` : ''}
+          </div>
+        )}
+
+        {summary && summary.unknown > 0 && (
+          <div className="border border-amber-500/40 bg-amber-50 p-3 font-mono text-xs text-amber-800">
+            Some breach checks are unknown (network/rate-limit/disabled). Retry later or enable HEALTH_BREACH_CHECK.
+          </div>
+        )}
+
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
+          {[
+            ['WEAK', summary?.weak || 0],
+            ['REUSED', summary?.reused || 0],
+            ['BREACHED', summary?.breached || 0],
+            ['UNKNOWN', summary?.unknown || 0],
+            ['SAFE', summary?.safe || 0],
+          ].map(([label, count]) => (
+            <div key={label} className="border bg-white p-3">
+              <div className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)]">{label}</div>
+              <div className="font-mono text-xl">{count}</div>
+            </div>
+          ))}
+        </div>
+
+        <div className="border bg-white overflow-hidden">
+          <table className="w-full text-left font-mono text-xs">
+            <thead className="bg-[var(--color-background,#f4f4f5)]">
+              <tr>
+                <th className="p-2">Credential</th>
+                <th className="p-2">Status</th>
+                <th className="p-2">Evidence</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.length === 0 ? (
+                <tr><td className="p-3" colSpan={3}>No scannable credentials found.</td></tr>
+              ) : rows.map((row) => (
+                <tr key={row.id} className="border-t">
+                  <td className="p-2">
+                    <div>{row.name}</div>
+                    <div className="text-[10px] text-[var(--color-text-muted,#6b7280)]">{row.type} · {row.vaultId}</div>
+                  </td>
+                  <td className={`p-2 uppercase ${STATUS_TONE[row.health.status] || 'text-slate-700'}`}>
+                    {row.health.status.replaceAll('_', ' ')}
+                  </td>
+                  <td className="p-2 text-[10px] text-[var(--color-text-muted,#6b7280)]">
+                    reuse={row.health.evidence.reuseCount}; breaches={row.health.evidence.breachCount ?? 'unknown'};
+                    weak={row.health.evidence.weakReasons.length > 0 ? row.health.evidence.weakReasons.join(',') : 'none'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/icons/ChainIcons.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+interface IconProps {
+  size?: number;
+  className?: string;
+}
+
+export const BaseIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 111 111" fill="none" className={className}>
+    <path d="M54.921 110.034C85.359 110.034 110.034 85.402 110.034 55.017C110.034 24.6319 85.359 0 54.921 0C26.0432 0 2.35281 22.1714 0 50.3923H72.8467V59.6416H0C2.35281 87.8625 26.0432 110.034 54.921 110.034Z" fill="currentColor"/>
+  </svg>
+);
+
+export const EthereumIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 417" className={className}>
+    <path fill="currentColor" d="M127.961 0l-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"/>
+    <path fill="currentColor" opacity="0.6" d="M127.962 0L0 212.32l127.962 75.639V154.158z"/>
+    <path fill="currentColor" d="M127.961 312.187l-1.575 1.92v98.199l1.575 4.6L256 236.587z"/>
+    <path fill="currentColor" opacity="0.6" d="M127.962 416.905v-104.72L0 236.585z"/>
+    <path fill="currentColor" opacity="0.8" d="M127.961 287.958l127.96-75.637-127.96-58.162z"/>
+    <path fill="currentColor" opacity="0.4" d="M0 212.32l127.96 75.638v-133.8z"/>
+  </svg>
+);
+
+export const ArbitrumIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" className={className}>
+    <path fill="currentColor" d="M128 0C57.308 0 0 57.308 0 128s57.308 128 128 128 128-57.308 128-128S198.692 0 128 0zm70.56 186.624l-17.856-49.088L128 217.6l-52.704-80.064-17.856 49.088L128 38.4l70.56 148.224z"/>
+  </svg>
+);
+
+export const OptimismIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" className={className}>
+    <circle cx="128" cy="128" r="128" fill="currentColor"/>
+    <path fill="white" d="M81.5 170.5c-11.3 0-20.2-3.2-26.7-9.5-6.5-6.4-9.8-15.3-9.8-26.8 0-14.5 4.2-26.2 12.5-35.2 8.4-9 19.5-13.5 33.3-13.5 11 0 19.7 3.1 26.2 9.4 6.5 6.2 9.7 14.9 9.7 26 0 14.7-4.2 26.6-12.5 35.7-8.3 9-19.4 13.5-33.3 13.5h.6v.4zm3.8-18c7.4 0 13.3-3.1 17.8-9.2 4.5-6.2 6.7-14.3 6.7-24.4 0-6.8-1.5-12-4.6-15.8-3-3.7-7.3-5.6-12.8-5.6-7.4 0-13.4 3.1-17.8 9.3-4.5 6.2-6.7 14.3-6.7 24.3 0 6.8 1.6 12 4.7 15.7 3.1 3.8 7.3 5.7 12.7 5.7z"/>
+    <path fill="white" d="M137.5 169V87.5h26.3c10.5 0 18.5 2.2 24 6.7 5.5 4.4 8.3 10.8 8.3 19.2 0 8.8-2.9 15.8-8.8 20.8-5.9 5-14.1 7.5-24.6 7.5h-7.8V169h-17.4zm17.4-43.8h5.3c5.2 0 9.1-1.1 11.8-3.4 2.7-2.3 4-5.5 4-9.8 0-3.8-1.2-6.6-3.6-8.6-2.4-2-6-3-10.8-3h-6.7v24.8z"/>
+  </svg>
+);
+
+export const PolygonIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" className={className}>
+    <path fill="currentColor" d="M177.1 94.9c-3.5-2-7.8-2-11.3 0l-26.4 15.6-17.9 10.2-26.4 15.6c-3.5 2-7.8 2-11.3 0l-20.7-12.2c-3.5-2-5.7-5.8-5.7-9.8V91.8c0-3.9 2.1-7.7 5.7-9.8l20.5-11.9c3.5-2 7.8-2 11.3 0l20.5 11.9c3.5 2 5.7 5.8 5.7 9.8v15.6l17.9-10.4V81.1c0-3.9-2.1-7.7-5.7-9.8L95.7 47.8c-3.5-2-7.8-2-11.3 0L45.2 71.4c-3.6 2.1-5.7 5.9-5.7 9.8v47.1c0 3.9 2.1 7.7 5.7 9.8l38.8 22.5c3.5 2 7.8 2 11.3 0l26.4-15.4 17.9-10.4 26.4-15.4c3.5-2 7.8-2 11.3 0l20.5 11.9c3.5 2 5.7 5.8 5.7 9.8v22.5c0 3.9-2.1 7.7-5.7 9.8l-20.4 12c-3.5 2-7.8 2-11.3 0l-20.5-11.9c-3.5-2-5.7-5.8-5.7-9.8v-15.4l-17.9 10.4v15.8c0 3.9 2.1 7.7 5.7 9.8l38.8 22.5c3.5 2 7.8 2 11.3 0l38.8-22.5c3.5-2 5.7-5.8 5.7-9.8v-47.3c0-3.9-2.1-7.7-5.7-9.8l-39-22.3z"/>
+  </svg>
+);
+
+export const SolanaIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 397 311" className={className}>
+    <path fill="currentColor" d="M64.6 237.9c2.4-2.4 5.7-3.8 9.2-3.8h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1l62.7-62.7z"/>
+    <path fill="currentColor" d="M64.6 3.8C67.1 1.4 70.4 0 73.8 0h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1L64.6 3.8z"/>
+    <path fill="currentColor" d="M333.1 120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8 0-8.7 7-4.6 11.1l62.7 62.7c2.4 2.4 5.7 3.8 9.2 3.8h317.4c5.8 0 8.7-7 4.6-11.1l-62.7-62.7z"/>
+  </svg>
+);
+
+export const DefaultChainIcon: React.FC<IconProps> = ({ size = 16, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+    <path d="M2 12h20"/>
+  </svg>
+);
+
+export const getChainIcon = (chain: string): React.FC<IconProps> => {
+  const icons: Record<string, React.FC<IconProps>> = {
+    base: BaseIcon,
+    ethereum: EthereumIcon,
+    arbitrum: ArbitrumIcon,
+    optimism: OptimismIcon,
+    polygon: PolygonIcon,
+    solana: SolanaIcon,
+    'solana-devnet': SolanaIcon,
+  };
+  return icons[chain.toLowerCase()] || DefaultChainIcon;
+};

package/src/components/layout/AppStoreDrawer.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import React, { useEffect, useState, useMemo } from 'react';
+import { Box, Plus, Loader2, Shield, Check, Download } from 'lucide-react';
+import { Drawer, Button, Popover, TextInput } from '@/components/design-system';
+import { APP_TYPES, type AppDefinition } from '@/lib/app-registry';
+import type { AppManifest } from '@/lib/app-loader';
+import { api, Api } from '@/lib/api';
+
+interface AppStoreDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAddApp: (appType: string, config?: Record<string, unknown>) => void;
+}
+
+const CATEGORIES = [
+  { id: 'all', label: 'ALL' },
+  { id: 'builtin', label: 'BUILT-IN' },
+  { id: 'installed', label: 'INSTALLED' },
+];
+
+export function AppStoreDrawer({ isOpen, onClose, onAddApp }: AppStoreDrawerProps) {
+  const [manifests, setManifests] = useState<AppManifest[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [activeCategory, setActiveCategory] = useState('all');
+
+  // Install from URL state
+  const [installSource, setInstallSource] = useState('');
+  const [installing, setInstalling] = useState(false);
+  const [installError, setInstallError] = useState<string | null>(null);
+  const [installSuccess, setInstallSuccess] = useState<string | null>(null);
+
+  // Approval popover state
+  const [approvalApp, setApprovalApp] = useState<AppManifest | null>(null);
+  const [approvalAnchor, setApprovalAnchor] = useState<HTMLElement | null>(null);
+  const [approving, setApproving] = useState(false);
+  const [approvalError, setApprovalError] = useState<string | null>(null);
+
+  // Fetch third-party app manifests when drawer opens
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setLoading(true);
+    api.get<{ success: boolean; manifests: AppManifest[] }>(Api.Workspace, '/apps/manifests')
+      .then(data => {
+        if (data.success) setManifests(data.manifests);
+      })
+      .catch(err => console.error('Failed to load app manifests:', err))
+      .finally(() => setLoading(false));
+  }, [isOpen]);
+
+  // Close approval popover when drawer closes
+  useEffect(() => {
+    if (!isOpen) {
+      setApprovalApp(null);
+      setApprovalAnchor(null);
+    }
+  }, [isOpen]);
+
+  const refreshManifests = () => {
+    api.get<{ success: boolean; manifests: AppManifest[] }>(Api.Workspace, '/apps/manifests')
+      .then(data => {
+        if (data.success) setManifests(data.manifests);
+      })
+      .catch(() => {});
+  };
+
+  const handleInstall = async () => {
+    if (!installSource.trim()) return;
+    setInstalling(true);
+    setInstallError(null);
+    setInstallSuccess(null);
+    try {
+      const result = await api.post<{ success: boolean; error?: string; app?: { id: string; name: string } }>(
+        Api.Workspace, '/apps/install', { source: installSource.trim() }
+      );
+      if (!result.success) {
+        setInstallError(result.error || 'Install failed');
+        return;
+      }
+      setInstallSuccess(`Installed "${result.app?.name || result.app?.id}"`);
+      setInstallSource('');
+      refreshManifests();
+    } catch (err) {
+      setInstallError((err as Error).message);
+    } finally {
+      setInstalling(false);
+    }
+  };
+
+  const handleApprove = async () => {
+    if (!approvalApp) return;
+    setApproving(true);
+    setApprovalError(null);
+    try {
+      const result = await api.post<{ success: boolean; error?: string }>(
+        Api.Wallet, `/apps/${approvalApp.id}/approve`
+      );
+      if (!result.success) {
+        setApprovalError(result.error || 'Approval failed');
+        return;
+      }
+      const appId = approvalApp.id;
+      const appName = approvalApp.name;
+      setApprovalApp(null);
+      setApprovalAnchor(null);
+      onAddApp(`installed:${appId}`, { appPath: appId, appName });
+    } catch (err) {
+      setApprovalError((err as Error).message);
+    } finally {
+      setApproving(false);
+    }
+  };
+
+  // Built-in apps as store cards
+  const builtinCards = useMemo(() => {
+    return Object.entries(APP_TYPES).map(([key, def]: [string, AppDefinition]) => ({
+      id: key,
+      name: def.title,
+      icon: def.icon,
+      description: def.description || `Built-in ${def.title.toLowerCase()} app`,
+      category: 'builtin' as const,
+      color: def.color,
+      permissions: [] as string[],
+      manifest: null as AppManifest | null,
+      onAdd: () => onAddApp(key),
+    }));
+  }, [onAddApp]);
+
+  // Installed (third-party) app cards
+  const installedCards = useMemo(() => {
+    return manifests.map(m => ({
+      id: `installed:${m.id}`,
+      name: m.name,
+      icon: Box,
+      description: m.description || `Installed app`,
+      category: 'installed' as const,
+      color: 'gray' as const,
+      permissions: Array.isArray(m.permissions) ? m.permissions : [],
+      manifest: m as AppManifest | null,
+      onAdd: () => onAddApp(`installed:${m.id}`, { appPath: m.id, appName: m.name }),
+    }));
+  }, [manifests, onAddApp]);
+
+  const allCards = useMemo(() => {
+    if (activeCategory === 'builtin') return builtinCards;
+    if (activeCategory === 'installed') return installedCards;
+    return [...builtinCards, ...installedCards];
+  }, [activeCategory, builtinCards, installedCards]);
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onClose={onClose}
+      title="APP STORE"
+      subtitle="Add apps to workspace"
+    >
+      <div className="space-y-4">
+        {/* Category Filters */}
+        <div className="flex gap-1">
+          {CATEGORIES.map(cat => (
+            <button
+              key={cat.id}
+              onClick={() => setActiveCategory(cat.id)}
+              className={`px-2.5 py-1 font-mono text-[9px] tracking-widest border transition-colors ${
+                activeCategory === cat.id
+                  ? 'bg-[var(--color-text,#0a0a0a)] text-[var(--color-accent,#ccff00)] border-[var(--color-text,#0a0a0a)]'
+                  : 'bg-[var(--color-surface,#fff)] text-[var(--color-text-muted,#6b7280)] border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-text,#0a0a0a)]'
+              }`}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Install from URL */}
+        {(activeCategory === 'all' || activeCategory === 'installed') && (
+          <div className="p-2.5 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#fff)]">
+            <div className="font-mono text-[8px] text-[var(--color-text-muted,#6b7280)] mb-1.5 tracking-wider">
+              INSTALL FROM URL
+            </div>
+            <div className="flex gap-1.5">
+              <div className="flex-1">
+                <TextInput
+                  value={installSource}
+                  onChange={(e) => setInstallSource(e.target.value)}
+                  placeholder="github.com/user/app or URL"
+                  compact
+                  onKeyDown={(e: React.KeyboardEvent) => {
+                    if (e.key === 'Enter') handleInstall();
+                  }}
+                  disabled={installing}
+                />
+              </div>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={handleInstall}
+                loading={installing}
+                disabled={installing || !installSource.trim()}
+                icon={<Download size={10} />}
+              >
+                INSTALL
+              </Button>
+            </div>
+            {installError && (
+              <div className="font-mono text-[8px] text-[var(--color-warning,#ff4d00)] mt-1.5">
+                {installError}
+              </div>
+            )}
+            {installSuccess && (
+              <div className="font-mono text-[8px] text-[var(--color-success,#22c55e)] mt-1.5">
+                {installSuccess}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Loading */}
+        {loading && (
+          <div className="py-8 flex items-center justify-center">
+            <Loader2 size={16} className="animate-spin text-[var(--color-text-muted,#6b7280)]" />
+          </div>
+        )}
+
+        {/* App Grid */}
+        {!loading && allCards.length === 0 && (
+          <div className="py-8 text-center border border-dashed border-[var(--color-border,#d4d4d8)]">
+            <Box size={20} className="mx-auto mb-2 text-[var(--color-text-faint,#9ca3af)]" />
+            <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)]">
+              {activeCategory === 'installed'
+                ? 'No apps installed. Drop app folders into apps/'
+                : 'No apps available'}
+            </div>
+          </div>
+        )}
+
+        {!loading && (
+          <div className="space-y-2">
+            {allCards.map(card => {
+              const IconComponent = card.icon;
+              const needsApproval = card.permissions.length > 0;
+
+              return (
+                <div
+                  key={card.id}
+                  className="p-3 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#fff)] hover:border-[var(--color-border-focus,#0a0a0a)] transition-colors relative"
+                >
+                  {/* Corner accents */}
+                  <div className="absolute top-1 left-1 w-1.5 h-1.5 border-l border-t border-[var(--color-border-focus,#0a0a0a)] opacity-30" />
+                  <div className="absolute top-1 right-1 w-1.5 h-1.5 border-r border-t border-[var(--color-border-focus,#0a0a0a)] opacity-30" />
+
+                  <div className="flex items-start gap-3">
+                    <div className="w-8 h-8 bg-[var(--color-background-alt,#f4f4f5)] flex items-center justify-center shrink-0">
+                      <IconComponent size={14} className="text-[var(--color-text-muted,#6b7280)]" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-[10px] font-bold text-[var(--color-text,#0a0a0a)]">
+                          {card.name}
+                        </span>
+                        <span className={`font-mono text-[7px] px-1 py-0.5 ${
+                          card.category === 'installed'
+                            ? 'bg-[var(--color-accent,#ccff00)]/20 text-[var(--color-accent,#ccff00)]'
+                            : 'bg-[var(--color-info,#0047ff)]/10 text-[var(--color-info,#0047ff)]'
+                        }`}>
+                          {card.category === 'installed' ? 'PLUGIN' : 'BUILT-IN'}
+                        </span>
+                      </div>
+                      <div className="font-mono text-[8px] text-[var(--color-text-muted,#6b7280)] mt-0.5 leading-relaxed">
+                        {card.description}
+                      </div>
+                      {needsApproval && (
+                        <div className="flex items-center gap-1 mt-1">
+                          <Shield size={8} className="text-[var(--color-warning,#ff4d00)]" />
+                          <span className="font-mono text-[7px] text-[var(--color-warning,#ff4d00)]">
+                            {card.permissions.length} PERMISSION{card.permissions.length > 1 ? 'S' : ''}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <Button
+                      variant={needsApproval ? 'secondary' : 'ghost'}
+                      size="sm"
+                      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                        if (needsApproval && card.manifest) {
+                          setApprovalApp(card.manifest);
+                          setApprovalAnchor(e.currentTarget);
+                          setApprovalError(null);
+                        } else {
+                          card.onAdd();
+                        }
+                      }}
+                      icon={needsApproval ? <Shield size={10} /> : <Plus size={10} />}
+                    >
+                      {needsApproval ? 'APPROVE' : 'ADD'}
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Approval Popover */}
+        <Popover
+          isOpen={!!approvalApp}
+          onClose={() => { setApprovalApp(null); setApprovalAnchor(null); }}
+          title="APP PERMISSIONS"
+          anchorEl={approvalAnchor}
+          anchor="right"
+        >
+          {approvalApp && (
+            <div className="space-y-3 min-w-[220px]">
+              <div>
+                <div className="font-mono text-[10px] font-bold text-[var(--color-text,#0a0a0a)]">
+                  {approvalApp.name}
+                </div>
+                <div className="font-mono text-[8px] text-[var(--color-text-muted,#6b7280)] mt-0.5">
+                  This app requests the following permissions:
+                </div>
+              </div>
+
+              <div className="space-y-1">
+                {(Array.isArray(approvalApp.permissions) ? approvalApp.permissions : []).map(perm => (
+                  <div
+                    key={perm}
+                    className="flex items-center gap-1.5 px-2 py-1.5 bg-[var(--color-background-alt,#f4f4f5)]"
+                  >
+                    <Shield size={9} className="text-[var(--color-warning,#ff4d00)] shrink-0" />
+                    <span className="font-mono text-[9px] text-[var(--color-text,#0a0a0a)]">{perm}</span>
+                  </div>
+                ))}
+              </div>
+
+              {approvalError && (
+                <div className="font-mono text-[8px] text-[var(--color-warning,#ff4d00)] px-1">
+                  {approvalError}
+                </div>
+              )}
+
+              <div className="flex gap-2 pt-1">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={handleApprove}
+                  loading={approving}
+                  disabled={approving}
+                  icon={<Check size={10} />}
+                  className="flex-1"
+                >
+                  APPROVE
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => { setApprovalApp(null); setApprovalAnchor(null); }}
+                  disabled={approving}
+                >
+                  CANCEL
+                </Button>
+              </div>
+            </div>
+          )}
+        </Popover>
+      </div>
+    </Drawer>
+  );
+}

package/src/components/layout/ContentArea.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+
+interface ContentAreaProps {
+  children: React.ReactNode;
+}
+
+export const ContentArea: React.FC<ContentAreaProps> = ({ children }) => {
+  return (
+    <div className="flex-1 bg-[#f4f4f5] overflow-y-auto relative">
+      {/* Subtle Grid Pattern */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e5e5_1px,transparent_1px),linear-gradient(to_bottom,#e5e5e5_1px,transparent_1px)] bg-[size:3rem_3rem] opacity-30 pointer-events-none" />
+
+      {/* Content */}
+      <div className="relative z-10 p-6">
+        {children}
+      </div>
+    </div>
+  );
+};