Add automated quality checks

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: Quality checks
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  quality:
+    name: Lint, type check, tests, and build
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Type check
+        run: pnpm check
+
+      - name: Run deterministic tests
+        env:
+          DEV_DESK_CHAT_HISTORY_METADATA_ENABLED: 'true'
+        run: pnpm exec tsx --test $(find server app -name '*.test.ts' ! -name 'groq.secret.test.ts' -print)
+
+      - name: Build production app
+        run: pnpm build

app/components/AuthControls.tsx

@@ -19,22 +19,23 @@
     if (!configured) return;
     const supabase = createSupabaseBrowserClient();
     void supabase.auth.getUser().then(({ data }) => { setSessionEmail(data.user?.email ?? undefined); setSessionUserId(data.user?.id); setAuthResolved(true); });
-    const { data: listener } = supabase.auth.onAuthStateChange((_event, nextSession) => { setSessionEmail(nextSession?.user?.email ?? undefined); setSessionUserId(nextSession?.user?.id); setAuthResolved(true); });
+    const { data: listener } = supabase.auth.onAuthStateChange((_event, nextSession) => { setSessionEmail(nextSession?.user?.email ?? undefined); setSessionUserId(nextSession?.user?.id); setAuthResolved(true); if (!nextSession) { setGithubState('disconnected'); setGithubLogin(''); setRepos([]); setReposOpen(false); } });
     return () => listener.subscription.unsubscribe();
   }, [configured]);
 
   useEffect(() => { if (authResolved) onAuthUserChange?.(sessionUserId); }, [authResolved, onAuthUserChange, sessionUserId]);
 
   async function requestRepos(openPanel: boolean) {
+    setGithubState('checking');
     const response = await fetch('/api/github/repos'); const payload = await response.json();
     if (!response.ok) throw new Error(payload.error ?? 'Could not load repositories.');
     setRepos(payload.repositories ?? []); setGithubState(payload.connected ? 'connected' : 'disconnected'); setGithubLogin(payload.login ?? '');
     if (openPanel) setReposOpen(true);
   }
 
   useEffect(() => {
-    if (!sessionEmail) { setGithubState('disconnected'); setGithubLogin(''); setRepos([]); return; }
-    let active = true; setGithubState('checking'); void requestRepos(false).catch(() => { if (active) setGithubState('disconnected'); });
+    if (!sessionEmail) return;
+    let active = true; window.queueMicrotask(() => { void requestRepos(false).catch(() => { if (active) setGithubState('disconnected'); }); });
     return () => { active = false; };
   }, [sessionEmail]);
 
@@ -48,7 +49,7 @@
 
   async function logout(openSignIn = false) { onLogout?.(); const supabase = createSupabaseBrowserClient(); await supabase.auth.signOut(); setSessionEmail(undefined); setSessionUserId(undefined); setRepos([]); setGithubLogin(''); setReposOpen(false); setMenuOpen(false); setSettingsOpen(false); setOpen(openSignIn); }
   async function changePassword() { if (newPassword.length < 8) return setError('Password must contain at least 8 characters.'); if (newPassword !== confirmPassword) return setError('Passwords do not match.'); setLoading(true); setError(''); setNotice(''); const { error: updateError } = await createSupabaseBrowserClient().auth.updateUser({ password: newPassword }); if (updateError) setError(updateError.message); else { setNotice('Password changed successfully.'); setNewPassword(''); setConfirmPassword(''); } setLoading(false); }
   function connectGithub() { window.location.href = '/api/github/start'; }
   async function loadRepos() { setLoading(true); setError(''); try { await requestRepos(true); } catch (issue) { setError(issue instanceof Error ? issue.message : 'Could not load repositories.'); setGithubState('disconnected'); } finally { setLoading(false); } }
   function selectRepo(repo: GitHubRepo) { onRepositorySelected?.(repo); setReposOpen(false); }
   function openHistory() { setMenuOpen(false); onOpenHistory?.(); }

app/components/ComposerMediaPortal.tsx

@@ -6,7 +6,7 @@
 import './ComposerMediaPortal.css';
 
 export function ComposerMediaPortal() {
-  const [target, setTarget] = useState<HTMLElement | null>(null);
+  const [target] = useState<HTMLElement | null>(() => typeof document === 'undefined' ? null : document.createElement('div'));
   const [open, setOpen] = useState(false);
   const [imagePanel, setImagePanel] = useState(false);
   const [imagePrompt, setImagePrompt] = useState('');
@@ -18,15 +18,16 @@
   const [imageStatus, setImageStatus] = useState('');
 
   useEffect(() => {
+    if (!target) return;
     const tools = document.querySelector<HTMLElement>('.composer-tools');
     const send = tools?.querySelector<HTMLElement>('.send-button');
     if (!tools || !send) return;
-    const host = document.createElement('div');
-    host.className = 'composer-media-portal-host';
-    tools.insertBefore(host, send);
-    setTarget(host);
-    return () => { host.remove(); setTarget(null); };
-  }, []);
+    // This DOM node is intentionally prepared for an external portal host.
+    // eslint-disable-next-line react-hooks/immutability
+    target.className = 'composer-media-portal-host';
+    tools.insertBefore(target, send);
+    return () => { target.remove(); };
+  }, [target]);
 
 
   async function generateImage(event: React.FormEvent) {
@@ -48,5 +49,5 @@
   }
 
   if (!target) return null;
   return createPortal(<div className="composer-media-menu"><button className={open ? 'composer-plus-button active' : 'composer-plus-button'} onClick={() => setOpen((value) => !value)} aria-label="Open media tools" aria-expanded={open}>{open ? <X size={16} /> : <Plus size={17} />}</button>{open && <div className="composer-media-popover"><div className="composer-media-head"><span><Sparkles size={13} /> CREATE & VOICE</span><button onClick={() => setOpen(false)} aria-label="Close media tools"><X size={13} /></button></div><button className="media-action" onClick={() => { window.location.href = '/voice-call'; }}><PhoneCall size={16} /><span><b>Voice call</b><small>Open full-screen AI voice conversation</small></span></button><button className="media-action" onClick={() => { setImagePanel((value) => !value); setImageError(''); }}><ImageIcon size={16} /><span><b>Image generation</b><small>Create an image from a prompt</small></span></button>{imagePanel && <form className="image-generation-form" onSubmit={(event) => void generateImage(event)}><textarea value={imagePrompt} onChange={(event) => setImagePrompt(event.target.value)} placeholder="Describe the image you want to create…" rows={3} maxLength={1000} /><div><select value={aspectRatio} onChange={(event) => setAspectRatio(event.target.value)} aria-label="Image aspect ratio"><option value="1:1">Square</option><option value="4:3">Landscape</option><option value="3:4">Portrait</option><option value="16:9">Wide</option><option value="9:16">Story</option></select><button disabled={imageLoading}>{imageLoading ? <><LoaderCircle size={13} className="spin" /> Creating…</> : <><ImageIcon size={13} /> Generate</>}</button></div>{(imageLoading || imageStatus) && <div className={imageError ? 'image-progress is-error' : imageDataUrl ? 'image-progress is-ready' : 'image-progress'} aria-live="polite"><div><span>{imageLoading && <LoaderCircle size={12} className="spin" />}{imageStatus || 'Preparing image generation…'}</span><b>{imageProgress}%</b></div><div className="image-progress-track" role="progressbar" aria-label="Image generation progress" aria-valuemin={0} aria-valuemax={100} aria-valuenow={imageProgress}><i style={{ width: `${imageProgress}%` }} /></div></div>}{imageError && <p className="media-error">{imageError}</p>}{imageDataUrl && <figure className="generated-image-result"><img src={imageDataUrl} alt={imagePrompt || 'AI generated image'} onLoad={() => { if (imageStatus.includes('loading through')) setImageStatus('Image ready — loaded through the backup free delivery path.'); }} onError={() => { setImageDataUrl(''); setImageProgress(0); setImageStatus('Backup image delivery could not load — please retry.'); setImageError('The backup free image delivery did not load. Please retry in a moment.'); }} /><figcaption><Volume2 size={12} /> Generated securely on the server <a href={imageDataUrl} download="devdesk-ai-image.png">Download</a></figcaption></figure>}</form>}</div>}</div>, target);
 }

app/components/ProjectHub.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ChangeEvent, useEffect, useState } from 'react';
 import { Archive, CheckCircle2, FileCode2, FolderGit2, GitBranch, LoaderCircle, Save, UploadCloud, X } from 'lucide-react';
 import type { GitHubRepo } from './AuthControls';
 
 export type ImportedProjectRecord = { id: string; name: string; branch: string | null; status: string; source: { fileCount: number; treeTruncated?: boolean; skippedCount: number }; files: Array<{ path: string; language: string; byteSize: number }> };
@@ -10,11 +10,10 @@
 type Tab = 'create' | 'github' | 'zip' | 'manage' | 'commit';
 
 export function ProjectHub({ open, initialTab = 'create', onClose, selectedRepo, importedProject, onImported, onRemoved }: Props) {
-  const [tab, setTab] = useState<Tab>('create'); const [repos, setRepos] = useState<GitHubRepo[]>([]); const [projectName, setProjectName] = useState(''); const [archive, setArchive] = useState<File>();
+  const [tab, setTab] = useState<Tab>(initialTab); const [repos, setRepos] = useState<GitHubRepo[]>([]); const [projectName, setProjectName] = useState(''); const [archive, setArchive] = useState<File>();
   const [loading, setLoading] = useState(false); const [notice, setNotice] = useState(''); const [error, setError] = useState(''); const [filePath, setFilePath] = useState(''); const [fileContent, setFileContent] = useState(''); const [fileSha, setFileSha] = useState(''); const [commitMessage, setCommitMessage] = useState(''); const [approved, setApproved] = useState(false); const [createNewFile, setCreateNewFile] = useState(false); const [projects, setProjects] = useState<ProjectSummary[]>([]); const [confirmRemovalId, setConfirmRemovalId] = useState<string>();
 
-  useEffect(() => { if (!open) return; setTab(initialTab); setError(''); setNotice(''); }, [open, initialTab]);
   useEffect(() => { if (!open) return; if (tab === 'github') void loadRepos(); if (tab === 'manage') void loadProjects(); }, [open, tab]);
   async function apiJson(url: string, init?: RequestInit) { const response = await fetch(url, init); const payload = await response.json(); if (!response.ok) throw new Error(payload.error ?? 'Request failed.'); return payload; }
   async function loadRepos() { try { const payload = await apiJson('/api/github/repos'); setRepos(payload.repositories ?? []); } catch (issue) { setError(issue instanceof Error ? issue.message : 'Could not load GitHub repositories.'); } }
   async function loadProjects() { setLoading(true); try { const payload = await apiJson('/api/projects'); setProjects(payload.projects ?? []); } catch (issue) { setError(issue instanceof Error ? issue.message : 'Could not load projects.'); } finally { setLoading(false); } }