Add draft/published editor workflow with publish, revert, and dirty indicator

src/app/components/SnippetLibrary.module.css

@@ -71,6 +71,13 @@
   gap: var(--space-1);
 }
 
+.nameRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
 .name {
   font-size: 13px;
   font-weight: 500;
@@ -79,6 +86,15 @@
   text-overflow: ellipsis;
 }
 
+/* Unpublished-draft indicator (spec §03D / §02 status). */
+.draftDot {
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
 .date {
   font-size: 11px;
   color: var(--text-secondary);

src/app/components/SnippetLibrary.tsx

@@ -7,6 +7,7 @@
  */
 
 import { useShallow } from 'zustand/react/shallow';
+import { hasUnpublishedChanges } from '@core/snippet';
 import { confirm } from '../stores/ConfirmStore';
 import { useSnippetStore } from '../stores/SnippetStore';
 import styles from './SnippetLibrary.module.css';
@@ -66,7 +67,16 @@ export function SnippetLibrary() {
             onClick={() => selectSnippet(s.id)}
           >
             <div className={styles.itemMain}>
-              <span className={styles.name}>{s.name}</span>
+              <span className={styles.nameRow}>
+                {hasUnpublishedChanges(s) && (
+                  <span
+                    className={styles.draftDot}
+                    title="Has unpublished draft changes"
+                    aria-label="Has unpublished draft changes"
+                  />
+                )}
+                <span className={styles.name}>{s.name}</span>
+              </span>
               <span className={styles.date}>{relativeDate(s.modified)}</span>
             </div>
             <button

src/app/components/SpecEditor.module.css

@@ -1,9 +1,102 @@
 .editorPane {
-  position: relative;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   background: var(--bg);
 }
 
+.toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 40px;
+  padding: 0 var(--space-4);
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+/* Draft / Published segmented toggle. */
+.viewToggle {
+  display: inline-flex;
+  border: var(--border-width) solid var(--border-strong);
+}
+
+.viewOption {
+  appearance: none;
+  border: none;
+  background: var(--bg);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+.viewOption + .viewOption {
+  border-left: var(--border-width) solid var(--border-strong);
+}
+
+.viewOption:hover {
+  background: var(--layer-01);
+  color: var(--text);
+}
+
+.viewActive,
+.viewActive:hover {
+  background: var(--layer-02);
+  color: var(--text);
+}
+
+/* Publish / Revert buttons. */
+.action {
+  appearance: none;
+  height: 28px;
+  padding: 0 var(--space-4);
+  border: var(--border-width) solid var(--border-strong);
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    opacity var(--dur-fast) var(--ease);
+}
+
+.action:hover:not(:disabled) {
+  background: var(--layer-01);
+}
+
+.action:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.publish {
+  border-color: transparent;
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.publish:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.editorWrap {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .editor {
   height: 100%;
   width: 100%;
@@ -21,3 +114,20 @@
   background: var(--bg);
   pointer-events: none;
 }
+
+/* Inline render/parse error surface (spec §03E) — monospaced, distinct. */
+.error {
+  flex: 0 0 auto;
+  max-height: 30%;
+  overflow: auto;
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border-top: var(--border-width) solid var(--support-error);
+  background: var(--layer-01);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--support-error);
+  white-space: pre-wrap;
+  word-break: break-word;
+}

src/app/components/SpecEditor.tsx

@@ -1,13 +1,16 @@
 /**
  * Spec Editor — the center pane (spec §03).
  *
- * M1 scope: a Monaco JSON editor bound to the active snippet's draft. It runs
- * uncontrolled (raw `monaco-editor`, per docs/architecture/08): created once,
- * keystrokes push into the store's `draftText` buffer, and the buffer is pulled
- * back in only when the active snippet *changes* (select/create/delete) — never
- * keystroke-by-keystroke, which would fight the cursor. Schema validation/
- * autocomplete, the draft/published toggle, and the inline error surface arrive
- * in M2.
+ * A Monaco JSON editor bound to the active snippet, running uncontrolled (raw
+ * `monaco-editor`, per docs/architecture/08): created once, keystrokes push into
+ * the store's `draftText` buffer. The buffer is reloaded only when the store
+ * signals a programmatic load (`bufferEpoch`) or the view toggles — never
+ * keystroke-by-keystroke, which would fight the cursor.
+ *
+ * The pane header carries the Draft/Published toggle plus Publish and Revert
+ * (spec §03D). The published view is read-only — it shows the last published
+ * spec for reference; all editing happens on the draft. Render problems surface
+ * inline near the editor (spec §03E), mirroring the preview via PreviewStore.
  */
 
 import { useEffect, useRef } from 'react';
@@ -21,24 +24,106 @@ import 'monaco-editor/esm/vs/language/json/monaco.contribution';
 import '../infrastructure/monaco-env'; // side-effect: wire workers before create
 import { configureVegaLiteJson } from '../infrastructure/monaco-schema';
 import { useAppStore } from '../stores/AppStore';
-import { useSnippetStore } from '../stores/SnippetStore';
+import { confirm } from '../stores/ConfirmStore';
+import { usePreviewStore } from '../stores/PreviewStore';
+import { selectActiveSnippet, selectShownText, useSnippetStore } from '../stores/SnippetStore';
 import styles from './SpecEditor.module.css';
 
 // Register the bundled Vega-Lite schema once: resolves `$schema` locally (no
 // network warning) and powers validation, autocomplete, and hover docs.
 configureVegaLiteJson();
 
+function EditorToolbar() {
+  const activeId = useSnippetStore((s) => s.activeSnippetId);
+  const editorView = useSnippetStore((s) => s.editorView);
+  const setEditorView = useSnippetStore((s) => s.setEditorView);
+  // Are there draft changes to revert? Use the live buffer in the draft view so
+  // the control responds before the auto-save debounce commits (spec §03D).
+  const dirty = useSnippetStore((s) => {
+    const active = selectActiveSnippet(s);
+    if (!active) return false;
+    const draft = s.editorView === 'draft' ? s.draftText : active.draftSpec;
+    return draft !== active.spec;
+  });
+
+  const handlePublish = () => {
+    if (!useSnippetStore.getState().activeSnippetId) return;
+    useSnippetStore.getState().publish();
+    // TODO: success toast "Snippet published" once the toast system lands (M6, spec §03D).
+  };
+
+  const handleRevert = async () => {
+    const ok = await confirm({
+      title: 'Revert draft',
+      message:
+        'Discard all draft changes and restore the last published version? This cannot be undone.',
+      confirmLabel: 'Revert',
+      danger: true,
+    });
+    if (ok) {
+      useSnippetStore.getState().revert();
+      // TODO: success toast "Draft reverted" once the toast system lands (M6, spec §03D).
+    }
+  };
+
+  return (
+    <div className={styles.toolbar}>
+      <div className={styles.viewToggle} role="group" aria-label="Editor view">
+        <button
+          type="button"
+          className={`${styles.viewOption} ${editorView === 'draft' ? styles.viewActive : ''}`}
+          aria-pressed={editorView === 'draft'}
+          onClick={() => setEditorView('draft')}
+        >
+          Draft
+        </button>
+        <button
+          type="button"
+          className={`${styles.viewOption} ${editorView === 'published' ? styles.viewActive : ''}`}
+          aria-pressed={editorView === 'published'}
+          onClick={() => setEditorView('published')}
+        >
+          Published
+        </button>
+      </div>
+
+      <span className={styles.spacer} />
+
+      <button
+        type="button"
+        className={styles.action}
+        onClick={() => void handleRevert()}
+        disabled={activeId === null || !dirty}
+      >
+        Revert
+      </button>
+      <button
+        type="button"
+        className={`${styles.action} ${styles.publish}`}
+        onClick={handlePublish}
+        disabled={activeId === null}
+        title="Publish (⌘/Ctrl+S)"
+      >
+        Publish
+      </button>
+    </div>
+  );
+}
+
 export function SpecEditor() {
   const hostRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const activeId = useSnippetStore((s) => s.activeSnippetId);
+  const editorView = useSnippetStore((s) => s.editorView);
+  const bufferEpoch = useSnippetStore((s) => s.bufferEpoch);
   const uiTheme = useAppStore((s) => s.uiTheme);
+  const error = usePreviewStore((s) => s.error);
 
   // Create the editor once, on mount.
   useEffect(() => {
     if (!hostRef.current) return;
     const editor = monaco.editor.create(hostRef.current, {
-      value: useSnippetStore.getState().draftText,
+      value: selectShownText(useSnippetStore.getState()),
       language: 'json',
       automaticLayout: true,
       minimap: { enabled: false },
@@ -59,8 +144,18 @@ export function SpecEditor() {
     });
     editorRef.current = editor;
 
+    // Keystrokes feed the draft buffer — but only on the editable draft view.
+    // (Programmatic setValue while showing the read-only published spec must not
+    // overwrite the draft.)
     const sub = editor.onDidChangeModelContent(() => {
-      useSnippetStore.getState().updateDraft(editor.getValue());
+      if (useSnippetStore.getState().editorView === 'draft') {
+        useSnippetStore.getState().updateDraft(editor.getValue());
+      }
+    });
+
+    // Cmd/Ctrl+S publishes the current draft (spec §03D → Publish).
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      if (useSnippetStore.getState().activeSnippetId) useSnippetStore.getState().publish();
     });
 
     return () => {
@@ -70,24 +165,32 @@ export function SpecEditor() {
     };
   }, []);
 
-  // Replace the buffer when the active snippet changes (not while typing).
+  // Reload the buffer on a programmatic load (select/create/delete/revert →
+  // bufferEpoch) or a view toggle. Not on keystrokes: typing changes neither dep.
   useEffect(() => {
     const editor = editorRef.current;
     if (!editor) return;
-    const text = useSnippetStore.getState().draftText;
+    const state = useSnippetStore.getState();
+    const text = selectShownText(state);
     if (editor.getValue() !== text) editor.setValue(text);
-    editor.updateOptions({ readOnly: activeId === null });
-  }, [activeId]);
+    editor.updateOptions({
+      readOnly: state.activeSnippetId === null || state.editorView === 'published',
+    });
+  }, [bufferEpoch, editorView, activeId]);
 
-  // Editor theme follows the UI theme (M1: light/dark stock themes).
+  // Editor theme follows the UI theme.
   useEffect(() => {
     monaco.editor.setTheme(uiTheme === 'dark' ? 'vs-dark' : 'vs');
   }, [uiTheme]);
 
   return (
     <div className={styles.editorPane}>
-      {activeId === null && <div className={styles.placeholder}>Select or create a snippet</div>}
-      <div className={styles.editor} ref={hostRef} />
+      <EditorToolbar />
+      <div className={styles.editorWrap}>
+        {activeId === null && <div className={styles.placeholder}>Select or create a snippet</div>}
+        <div className={styles.editor} ref={hostRef} />
+      </div>
+      {error !== null && <pre className={styles.error}>{error}</pre>}
     </div>
   );
 }