feat(core,exporters,desktop): end-to-end first demo + HTML export

apps/desktop/package.json

@@ -15,6 +15,7 @@
     "@iarna/toml": "^2.2.5",
     "@open-codesign/artifacts": "workspace:*",
     "@open-codesign/core": "workspace:*",
+    "@open-codesign/exporters": "workspace:*",
     "@open-codesign/providers": "workspace:*",
     "@open-codesign/runtime": "workspace:*",
     "@open-codesign/shared": "workspace:*",

apps/desktop/src/main/exporter-ipc.ts

@@ -0,0 +1,65 @@
+import { type ExporterFormat, exportArtifact } from '@open-codesign/exporters';
+import { CodesignError } from '@open-codesign/shared';
+import { type BrowserWindow, dialog, ipcMain } from 'electron';
+
+const FORMAT_FILTERS: Record<ExporterFormat, Electron.FileFilter[]> = {
+  html: [{ name: 'HTML', extensions: ['html'] }],
+  pdf: [{ name: 'PDF', extensions: ['pdf'] }],
+  pptx: [{ name: 'PowerPoint', extensions: ['pptx'] }],
+  zip: [{ name: 'ZIP archive', extensions: ['zip'] }],
+};
+
+export interface ExportRequest {
+  format: ExporterFormat;
+  htmlContent: string;
+  defaultFilename?: string;
+}
+
+export interface ExportResponse {
+  status: 'saved' | 'cancelled';
+  path?: string;
+  bytes?: number;
+}
+
+function parseRequest(raw: unknown): ExportRequest {
+  if (raw === null || typeof raw !== 'object') {
+    throw new CodesignError('export expects an object payload', 'IPC_BAD_INPUT');
+  }
+  const r = raw as Record<string, unknown>;
+  const format = r['format'];
+  const html = r['htmlContent'];
+  const defaultFilename = r['defaultFilename'];
+  if (format !== 'html' && format !== 'pdf' && format !== 'pptx' && format !== 'zip') {
+    throw new CodesignError(`Unknown export format: ${String(format)}`, 'EXPORTER_UNKNOWN');
+  }
+  if (typeof html !== 'string' || html.length === 0) {
+    throw new CodesignError('export requires non-empty htmlContent', 'IPC_BAD_INPUT');
+  }
+  const out: ExportRequest = { format, htmlContent: html };
+  if (typeof defaultFilename === 'string' && defaultFilename.length > 0) {
+    out.defaultFilename = defaultFilename;
+  }
+  return out;
+}
+
+export function registerExporterIpc(getWindow: () => BrowserWindow | null): void {
+  ipcMain.handle('codesign:export', async (_evt, raw: unknown): Promise<ExportResponse> => {
+    const req = parseRequest(raw);
+    const win = getWindow();
+    const opts: Electron.SaveDialogOptions = {
+      title: `Export design as ${req.format.toUpperCase()}`,
+      defaultPath: req.defaultFilename ?? `design.${req.format}`,
+      filters: FORMAT_FILTERS[req.format],
+    };
+    const picked = win ? await dialog.showSaveDialog(win, opts) : await dialog.showSaveDialog(opts);
+    if (picked.canceled || !picked.filePath) {
+      return { status: 'cancelled' };
+    }
+
+    // Tier 1: HTML succeeds, others throw EXPORTER_NOT_READY. We deliberately
+    // do NOT swallow the error here — let it propagate so the renderer can
+    // surface it as a toast (PRINCIPLES §10).
+    const result = await exportArtifact(req.format, req.htmlContent, picked.filePath);
+    return { status: 'saved', path: result.path, bytes: result.bytes };
+  });
+}

apps/desktop/src/main/index.ts

@@ -5,7 +5,12 @@ import { detectProviderFromKey } from '@open-codesign/providers';
 import { BRAND, CodesignError, GeneratePayload } from '@open-codesign/shared';
 import { BrowserWindow, app, ipcMain, shell } from 'electron';
 import { autoUpdater } from 'electron-updater';
+<<<<<<< HEAD
 import { getApiKeyForProvider, loadConfigOnBoot, registerOnboardingIpc } from './onboarding-ipc';
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+import { registerExporterIpc } from './exporter-ipc';
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -81,7 +86,12 @@ function setupAutoUpdater(): void {
 void app.whenReady().then(async () => {
   await loadConfigOnBoot();
   registerIpcHandlers();
+<<<<<<< HEAD
   registerOnboardingIpc();
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+  registerExporterIpc(() => mainWindow);
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
   setupAutoUpdater();
   createWindow();
 

apps/desktop/src/preload/index.ts

@@ -6,6 +6,7 @@ import type {
 } from '@open-codesign/shared';
 import { contextBridge, ipcRenderer } from 'electron';
 
+<<<<<<< HEAD
 export interface ValidateKeyResult {
   ok: true;
   modelCount: number;
@@ -16,6 +17,16 @@ export interface ValidateKeyError {
   message: string;
 }
 
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+export type ExportFormat = 'html' | 'pdf' | 'pptx' | 'zip';
+export interface ExportInvokeResponse {
+  status: 'saved' | 'cancelled';
+  path?: string;
+  bytes?: number;
+}
+
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
 const api = {
   detectProvider: (key: string) =>
     ipcRenderer.invoke('codesign:detect-provider', key) as Promise<string | null>,
@@ -25,6 +36,8 @@ const api = {
     model: ModelRef;
     baseUrl?: string;
   }) => ipcRenderer.invoke('codesign:generate', payload),
+  export: (payload: { format: ExportFormat; htmlContent: string; defaultFilename?: string }) =>
+    ipcRenderer.invoke('codesign:export', payload) as Promise<ExportInvokeResponse>,
   checkForUpdates: () => ipcRenderer.invoke('codesign:check-for-updates'),
   downloadUpdate: () => ipcRenderer.invoke('codesign:download-update'),
   installUpdate: () => ipcRenderer.invoke('codesign:install-update'),

apps/desktop/src/renderer/src/App.tsx

@@ -2,8 +2,15 @@ import { buildSrcdoc } from '@open-codesign/runtime';
 import { BUILTIN_DEMOS } from '@open-codesign/templates';
 import { Button } from '@open-codesign/ui';
 import { Send, Sparkles } from 'lucide-react';
+<<<<<<< HEAD
 import { useEffect, useState } from 'react';
 import { Onboarding } from './onboarding';
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+import { useState } from 'react';
+=======
+import { useState } from 'react';
+import { PreviewToolbar } from './components/PreviewToolbar';
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
 import { useCodesignStore } from './store';
 
 export function App() {
@@ -78,7 +85,6 @@ export function App() {
           ) : (
             messages.map((m, i) => (
               <div
-                // biome-ignore lint/suspicious/noArrayIndexKey: tier-1 chat list with no reordering
                 key={`${m.role}-${i}`}
                 className={`px-3 py-2 rounded-[var(--radius-md)] text-sm ${
                   m.role === 'user'
@@ -119,6 +125,7 @@ export function App() {
             BYOK · local-first · multi-model
           </span>
         </header>
+        <PreviewToolbar />
         <div className="flex-1 p-6 overflow-auto">
           {previewHtml ? (
             <iframe

apps/desktop/src/renderer/src/components/PreviewToolbar.tsx

@@ -0,0 +1,95 @@
+import { Download } from 'lucide-react';
+import { type ReactElement, useEffect, useRef, useState } from 'react';
+import type { ExportFormat } from '../../../preload/index';
+import { useCodesignStore } from '../store';
+
+interface ExportItem {
+  format: ExportFormat;
+  label: string;
+  hint?: string;
+  ready: boolean;
+}
+
+const EXPORT_ITEMS: ExportItem[] = [
+  { format: 'html', label: 'HTML', ready: true },
+  { format: 'pdf', label: 'PDF', ready: false, hint: 'Coming in Phase 2' },
+  { format: 'pptx', label: 'PPTX', ready: false, hint: 'Coming in Phase 2' },
+  { format: 'zip', label: 'ZIP bundle', ready: false, hint: 'Coming in Phase 2' },
+];
+
+export function PreviewToolbar(): ReactElement {
+  const previewHtml = useCodesignStore((s) => s.previewHtml);
+  const exportActive = useCodesignStore((s) => s.exportActive);
+  const toastMessage = useCodesignStore((s) => s.toastMessage);
+  const dismissToast = useCodesignStore((s) => s.dismissToast);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onClick(e: MouseEvent): void {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onClick);
+    return () => document.removeEventListener('mousedown', onClick);
+  }, [open]);
+
+  useEffect(() => {
+    if (!toastMessage) return;
+    const t = setTimeout(() => dismissToast(), 4000);
+    return () => clearTimeout(t);
+  }, [toastMessage, dismissToast]);
+
+  const disabled = !previewHtml;
+
+  return (
+    <div className="flex items-center justify-end gap-2 px-5 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]">
+      {toastMessage && (
+        <output className="mr-auto text-xs text-[var(--color-text-secondary)] truncate max-w-[60%]">
+          {toastMessage}
+        </output>
+      )}
+
+      <div className="relative" ref={ref}>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setOpen((v) => !v)}
+          className="inline-flex items-center gap-1.5 h-8 px-3 rounded-[var(--radius-md)] text-sm font-medium border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] disabled:opacity-50 disabled:pointer-events-none transition-colors"
+          aria-haspopup="menu"
+          aria-expanded={open}
+        >
+          <Download className="w-4 h-4" aria-hidden="true" />
+          Export
+        </button>
+
+        {open && (
+          <div
+            role="menu"
+            className="absolute right-0 top-full mt-1 min-w-[180px] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)] py-1 z-10"
+          >
+            {EXPORT_ITEMS.map((item) => (
+              <button
+                key={item.format}
+                type="button"
+                role="menuitem"
+                disabled={!item.ready}
+                title={item.ready ? undefined : item.hint}
+                onClick={() => {
+                  setOpen(false);
+                  void exportActive(item.format);
+                }}
+                className="w-full flex items-center justify-between gap-3 px-3 py-2 text-sm text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] disabled:opacity-50 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+              >
+                <span>{item.label}</span>
+                {!item.ready && (
+                  <span className="text-xs text-[var(--color-text-muted)]">{item.hint}</span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}