dtoro
f1c4566576
Sets up the Socrata project repo with: docs/ — strategy and design documents - idea.md: full product vision - implementation-plan.md: Phase 0 + Phase 1 MVP plan - phase-0-validation.md: 2-week validation experiment strategy - phase-0-plan.md: concrete Phase 0 build plan - phase-0-results.md: Phase 0 gate outcome — GO for MVP - sysml-modeling.md: metamodel + SE discipline + validation rules - socrates.md: agent character, surfaces, modes, prompts, lifecycle - sync.md: bidirectional text↔diagram sync engineering - design-source/: HTML/CSS/JS handoff bundle from Claude Design phase-0/ — validated harness (CLI, no UI, no DB) - LM Studio (local OpenAI-compatible) generation + detection + judge - PlantUML rendering for SysML model visualization - 10-seed corpus (8 working + 2 holdouts) - 5 corpus runs with iteration history in reports/ - Final gate: 10/10 pass, mean 4.32/5, holdouts validated Phase 1 MVP scope and milestones documented in implementation-plan.md.
212 lines
7.4 KiB
HTML
212 lines
7.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Socrata — dual-canvas explorations</title>
|
|
<meta name="viewport" content="width=1480" />
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<link rel="stylesheet" href="theme-manuscript.css" />
|
|
<link rel="stylesheet" href="theme-foundry.css" />
|
|
<link rel="stylesheet" href="theme-atelier.css" />
|
|
|
|
<style>
|
|
body { background: #f0eee9; }
|
|
/* Make each editor artboard fill its DCArtboard frame */
|
|
.artboard-host {
|
|
width: 100%; height: 100%; overflow: hidden;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.04);
|
|
}
|
|
.seed-host { width: 100%; height: 100%; overflow: hidden; }
|
|
|
|
/* Direction caption shown on each artboard above the chrome */
|
|
.aes-caption {
|
|
position: absolute; top: 10px; left: 14px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: rgba(0,0,0,0.55);
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="root"></div>
|
|
|
|
<!-- React + Babel pinned -->
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
|
|
<script src="data.js"></script>
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
|
<script type="text/babel" src="diagram.jsx"></script>
|
|
<script type="text/babel" src="text-canvas.jsx"></script>
|
|
<script type="text/babel" src="socrates.jsx"></script>
|
|
<script type="text/babel" src="editor-shell.jsx"></script>
|
|
<script type="text/babel" src="seed-screen.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
|
"diagramStyle": "softened",
|
|
"density": "compact",
|
|
"markupStyle": "color",
|
|
"presence": "default"
|
|
}/*EDITMODE-END*/;
|
|
|
|
function ThemedEditor({ theme, caption, density, markupStyle, diagramStyle, presence }) {
|
|
return (
|
|
<div className={`artboard-host theme-${theme}`}>
|
|
<div className="aes-caption">{caption}</div>
|
|
<EditorShell
|
|
data={window.SOCRATA_DATA}
|
|
density={density}
|
|
markupStyle={markupStyle}
|
|
diagramStyle={diagramStyle}
|
|
presence={presence}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ThemedSeed({ theme, caption }) {
|
|
return (
|
|
<div className={`seed-host theme-${theme}`}>
|
|
<div className="aes-caption">{caption}</div>
|
|
<SeedScreen />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
|
|
|
|
return (
|
|
<>
|
|
<DesignCanvas>
|
|
<DCSection
|
|
id="editor"
|
|
title="Dual-canvas editor"
|
|
subtitle="Three aesthetic directions for the main workspace. Same data, same components, different soul."
|
|
>
|
|
<DCArtboard id="manuscript" label="A · Manuscript — parchment, serif, ink-blue. Document-first." width={1480} height={920}>
|
|
<ThemedEditor
|
|
theme="manuscript"
|
|
caption="A · Manuscript"
|
|
density={tweaks.density}
|
|
markupStyle={tweaks.markupStyle}
|
|
diagramStyle={tweaks.diagramStyle}
|
|
presence={tweaks.presence}
|
|
/>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="foundry" label="B · Foundry — dark IDE, amber + teal. For PMs who think like engineers." width={1480} height={920}>
|
|
<ThemedEditor
|
|
theme="foundry"
|
|
caption="B · Foundry"
|
|
density={tweaks.density}
|
|
markupStyle={tweaks.markupStyle}
|
|
diagramStyle={tweaks.diagramStyle}
|
|
presence={tweaks.presence}
|
|
/>
|
|
</DCArtboard>
|
|
|
|
<DCArtboard id="atelier" label="C · Atelier — off-white, sage + rust, Fraunces display. Crafted, opinionated." width={1480} height={920}>
|
|
<ThemedEditor
|
|
theme="atelier"
|
|
caption="C · Atelier"
|
|
density={tweaks.density}
|
|
markupStyle={tweaks.markupStyle}
|
|
diagramStyle={tweaks.diagramStyle}
|
|
presence={tweaks.presence}
|
|
/>
|
|
</DCArtboard>
|
|
</DCSection>
|
|
|
|
<DCSection
|
|
id="seed"
|
|
title="Seed idea formation"
|
|
subtitle="Onboarding — Socrates interviews the PM and a seed model emerges in the left rail."
|
|
>
|
|
<DCArtboard id="seed-manuscript" label="A · Manuscript" width={1480} height={920}>
|
|
<ThemedSeed theme="manuscript" caption="A · Manuscript" />
|
|
</DCArtboard>
|
|
<DCArtboard id="seed-foundry" label="B · Foundry" width={1480} height={920}>
|
|
<ThemedSeed theme="foundry" caption="B · Foundry" />
|
|
</DCArtboard>
|
|
<DCArtboard id="seed-atelier" label="C · Atelier" width={1480} height={920}>
|
|
<ThemedSeed theme="atelier" caption="C · Atelier" />
|
|
</DCArtboard>
|
|
</DCSection>
|
|
</DesignCanvas>
|
|
|
|
<TweaksPanel title="Tweaks">
|
|
<TweakSection label="Diagram" />
|
|
<TweakRadio
|
|
label="Block style"
|
|
value={tweaks.diagramStyle}
|
|
onChange={(v) => setTweak('diagramStyle', v)}
|
|
options={[
|
|
{ value: 'softened', label: 'Soft' },
|
|
{ value: 'formal', label: 'Formal' },
|
|
{ value: 'graph', label: 'Graph' },
|
|
]}
|
|
/>
|
|
|
|
<TweakSection label="Density" />
|
|
<TweakRadio
|
|
label="Layout"
|
|
value={tweaks.density}
|
|
onChange={(v) => setTweak('density', v)}
|
|
options={[
|
|
{ value: 'comfortable', label: 'Comfortable' },
|
|
{ value: 'compact', label: 'Compact' },
|
|
]}
|
|
/>
|
|
|
|
<TweakSection label="Markup rendering" />
|
|
<TweakSelect
|
|
label="In-text markup"
|
|
value={tweaks.markupStyle}
|
|
onChange={(v) => setTweak('markupStyle', v)}
|
|
options={[
|
|
{ value: 'pill', label: 'Pill (muted chip)' },
|
|
{ value: 'color', label: 'Color-coded by type' },
|
|
{ value: 'underline', label: 'Underline + glyph' },
|
|
{ value: 'bracket', label: 'Bracket syntax (dimmed)' },
|
|
]}
|
|
/>
|
|
|
|
<TweakSection label="Socrates presence" />
|
|
<TweakRadio
|
|
label="Dock"
|
|
value={tweaks.presence}
|
|
onChange={(v) => setTweak('presence', v)}
|
|
options={[
|
|
{ value: 'subtle', label: 'Subtle' },
|
|
{ value: 'default', label: 'Default' },
|
|
{ value: 'prominent', label: 'Prominent' },
|
|
]}
|
|
/>
|
|
</TweaksPanel>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(<App />);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|