@1agh/maude 0.36.0 → 0.37.0

package/apps/studio/canvas-shell.tsx

@@ -47,6 +47,12 @@ import {
   useViewportControllerContext,
   type ViewportControllerHandle,
 } from './canvas-lib.tsx';
+import {
+  buildEditSourceRecord,
+  type EditSourceApplyFn,
+  type EditSourceOp,
+  type EditSourcePayload,
+} from './commands/edit-source-command.ts';
 import { type AlignMode, alignLabel, equalSpacingLabel } from './commands/equal-spacing-command.ts';
 import {
   ContextMenuProvider,
@@ -92,7 +98,7 @@ import {
   useSelectionSet,
 } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
-import { useUndoStack } from './use-undo-stack.tsx';
+import { useUndoSinks, useUndoStack } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles — halos render as `position: fixed` siblings of the canvas. Reading
@@ -1372,6 +1378,28 @@ function CanvasRouter({
   const annotSel = useAnnotationSelection();
   const ctxMenu = useContextMenu();
   const undoStack = useUndoStack();
+  const undoSinks = useUndoSinks();
+  // Latest undo stack, read inside long-lived listeners (text-edit dblclick)
+  // without making them a hook dependency — avoids re-binding on every undo op.
+  const undoStackRef = useRef(undoStack);
+  undoStackRef.current = undoStack;
+
+  // Phase: inline-edit undo (DDR-103/104 follow-up). Wire the `editSourceApplyFn`
+  // sink so an `edit-source` command's do()/undo() reaches the main-origin-only
+  // `/_api/edit-*` write — which the untrusted canvas iframe can't call (DDR-054).
+  // It posts `dgn:'apply-edit'` to the parent shell, which performs the write.
+  useEffect(() => {
+    const applyFn: EditSourceApplyFn = (apply) => {
+      try {
+        window.parent.postMessage({ dgn: 'apply-edit', ...apply }, '*');
+      } catch {
+        /* detached / cross-origin teardown — nothing to apply */
+      }
+    };
+    undoSinks.setSink('editSourceApplyFn', applyFn);
+    return () => undoSinks.setSink('editSourceApplyFn', undefined);
+  }, [undoSinks]);
+
   // Shell View-menu zoom bridge (dgn:'zoom') — same controller the zoom pill uses.
   const zoomController = useViewportControllerContext();
   // Shell View-menu chrome-visibility bridge (dgn:'view-chrome') — minimap /
@@ -1520,6 +1548,35 @@ function CanvasRouter({
         }
         return;
       }
+      // Inline-edit undo (DDR-103/104 follow-up). The shell's inspector posts
+      // this AFTER it has applied a CSS / attribute edit (`/_api/edit-css` /
+      // `/_api/edit-attr`), so we RECORD it onto the in-canvas undo stack
+      // (append without re-running do() — the edit already landed) and Cmd+Z
+      // can invert it. Inline TEXT edits originate in this iframe and record
+      // themselves directly (see commitEdit). PARENT-ORIGIN ONLY (DDR-054):
+      // a hostile canvas self-post must not be able to plant fake undo entries.
+      if (m.dgn === 'record-edit') {
+        if (e.source !== window.parent) return;
+        const p = (m as { payload?: Partial<EditSourcePayload> }).payload;
+        if (
+          p &&
+          (p.op === 'css' || p.op === 'text' || p.op === 'attr') &&
+          typeof p.canvas === 'string' &&
+          typeof p.id === 'string'
+        ) {
+          undoStack.record(
+            buildEditSourceRecord({
+              op: p.op as EditSourceOp,
+              canvas: p.canvas,
+              id: p.id,
+              key: typeof p.key === 'string' ? p.key : '',
+              before: typeof p.before === 'string' ? p.before : null,
+              after: typeof p.after === 'string' ? p.after : null,
+            })
+          );
+        }
+        return;
+      }
       if (m.dgn === 'request-layers') {
         postLayersTree((m as { artboardId?: string }).artboardId ?? null);
         return;
@@ -1605,11 +1662,25 @@ function CanvasRouter({
       if (text === original.trim()) return;
       const cdId = elx.getAttribute('data-cd-id');
       if (!cdId) return;
+      const file = deriveFile();
       try {
-        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file: deriveFile(), text }, '*');
+        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file, text }, '*');
       } catch {
         /* detached / cross-origin */
       }
+      // Record onto the in-canvas undo stack so Cmd+Z reverts the rewrite. The
+      // edit already posted above (record, don't re-run do()). before/after are
+      // the trimmed bodies the edit-text endpoint persists.
+      undoStackRef.current.record(
+        buildEditSourceRecord({
+          op: 'text',
+          canvas: file,
+          id: cdId,
+          key: '',
+          before: original.trim(),
+          after: text,
+        })
+      );
     }
     const onDbl = (e: MouseEvent): void => {
       if (editing) return;

package/apps/studio/client/app.jsx

@@ -4156,7 +4156,7 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
   );
 }
 
-function CssKnobs({ el, cfg, onOptimistic }) {
+function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
   const editable = !!el.id;
   const computed = el.computed || {};
   // Phase 12.3 — optimistic local overlay over the selection's authored / custom
@@ -4248,47 +4248,88 @@ function CssKnobs({ el, cfg, onOptimistic }) {
       value,
     });
   };
+  // Record an inline edit onto the canvas undo stack (Cmd+Z). The edit has
+  // already POSTed `/_api/edit-*`; the canvas iframe APPENDS the record (no
+  // re-run). `before`/`after` null = the prop/attr was/becomes unset.
+  const record = (op, key, before, after) => {
+    onRecordEdit?.({
+      op,
+      canvas: el.file,
+      id: el.id,
+      key,
+      before: before == null || before === '' ? null : before,
+      after: after == null || after === '' ? null : after,
+    });
+  };
   const commit = (property, raw) => {
     const value = (raw || '').trim();
     if (!editable || !value) return;
-    if (value === (authored[property] ?? '').trim()) return; // no-op
+    const before = authored[property] ?? null;
+    if (value === (before ?? '').trim()) return; // no-op
     optimistic(property, value);
     setA(property, value); // reflect in the panel immediately (no reload → no reselect)
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, value }, property);
+    record('css', property, before, value);
   };
   // A custom CSS property (Advanced) — same write, but the panel surfaces it from
   // the customStyles map, so overlay THERE.
   const commitCustom = (property, raw) => {
     const value = (raw || '').trim();
-    if (!editable || !property.trim() || !value) return;
-    optimistic(property.trim(), value);
-    setC(property.trim(), value);
-    post('/_api/edit-css', { canvas: el.file, id: el.id, property: property.trim(), value }, property.trim());
+    const prop = property.trim();
+    if (!editable || !prop || !value) return;
+    const before = customStyles[prop] ?? null;
+    optimistic(prop, value);
+    setC(prop, value);
+    post('/_api/edit-css', { canvas: el.file, id: el.id, property: prop, value }, prop);
+    record('css', prop, before, value);
   };
   const commitAttr = (attr, raw) => {
     const a = (attr || '').trim();
     const value = (raw || '').trim();
     if (!editable || !a || !value) return;
+    const before = attrs[a] ?? null;
     setT(a, value);
     post('/_api/edit-attr', { canvas: el.file, id: el.id, attr: a, value }, `@${a}`);
+    record('attr', a, before, value);
   };
   // Phase 12.3 — reset (remove the inline prop / attr → back to class/inherited).
   const reset = (property) => {
     if (!editable) return;
+    const before = authored[property] ?? null;
     optimistic(property, null);
     setA(property, null);
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+    record('css', property, before, null);
   };
   const resetCustom = (property) => {
     if (!editable) return;
+    const before = customStyles[property] ?? null;
     optimistic(property, null);
     setC(property, null);
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+    record('css', property, before, null);
   };
   const resetAttr = (attr) => {
     if (!editable) return;
+    const before = attrs[attr] ?? null;
     setT(attr, null);
     post('/_api/edit-attr', { canvas: el.file, id: el.id, attr, reset: true }, `@${attr}`);
+    record('attr', attr, before, null);
+  };
+  // Cmd+Z / Cmd+Shift+Z (or Cmd+Y) inside the inspector forwards to the canvas
+  // undo stack — Figma-parity: a property field reverts the last DOCUMENT edit,
+  // not field text. Without this, an edit committed with focus still in the
+  // inspector couldn't be undone (the iframe's own keydown never sees the key).
+  const onKnobKeyDown = (e) => {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
+    const k = e.key.toLowerCase();
+    if (k === 'z') {
+      e.preventDefault();
+      onUndoRedo?.(e.shiftKey ? 'redo' : 'undo');
+    } else if (k === 'y') {
+      e.preventDefault();
+      onUndoRedo?.('redo');
+    }
   };
   // Phase 12.3 (W2.2) — Figma/Webflow scrub: drag a number field horizontally to
   // change its value. Live preview via optimistic apply on every move (no source
@@ -4726,7 +4767,7 @@ function CssKnobs({ el, cfg, onOptimistic }) {
   const attrRows = Object.entries(attrs);
 
   return (
-    <div className="st-cp" key={el.id} data-tour="css-panel">
+    <div className="st-cp" key={el.id} data-tour="css-panel" onKeyDown={onKnobKeyDown}>
       <div className="st-cp-id">
         <span className="st-cp-idtag">
           {el.tag || 'element'}
@@ -5272,6 +5313,8 @@ function InspectorPanel({
   onHoverLayer,
   cfg,
   onOptimistic,
+  onRecordEdit,
+  onUndoRedo,
   tab: tabProp,
   onTabChange,
   width,
@@ -5445,7 +5488,13 @@ function InspectorPanel({
             )}
           </>
         ) : (
-          <CssKnobs el={el} cfg={cfg} onOptimistic={onOptimistic} />
+          <CssKnobs
+            el={el}
+            cfg={cfg}
+            onOptimistic={onOptimistic}
+            onRecordEdit={onRecordEdit}
+            onUndoRedo={onUndoRedo}
+          />
         )}
       </div>
     </aside>
@@ -6538,6 +6587,47 @@ function App() {
             if (!j.ok) console.warn('[edit-text]', j.error || 'failed');
           })
           .catch(() => {});
+      } else if (m.dgn === 'apply-edit' && m.id && (m.op === 'css' || m.op === 'text' || m.op === 'attr')) {
+        // Inline-edit undo/redo (DDR-103/104 follow-up). The canvas iframe's
+        // `edit-source` command can't call the main-origin-only `/_api/edit-*`
+        // routes (DDR-054), so it asks us to re-apply the before/after value.
+        // `value` null = reset (remove the inline prop / attr). For CSS we also
+        // optimistically repaint so the revert shows before the HMR reload.
+        const op = m.op;
+        const value = typeof m.value === 'string' ? m.value : null;
+        let url;
+        let body;
+        if (op === 'css') {
+          url = '/_api/edit-css';
+          body =
+            value == null
+              ? { canvas: m.canvas, id: m.id, property: m.key, reset: true }
+              : { canvas: m.canvas, id: m.id, property: m.key, value };
+          applyOptimisticStyle({ id: m.id, prop: m.key, value });
+        } else if (op === 'attr') {
+          url = '/_api/edit-attr';
+          body =
+            value == null
+              ? { canvas: m.canvas, id: m.id, attr: m.key, reset: true }
+              : { canvas: m.canvas, id: m.id, attr: m.key, value };
+        } else {
+          url = '/_api/edit-text';
+          body = { canvas: m.canvas, id: m.id, text: value ?? '' };
+        }
+        editApplyChainRef.current = editApplyChainRef.current
+          .catch(() => {})
+          .then(() =>
+            fetch(url, {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(body),
+            })
+              .then((r) => r.json().catch(() => ({})))
+              .then((j) => {
+                if (!j.ok) console.warn('[apply-edit]', op, j.error || 'failed');
+              })
+              .catch(() => {})
+          );
       } else if (m.dgn === 'layers-tree') {
         // Phase 12 Task 4 — browsable layers tree for the active artboard.
         setLayersTree({ artboardId: m.artboardId, nodes: Array.isArray(m.tree) ? m.tree : [] });
@@ -6791,6 +6881,28 @@ function App() {
     [activePath]
   );
 
+  // Inline-edit undo (DDR-103/104 follow-up). The inspector calls this after it
+  // POSTs `/_api/edit-css` / `/_api/edit-attr`, so the canvas iframe records the
+  // edit on its undo stack and Cmd+Z can invert it. The iframe gates this to
+  // parent-origin posts (DDR-054). See `commands/edit-source-command.ts`.
+  const recordSourceEdit = useCallback(
+    (payload) => {
+      if (!activePath || activePath === SYSTEM_TAB || !payload) return;
+      const el = iframesRef.current.get(activePath);
+      if (el && el.contentWindow) {
+        try {
+          el.contentWindow.postMessage({ dgn: 'record-edit', payload }, '*');
+        } catch {}
+      }
+    },
+    [activePath]
+  );
+
+  // Serializes `apply-edit` source writes from canvas undo/redo so a rapid
+  // multi-Cmd+Z on the same property lands on disk in dispatch order (the
+  // iframe sink is fire-and-forget, so without this the POSTs could race).
+  const editApplyChainRef = useRef(Promise.resolve());
+
   const resolveComment = useCallback((id) => {
     wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } });
   }, []);
@@ -6859,6 +6971,19 @@ function App() {
         setPaletteOpen((v) => !v);
         return;
       }
+      // Cmd+Z / Cmd+Shift+Z / Cmd+Y — forward to the active canvas's undo stack
+      // when focus is in the shell chrome (not a text field, not the canvas
+      // iframe). Inside the canvas iframe the canvas owns Cmd+Z; inside an editable
+      // field native undo wins (the inspector's CssKnobs forwards on its own). This
+      // makes inspector CSS / inline text / attr edits undoable from anywhere.
+      if (meta && !e.altKey && (e.key === 'z' || e.key === 'Z' || e.key === 'y' || e.key === 'Y')) {
+        if (!inEditable && !inCanvasIframe && activePath && activePath !== SYSTEM_TAB) {
+          e.preventDefault();
+          const redo = e.key === 'y' || e.key === 'Y' || e.shiftKey;
+          postToActiveCanvas({ dgn: redo ? 'redo' : 'undo' });
+          return;
+        }
+      }
       // Cmd+Shift+R — refresh the FILES tree (re-read /_index-data). The fs-watch
       // → canvas-list-update auto-refresh can miss events in the compiled desktop
       // sidecar (recursive fs.watch is unreliable in a bun --compile binary), and
@@ -7387,6 +7512,8 @@ function App() {
               onTabChange={setInspectorTab}
               onClose={() => setInspectorOpen(false)}
               onOptimistic={applyOptimisticStyle}
+              onRecordEdit={recordSourceEdit}
+              onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
               layersTree={layersTree}
               onSelectLayer={(n) =>
                 postToActiveCanvas({
@@ -7496,8 +7623,9 @@ function App() {
           loadLog={gitLoadLog}
           onClose={() => setDiffTarget(null)}
           onRestore={async (file) => {
-            await gitDiscard([file]);
-            setDiffTarget(null);
+            const res = await gitDiscard([file]);
+            if (res?.ok) setDiffTarget(null);
+            else window.alert(res?.error || 'Could not restore that version. Try again.');
           }}
           onResolve={async (choice) => {
             // phase-28 (E3): apply the chosen side via /_api/git/resolve, which

package/apps/studio/client/github.js

@@ -37,6 +37,10 @@ export const openVerification = () =>
   invoke('github_open_verification', { url: 'https://github.com/login/device' });
 /** Show the device code as soon as the shell has it. Returns an unlisten promise. */
 export const onDeviceCode = (cb) => listen('github://device-code', cb);
+/** Fire when sign-in completes (any surface) so other surfaces can flip live. cb(login). */
+export const onSignedIn = (cb) => listen('github://signed-in', cb);
+/** Fire when the native File ▸ New Project… menu item is chosen. Returns an unlisten promise. */
+export const onMenuNewProject = (cb) => listen('menu://new-project', cb);
 
 // ── dev-server endpoints ────────────────────────────────────────────────────────
 async function api(path, opts = {}) {
@@ -63,6 +67,8 @@ export const createRepo = (body) => api('/_api/github/create-repo', { method: 'P
 export const invite = (username) => api('/_api/github/invite', { method: 'POST', body: JSON.stringify({ username }) });
 export const cloneRepo = (body) => api('/_api/github/clone', { method: 'POST', body: JSON.stringify(body) });
 export const createProject = (body) => api('/_api/github/create-project', { method: 'POST', body: JSON.stringify(body) });
+/** Create a local-only project (git init + .design scaffold, no GitHub remote). body: { name, parentDir }. */
+export const createLocalProject = (body) => api('/_api/project/create-local', { method: 'POST', body: JSON.stringify(body) });
 export const initDesign = (dir) => api('/_api/design/init', { method: 'POST', body: JSON.stringify({ dir }) });
 /** Phase 29 (E4) Door C — connect to a team hub (saves the global hub credential). */
 export const hubLink = (body) => api('/_api/hub/link', { method: 'POST', body: JSON.stringify(body) });

package/apps/studio/client/panels/CreateProject.jsx

@@ -12,7 +12,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { cloneRepo, createProject, initDesign, invite, listRepos, openLocalProject, pickDirectory } from '../github.js';
+import { cloneRepo, createLocalProject, createProject, initDesign, invite, listRepos, openLocalProject, pickDirectory } from '../github.js';
 
 function Icon({ name, size = 16 }) {
   const p = {
@@ -57,6 +57,12 @@ function Icon({ name, size = 16 }) {
       </>
     ),
     spinner: <path d="M8 2.2a5.8 5.8 0 1 0 5.8 5.8" />,
+    laptop: (
+      <>
+        <rect x="3" y="3.5" width="10" height="7" rx="1" />
+        <path d="M1.5 13h13l-1.2-1.8H2.7z" />
+      </>
+    ),
   }[name];
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className={name === 'spinner' ? 'cp-spin' : undefined}>
@@ -66,12 +72,12 @@ function Icon({ name, size = 16 }) {
 }
 
 const TITLES = {
-  new: ['Create a new project', 'A private project on GitHub, set up for you.'],
+  new: ['Create a new project', 'On GitHub, or just locally on your computer.'],
   get: ['Pull a local copy', 'Pick a project, choose where to save it, and open it here.'],
   share: ['Share this project', 'Invite a teammate by their GitHub username.'],
 };
 
-export default function CreateProject({ view, identity, onClose }) {
+export default function CreateProject({ view, identity, signedIn, onClose }) {
   const [title, sub] = TITLES[view] || TITLES.new;
   return (
     <div className="cp-modal" role="dialog" aria-modal="true" aria-label={title} onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}>
@@ -86,7 +92,7 @@ export default function CreateProject({ view, identity, onClose }) {
             <Icon name="x" size={15} />
           </button>
         </div>
-        {view === 'new' && <NewView identity={identity} onClose={onClose} />}
+        {view === 'new' && <NewView identity={identity} signedIn={signedIn} onClose={onClose} />}
         {view === 'get' && <GetView />}
         {view === 'share' && <ShareView onClose={onClose} />}
       </div>
@@ -94,20 +100,24 @@ export default function CreateProject({ view, identity, onClose }) {
   );
 }
 
-function NewView({ identity, onClose }) {
+function NewView({ identity, signedIn, onClose }) {
   const [name, setName] = useState('');
+  // 'github' = new repo on GitHub (needs sign-in); 'local' = just a local git repo,
+  // no remote. Default to local when signed out (GitHub isn't available then).
+  const [where, setWhere] = useState(signedIn ? 'github' : 'local');
   const [isPrivate, setIsPrivate] = useState(true);
   const [desc, setDesc] = useState('');
   const [busy, setBusy] = useState(false);
   const [step, setStep] = useState('');
   const [err, setErr] = useState('');
 
+  const local = where === 'local';
   const slug = name.trim().toLowerCase().replace(/[^a-z0-9._-]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
   const owner = identity?.login || 'you';
 
-  // New project = create the GitHub repo AND a ready-to-design local project, then
-  // open it. You pick where to save it (like a real "new project"), then design
-  // and Publish when ready.
+  // New project = a ready-to-design local project, then open it. GitHub mode also
+  // creates the remote repo + sets origin; local mode is git init only (publish later).
+  // You pick where to save it, then design and Publish when ready.
   async function submit() {
     setErr('');
     setBusy(true);
@@ -115,8 +125,14 @@ function NewView({ identity, onClose }) {
       setStep('Choose where to save it…');
       const parentDir = await pickDirectory();
       if (!parentDir) { setBusy(false); setStep(''); return; } // cancelled
-      setStep('Creating your project on GitHub…');
-      const r = await createProject({ name, private: isPrivate, description: desc, parentDir });
+      let r;
+      if (local) {
+        setStep('Setting up your local project…');
+        r = await createLocalProject({ name, parentDir });
+      } else {
+        setStep('Creating your project on GitHub…');
+        r = await createProject({ name, private: isPrivate, description: desc, parentDir });
+      }
       if (!(r.ok && r.json?.ok)) {
         setErr(r.json?.error || 'Couldn’t create the project. Try again.');
         setBusy(false);
@@ -135,30 +151,48 @@ function NewView({ identity, onClose }) {
   return (
     <>
       <div className="cp-body">
-        <label className="cp-field">
-          <span className="cp-field-label">Project name</span>
-          <input className="input cp-input" type="text" value={name} placeholder="Acme Rebrand" aria-label="Project name" onChange={(e) => setName(e.target.value)} />
-          {slug && <span className="cp-field-help">Creates <b>github.com/{owner}/{slug}</b></span>}
-        </label>
         <div className="cp-field">
-          <span className="cp-field-label">Who can see it</span>
-          <div className="seg cp-seg" role="group" aria-label="Project visibility">
-            <button type="button" aria-pressed={isPrivate} onClick={() => setIsPrivate(true)}><Icon name="lock" size={14} /> Private</button>
-            <button type="button" aria-pressed={!isPrivate} onClick={() => setIsPrivate(false)}><Icon name="globe" size={14} /> Public</button>
+          <span className="cp-field-label">Where</span>
+          <div className="seg cp-seg" role="group" aria-label="Where to create the project">
+            <button type="button" aria-pressed={!local} disabled={!signedIn} title={signedIn ? undefined : 'Sign in with GitHub first'} onClick={() => setWhere('github')}><Icon name="globe" size={14} /> GitHub</button>
+            <button type="button" aria-pressed={local} onClick={() => setWhere('local')}><Icon name="laptop" size={14} /> This computer only</button>
           </div>
-          <span className="cp-field-help">{isPrivate ? 'Only you and people you invite. The safe default.' : 'Anyone on the internet can see this project.'}</span>
+          <span className="cp-field-help">
+            {local
+              ? 'A local git repo on your computer — no GitHub, no remote. You can publish it later.'
+              : signedIn
+                ? 'A repo on your GitHub account, cloned to your computer.'
+                : 'Sign in with GitHub (bottom-left) to publish. For now you can create a local project.'}
+          </span>
         </div>
         <label className="cp-field">
-          <span className="cp-field-label">Description <span className="cp-optional">optional</span></span>
-          <textarea className="textarea cp-textarea" rows={2} value={desc} placeholder="What is this project for?" aria-label="Project description" onChange={(e) => setDesc(e.target.value)} />
+          <span className="cp-field-label">Project name</span>
+          <input className="input cp-input" type="text" value={name} placeholder="Acme Rebrand" aria-label="Project name" onChange={(e) => setName(e.target.value)} />
+          {slug && <span className="cp-field-help">{local ? <>Creates a project folder <b>{slug}</b></> : <>Creates <b>github.com/{owner}/{slug}</b></>}</span>}
         </label>
+        {!local && (
+          <>
+            <div className="cp-field">
+              <span className="cp-field-label">Who can see it</span>
+              <div className="seg cp-seg" role="group" aria-label="Project visibility">
+                <button type="button" aria-pressed={isPrivate} onClick={() => setIsPrivate(true)}><Icon name="lock" size={14} /> Private</button>
+                <button type="button" aria-pressed={!isPrivate} onClick={() => setIsPrivate(false)}><Icon name="globe" size={14} /> Public</button>
+              </div>
+              <span className="cp-field-help">{isPrivate ? 'Only you and people you invite. The safe default.' : 'Anyone on the internet can see this project.'}</span>
+            </div>
+            <label className="cp-field">
+              <span className="cp-field-label">Description <span className="cp-optional">optional</span></span>
+              <textarea className="textarea cp-textarea" rows={2} value={desc} placeholder="What is this project for?" aria-label="Project description" onChange={(e) => setDesc(e.target.value)} />
+            </label>
+          </>
+        )}
         {err && <div className="callout callout--error"><span className="cp-cl-glyph" style={{ color: 'var(--status-error)' }}><Icon name="x" /></span><span>{err}</span></div>}
       </div>
       <div className="cp-ft">
         <span className="cp-spacer" />
         <button type="button" className="btn btn--ghost" onClick={onClose}>Cancel</button>
         <button type="button" className="btn btn--primary" onClick={submit} disabled={busy || !slug}>
-          <Icon name="plus" size={15} /> {busy ? step || 'Creating…' : 'Create project'}
+          <Icon name="plus" size={15} /> {busy ? step || 'Creating…' : local ? 'Create local project' : 'Create project'}
         </button>
       </div>
     </>

package/apps/studio/client/panels/GitPanel.jsx

@@ -343,7 +343,7 @@ export default function GitPanel({
       if (res.authRequired)
         setBanner({
           variant: 'info',
-          text: res.error || 'Sign in with GitHub to publish — coming soon.',
+          text: res.error || 'Sign in with GitHub to publish.',
         });
       else if (res.conflict)
         // A push conflict (non-fast-forward) prompts a Get-latest; a Get-latest

package/apps/studio/client/panels/IdentityBar.jsx

@@ -15,6 +15,8 @@ import {
   isNativeApp,
   isSignedIn,
   onDeviceCode,
+  onMenuNewProject,
+  onSignedIn,
   openVerification,
   signIn,
   signOut,
@@ -107,6 +109,8 @@ export default function IdentityBar() {
   const [copied, setCopied] = useState(false);
   const unlistenRef = useRef(null);
   const railRef = useRef(null);
+  const stateRef = useRef(state);
+  stateRef.current = state; // keep current for the (subscribe-once) menu listener
 
   useEffect(() => {
     let alive = true;
@@ -116,7 +120,14 @@ export default function IdentityBar() {
         const signed = await isSignedIn();
         if (!alive) return;
         if (signed) {
-          const r = await fetchIdentity();
+          let r = await fetchIdentity();
+          // A valid keychain token can still hit a transient identity-fetch failure at
+          // mount (bridge not ready / GitHub 5xx / rate-limit) — retry before falling back
+          // to the signed-out CTA so we don't flash "Sign in" at a signed-in user.
+          for (let i = 0; i < 2 && alive && !(r.ok && r.json?.ok); i += 1) {
+            await new Promise((res) => setTimeout(res, 800));
+            r = await fetchIdentity();
+          }
           if (!alive) return;
           if (r.ok && r.json?.ok) {
             setIdentity({ login: r.json.login, name: r.json.name, avatar_url: r.json.avatar_url });
@@ -133,6 +144,36 @@ export default function IdentityBar() {
     };
   }, [native]);
 
+  // Live-update when sign-in completes in ANOTHER surface (the wizard's Door A emits
+  // `github://signed-in`). Without this the rail can sit on "Sign in" with a valid token
+  // until a full reload. Flip to signed-in off the event's login, then enrich the profile.
+  useEffect(() => {
+    if (!native) return undefined;
+    const p = onSignedIn(async (login) => {
+      setIdentity((cur) => cur || { login, name: null, avatar_url: null });
+      setState('in');
+      const r = await fetchIdentity();
+      if (r.ok && r.json?.ok)
+        setIdentity({ login: r.json.login, name: r.json.name, avatar_url: r.json.avatar_url });
+    });
+    return () => {
+      p?.then?.((fn) => fn?.());
+    };
+  }, [native]);
+
+  // Native File ▸ New Project… (menu.rs emits `menu://new-project`). Open the create
+  // dialog once the GitHub check settled — even when signed out, since it offers a
+  // local-only project (no GitHub needed); the dialog gates the GitHub option itself.
+  useEffect(() => {
+    if (!native) return undefined;
+    const p = onMenuNewProject(() => {
+      if (stateRef.current !== 'loading') setView('new');
+    });
+    return () => {
+      p?.then?.((fn) => fn?.());
+    };
+  }, [native]);
+
   useEffect(() => {
     if (!menuOpen) return;
     const onDoc = (e) => {
@@ -288,7 +329,7 @@ export default function IdentityBar() {
         </div>
       )}
 
-      {view && <CreateProject view={view} identity={identity} onClose={() => setView(null)} />}
+      {view && <CreateProject view={view} identity={identity} signedIn={state === 'in'} onClose={() => setView(null)} />}
     </div>
   );
 }