Testcraft Studio frontend 42: src/ui.jsx

import React, { useEffect, useRef, useState } from 'react';
import Icon from './Icon.jsx';
import { useStudio, eligibleDocuments } from './store.jsx';
import { openOriginal, stageFile } from './files.js';

export const tones = { 'Approved': 'green', 'Ready': 'green', 'Reviewed locally': 'green', 'Ready for review': 'green', 'Accepted': 'green', 'Ready to generate': 'green', 'Needs clarification': 'amber', 'Pending review': 'amber', 'Submitted': 'blue', 'Staged': 'blue', 'Draft': 'neutral', 'Rejected': 'red', 'Revision requested': 'amber', 'PROVISIONAL': 'amber', 'Completed': 'green', 'Interrupted': 'amber', 'Cancelled': 'neutral' };
export function Badge({ children, tone, dot = true }) { return <span className={`badge badge-${tone || tones[children] || 'neutral'}`}>{dot && <span className="status-dot"/>}{children}</span>; }
export function Button({ children, icon, variant = 'secondary', className = '', ...props }) { return <button type="button" className={`button button-${variant} ${className}`} {...props}>{icon && <Icon name={icon} size={16}/>} {children}</button>; }
export function Heading({ eyebrow, title, description, children }) { const { state } = useStudio(); return <div className="page-heading"><div><div className="eyebrow">{eyebrow || `${state.session.team} TEAM`}</div><h1>{title}</h1>{description && <p>{description}</p>}</div>{children}</div>; }
export function Empty({ title = 'Nothing here yet', description, action }) { return <div className="empty-state"><span className="soft-icon soft-purple"><Icon name="folder" size={22}/></span><h3>{title}</h3><p>{description}</p>{action}</div>; }
export function Field({ label, children, hint }) { return <label className="form-field"><span>{label}</span>{children}{hint && <small>{hint}</small>}</label>; }
export function Search({ value, onChange, placeholder = 'Search…' }) { return <label className="search-field"><Icon name="search" size={17}/><input value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} aria-label={placeholder}/></label>; }
export function Tabs({ value, onChange, items, label = 'Sections' }) { return <div className="page-tabs" role="tablist" aria-label={label}>{items.map(item => <button key={item} role="tab" aria-selected={value === item} onClick={() => onChange(item)} className={value === item ? 'active' : ''}>{item}</button>)}</div>; }
export function Modal({ title, children, close, wide = false }) {
  const ref = useRef(null), callback = useRef(close); callback.current = close;
  useEffect(() => {
    const previous = document.activeElement, oldOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    ref.current?.querySelector('button, input, textarea, select, [tabindex="0"]')?.focus();
    const keys = e => {
      if (e.key === 'Escape') callback.current();
      if (e.key !== 'Tab') return;
      const items = [...ref.current.querySelectorAll('button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), [tabindex="0"]')];
      if (e.shiftKey && document.activeElement === items[0]) { e.preventDefault(); items.at(-1)?.focus(); }
      if (!e.shiftKey && document.activeElement === items.at(-1)) { e.preventDefault(); items[0]?.focus(); }
    };
    document.addEventListener('keydown', keys);
    return () => { document.body.style.overflow = oldOverflow; document.removeEventListener('keydown', keys); previous?.focus?.(); };
  }, []);
  return <div className="modal-backdrop" onMouseDown={e => e.target === e.currentTarget && close()}><div ref={ref} className={`modal ${wide ? 'modal-wide' : ''}`} role="dialog" aria-modal="true" aria-labelledby="modal-title"><div className="modal-heading"><div><span className="eyebrow">TESTCRAFT STUDIO</span><h2 id="modal-title">{title}</h2></div><button className="icon-button" onClick={close} aria-label="Close dialog"><Icon name="close"/></button></div>{children}</div></div>;
}
export function Note({ children, tone = 'neutral' }) { return <div className={`modal-note note-${tone}`}><Icon name={tone === 'amber' ? 'alert' : 'info'} size={16}/><span>{children}</span></div>; }
export function Pagination({ count, page, onChange, size = 6 }) { const total = Math.max(1, Math.ceil(count / size)); return <div className="table-footer"><span>{count ? `${(page - 1) * size + 1}–${Math.min(page * size, count)} of ${count}` : '0 records'}</span><div className="pagination"><button disabled={page <= 1} onClick={() => onChange(page - 1)} aria-label="Previous page"><Icon name="chevron" size={13} style={{ transform: 'rotate(180deg)' }}/></button><span>{page} / {total}</span><button disabled={page >= total} onClick={() => onChange(page + 1)} aria-label="Next page"><Icon name="chevron" size={13}/></button></div></div>; }
export function ContextBar({ navigate }) {
  const { state, workspace: w } = useStudio();
  if (!w) return null;
  const b = state.baselines.find(b => b.id === w.baselineId);
  return <div className="version-context"><div className="context-label"><Icon name="layers" size={16}/>Selected knowledge</div><button className="version-chip" onClick={() => navigate('versions')}><Icon name="book" size={14}/>{b?.ref || 'No baseline'}{b && <span>v{b.version}</span>}</button>{w.crIds.map(id => { const cr = state.crs.find(c => c.id === id); return <React.Fragment key={id}><span className="context-plus">+</span><span className="version-chip cr-chip">{cr?.ref}<span>r{cr?.revision}</span></span></React.Fragment>; })}<span className="context-divider"/><span className="context-contract"><Icon name="lock" size={13}/>{w.ref} · Context {w.version}</span><button className="text-button context-change" onClick={() => navigate('versions')}>Change selection <Icon name="chevron" size={13}/></button></div>;
}
export function WorkspaceRequired({ navigate }) { return <Empty title="Choose a workspace" description="Create or open a workspace to use its selected knowledge context." action={<Button variant="primary" icon="folder" onClick={() => navigate('workspaces')}>Open workspaces</Button>}/>; }
export function SourceDialog({ sourceId, citation, close }) {
  const { state, workspace, notify } = useStudio();
  const current = state.documents.find(d => d.id === sourceId);
  const accessible = current && (current.team === state.session.team || eligibleDocuments(state, workspace).some(d => d.id === sourceId));
  const source = citation?.id === sourceId ? { ...current, ...citation } : current;
  const changed = current && citation && (String(current.revision) !== String(citation.revision) || (citation.checksum && citation.checksum !== current.checksum));
  if (!accessible) return <Modal title="Source unavailable" close={close}><Note>The source is not available in your current team and workspace context.</Note></Modal>;
  return <Modal title="Source evidence" close={close} wide><div className="source-heading"><span className="table-icon soft-purple"><Icon name="file" size={22}/></span><div><h3>{source.name}</h3><p>Revision {source.revision} · {source.locator || 'Original document'} · {source.team}</p></div><Badge tone="purple">{citation ? 'Cited revision' : 'Reference document'}</Badge></div>{changed && <Note>The current document has changed. This is the snapshot cited in the conversation; the original download belongs to a different revision.</Note>}{citation?.quote && <blockquote className="chat-cited-quote">{citation.quote}</blockquote>}<div className="source-excerpt"><div className="eyebrow">{source.locator || 'SOURCE PREVIEW'}</div><pre>{source.excerpt || 'PDF and DOCX extraction will be supplied by the backend. Download the original file to inspect it locally.'}</pre></div>{source.checksum && <p className="checksum">SHA-256: {source.checksum}</p>}<div className="modal-actions"><Button onClick={close}>Close</Button>{!source.synthetic && !changed && <Button icon="external" onClick={() => openOriginal(current).catch(e => notify(e.message))}>Download original</Button>}</div></Modal>;
}
export function UploadBox({ scope, onStaged, label = 'Drop your documents here' }) {
  const [busy, setBusy] = useState(false), [error, setError] = useState('');
  async function stage(files) {
    if (busy) return; setBusy(true); setError('');
    const results = await Promise.allSettled([...files].map(f => stageFile(f, scope)));
    const documents = results.filter(r => r.status === 'fulfilled').map(r => r.value);
    const errors = results.filter(r => r.status === 'rejected').map(r => r.reason.message);
    if (documents.length) onStaged(documents);
    setError(errors.join(' ')); setBusy(false);
  }
  return <><label className={`upload-zone ${busy ? 'upload-busy' : ''}`} onDragOver={e => e.preventDefault()} onDrop={e => { e.preventDefault(); stage(e.dataTransfer.files); }}><span className="upload-icon"><Icon name="upload" size={25}/></span><strong>{busy ? 'Adding your documents…' : label}</strong><span>or <em>browse files</em></span><small>PDF, DOCX, TXT, Markdown, SQL · Up to 50 MB each</small><input type="file" multiple disabled={busy} accept=".pdf,.docx,.txt,.md,.sql" onChange={e => { stage(e.target.files); e.target.value = ''; }} aria-label="Choose evidence documents"/></label>{error && <p className="form-error" role="alert">{error}</p>}</>;
}