pi-weave 0.3.3 → 0.3.5

package/src/web/client/shell/Settings.tsx

@@ -18,6 +18,7 @@ export function Settings(props: {
   onChange: (layout: WorkspaceLayout) => void; onRefresh: () => void; onClose: () => void;
 }) {
   const [category, setCategory] = useState<typeof CATEGORIES[number]>("General");
+  const [refreshCount, setRefreshCount] = useState(0);
   const trap = useFocusTrap();
   const p = props.layout.preferences;
   const update = (values: Partial<Preferences>): void => props.onChange({ ...props.layout, preferences: { ...p, ...values } });
@@ -30,8 +31,8 @@ export function Settings(props: {
       <section aria-label={`${category} settings`}><h3>{category}</h3>
         {category === "General" ? <>
           <p>Pi Weave {props.info.version}</p>
-          <dl class="weave-settings-locations"><dt>Vault</dt><dd>{props.info.vaultRoot || "Loading…"}</dd><dt>Repository</dt><dd>{props.cwd}</dd></dl>
-          <div class="weave-settings-actions"><button type="button" onClick={props.onRefresh}>Refresh workspace</button><a href="https://github.com/EranYonai/pi-weave#readme" target="_blank" rel="noreferrer">Documentation ↗</a></div>
+          <dl class="weave-settings-locations"><dt>Vault</dt><dd><code>{props.info.vaultRoot || "Loading…"}</code></dd><dt>Repository</dt><dd><code>{props.cwd}</code></dd></dl>
+          <div class="weave-settings-actions"><button type="button" onClick={() => { setRefreshCount((value) => value + 1); props.onRefresh(); }}><span key={refreshCount} class={refreshCount ? "weave-refresh-spin" : ""} aria-hidden="true">↻</span> Refresh workspace</button><a href="https://github.com/EranYonai/pi-weave#readme" target="_blank" rel="noreferrer">Documentation ↗</a></div>
           <details><summary tabIndex={0}>Keyboard shortcuts</summary>{keyHelp(props.shortcut.slice(0, -1)).map((group) => <div key={group.title}><h4>{group.title}</h4>{group.entries.map((entry) => <div class="weave-key-row" key={entry.combo}><kbd>{entry.combo}</kbd><span>{entry.what}</span></div>)}</div>)}</details>
         </> : null}
         {category === "Appearance" ? <>

package/src/web/client/shell/Shell.tsx

@@ -4,7 +4,7 @@ import type { GraphPayload, NotePayload } from "../../shared/wire";
 import { activePane, activeTab, activateTab, closePane, closeTab, focusDocument, initialLayout, reorderTab, moveTab, navigateTab, openDocument, openWithPreferences, restoreWorkspace, openGraph, parseWorkspaceLayout, splitPane, tabDropSource, tabSelection } from "../../shared/workspace";
 import type { Pane, WorkspaceLayout, WorkspaceTab } from "../../shared/workspace";
 import { fetchJson } from "../api.dom";
-import { openNote, saveNote } from "../api";
+import { createNote, fetchGraph, openNote, saveNote } from "../api";
 import { Graph } from "../graph/Graph";
 import { schemeOf, watchScheme } from "../graph/scheme";
 import { createSigmaRenderer } from "../graph/renderer.dom";
@@ -51,13 +51,18 @@ function RecentList(props: { visits: readonly string[]; graph: GraphPayload | nu
 function DocumentView(props: {
   preferences: Preferences; tab: WorkspaceTab; graph: GraphPayload | null; drafts: DraftStore; revision: number;
   onSelect: (id: string, newTab?: boolean) => void; onSave: (slug: string, body: string) => Promise<boolean>;
-  now: number; onScroll: (value: number) => void; onSearch: () => void; onGraph: () => void;
+  now: number; onScroll: (value: number) => void; onSearch: () => void; onGraph: () => void; onCreate: (title: string) => Promise<boolean>;
 }) {
   const id = tabSelection(props.tab);
   const slug = id?.startsWith("note:") ? id.slice(5) : null;
   const [loaded, setLoaded] = useState<{ slug: string; note: NotePayload | null; failed: boolean; version: number } | null>(null);
   const element = useRef<HTMLDivElement | null>(null);
   const savedScroll = useRef(props.tab.scroll);
+  const [newNote, setNewNote] = useState(false);
+  const [title, setTitle] = useState("");
+  const [creating, setCreating] = useState(false);
+  const titleInput = useRef<HTMLInputElement | null>(null);
+  useLayoutEffect(() => { if (newNote) titleInput.current?.focus(); }, [newNote]);
   useEffect(() => {
     if (slug === null) return;
     const version = props.drafts.nextLoadVersion();
@@ -69,11 +74,22 @@ function DocumentView(props: {
   useLayoutEffect(() => {
     const note = element.current?.querySelector<HTMLElement>(".weave-note");
     if (note !== null && note !== undefined) note.scrollTop = savedScroll.current;
+    if (slug !== null && props.drafts.get(slug) !== null) element.current?.querySelector<HTMLTextAreaElement>(".weave-note-editor")?.focus();
   }, [id, payload?.note?.note.slug]);
   if (id === null) return <div class="weave-welcome">
     <span class="weave-welcome-mark" aria-hidden="true">✳</span><h1>Your knowledge, connected.</h1>
-    <p>Open a note from the sidebar, find something you remember, or follow a connection.</p>
-    <div><button type="button" onClick={props.onSearch}>Search workspace <kbd>⌘K</kbd></button><button type="button" onClick={props.onGraph}>Explore graph</button></div>
+    <p>Ask your agent to write, organize, and connect your notes. Browse that knowledge here, or start a note yourself.</p>
+    <div><button type="button" onClick={props.onSearch}>Search workspace <kbd>⌘K</kbd></button><button type="button" onClick={props.onGraph}>Explore graph</button><button type="button" onClick={() => setNewNote(true)}>New note</button></div>
+    {newNote ? <form class="weave-new-note" onSubmit={(event) => {
+      event.preventDefault();
+      if (creating || !title.trim()) return;
+      setCreating(true);
+      void props.onCreate(title.trim()).finally(() => setCreating(false));
+    }} onKeyDown={(event) => { if (event.key === "Escape") { event.stopPropagation(); if (!creating) setNewNote(false); } }}>
+      <label for={`new-note-${props.tab.id}`}>Note title</label>
+      <input id={`new-note-${props.tab.id}`} ref={titleInput} required value={title} disabled={creating} onInput={(event) => setTitle(event.currentTarget.value)} />
+      <div><button type="submit" disabled={creating || !title.trim()}>{creating ? "Creating…" : "Create note"}</button><button type="button" disabled={creating} onClick={() => setNewNote(false)}>Cancel</button></div>
+    </form> : null}
   </div>;
   const missing = props.graph !== null && !props.graph.model.nodes.some((node) => node.id === id);
   if (missing || (payload?.failed && props.drafts.isDirty(slug ?? ""))) {
@@ -186,6 +202,16 @@ export function Shell(props: ShellProps) {
     if (!result.ok) { window.alert(result.message); return false; }
     setRevision((value) => value + 1); workspace.current?.refresh(); return true;
   };
+  const create = async (title: string, paneId: string): Promise<boolean> => {
+    const result = await createNote(fetchJson, title);
+    if (!result.ok) { window.alert(result.message); return false; }
+    const graph = await fetchGraph(fetchJson);
+    setData((current) => ({ ...current, graph: graph.ok ? graph.data : null, graphFailed: !graph.ok }));
+    drafts.open(result.data.note.slug, result.data.note.body);
+    change(openDocument(live.current.layout, `note:${result.data.note.slug}`, { paneId }));
+    workspace.current?.refresh();
+    return true;
+  };
   useEffect(() => drafts.subscribe(() => setDraftRevision((value) => value + 1)), [drafts]);
   useEffect(() => {
     workspace.current = startWorkspace({ fetch: fetchJson, state: initialWorkspaceState(), setState: setData });
@@ -399,7 +425,7 @@ export function Shell(props: ShellProps) {
       <div class="weave-pane-content" role="tabpanel" tabIndex={-1} id={`panel-${group.id}`} aria-labelledby={`tab-${current.id}`} {...(current.kind === "graph" ? { ref: graphSlot } : {})}>
         {current.kind === "document" ? <DocumentView key={`${current.id}:${current.cursor}:${tabSelection(current)}`} preferences={layout.preferences} tab={current} graph={data.graph} drafts={drafts} revision={revision} now={now}
           onSelect={(id, newTab) => select(id, newTab, group.id)} onSave={save} onScroll={(value) => rememberScroll(current.id, value)}
-          onSearch={() => setOverlay("search")} onGraph={showGraph} /> : null}
+          onSearch={() => setOverlay("search")} onGraph={showGraph} onCreate={(title) => create(title, group.id)} /> : null}
       </div>
     </section>;
   };

package/src/web/client/shell/workspace.css.ts

@@ -74,7 +74,9 @@ export const WORKSPACE_CSS = `
 .weave-document .weave-note-body h2{font-size:var(--weave-px-title);margin-top:28px}
 .weave-document .weave-note-editor{padding:14px max(24px,calc((100% - var(--weave-reading-width,760px))/2));min-height:220px;flex:1;font-size:var(--weave-note-size,var(--weave-px-subhead))}
 .weave-document .weave-note-tags{margin-top:12px}
-.weave-document .weave-note-edit,.weave-document .weave-note-save{padding:5px 10px;border-radius:var(--weave-radius)}
+.weave-document .weave-note-edit,.weave-document .weave-note-save{padding:5px 10px;border-radius:var(--weave-radius);font-size:var(--weave-px-caption)}
+.weave-document .weave-note-edit{color:var(--weave-dim);background:transparent;border-color:transparent}
+.weave-document .weave-note-edit:hover{color:var(--weave-accent);background:var(--weave-new);border-color:transparent}
 .weave-welcome{align-self:center;margin:auto;padding:35px;max-width:560px;color:var(--weave-dim);line-height:1.7}
 .weave-welcome-mark{font-size:var(--weave-px-display);color:var(--weave-accent)}
 .weave-welcome h1{font-size:var(--weave-px-display);line-height:1.4;letter-spacing:-.025em;color:var(--weave-fg);font-weight:550}
@@ -83,6 +85,10 @@ export const WORKSPACE_CSS = `
 .weave-welcome button{border:1px solid var(--weave-line-strong);background:var(--weave-panel);padding:9px 13px;border-radius:var(--weave-radius);font-size:var(--weave-px-row)}
 .weave-welcome button:hover{border-color:var(--weave-accent)}
 .weave-welcome kbd{color:var(--weave-faint);padding-left:16px}
+.weave-new-note{display:flex;flex-direction:column;gap:10px;margin-top:24px}
+.weave-new-note input{font:inherit;color:var(--weave-fg);background:var(--weave-panel);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);padding:9px 13px;min-width:0}
+.weave-new-note input:focus-visible{outline:2px solid var(--weave-accent);outline-offset:2px}
+.weave-new-note>div{display:flex;gap:12px}
 .weave-sidebar-context .weave-rail{flex:1;border:0;overflow:auto;padding:6px 12px}
 .weave-sidebar-context .weave-ctx-link{padding-top:7px;padding-bottom:7px}
 .weave-graph-host{position:absolute;z-index:2;display:flex;background:var(--weave-bg)}
@@ -134,7 +140,15 @@ export const WORKSPACE_CSS = `
 .weave-setting-range{display:flex;align-items:center;gap:12px;width:190px}.weave-setting-range input{width:130px;min-width:0}.weave-setting-range output{min-width:42px;text-align:right;color:var(--weave-accent);font-variant-numeric:tabular-nums}
 .weave-settings button:focus-visible,.weave-settings a:focus-visible,.weave-settings summary:focus-visible{outline:2px solid var(--weave-accent);outline-offset:2px}
 .weave-settings-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:24px 0}.weave-settings-actions button,.weave-settings-download,.weave-settings-forces>button{display:inline-block;padding:9px 14px;border:1px solid var(--weave-line-strong);border-radius:6px;color:var(--weave-accent);background:var(--weave-raise);text-decoration:none}
-.weave-settings-forces>button{margin-top:20px}.weave-settings-forces>button:disabled{opacity:.5}.weave-settings-locations dd{margin:6px 0 18px;overflow-wrap:anywhere;color:var(--weave-dim);font-family:var(--weave-font-mono)}
+.weave-settings-actions button{transition:transform 100ms ease,background 100ms ease}
+.weave-settings-actions button:hover{background:var(--weave-new);border-color:var(--weave-accent)}
+.weave-settings-actions button:active{transform:scale(.97)}
+.weave-settings-actions button>span{display:inline-block}
+.weave-refresh-spin{animation:weave-refresh-spin 500ms ease}
+@keyframes weave-refresh-spin{to{transform:rotate(360deg)}}
+.weave-settings-forces>button{margin-top:20px}.weave-settings-forces>button:disabled{opacity:.5}.weave-settings-locations dd{margin:6px 0 18px;overflow-wrap:anywhere;color:var(--weave-dim);font-family:var(--weave-mono)}
+.weave-settings-locations code{display:block;padding:10px 12px;background:var(--weave-bg);border:1px solid var(--weave-line);border-radius:var(--weave-radius);font-family:var(--weave-mono);white-space:pre-wrap}
+@media(prefers-reduced-motion:reduce){.weave-settings-actions button{transition:none}.weave-settings-actions button:active{transform:none}.weave-refresh-spin{animation:none}}
 .weave-settings details summary{cursor:pointer;padding:12px 0}.weave-settings .weave-key-row{gap:16px;align-items:baseline}.weave-settings .weave-key-row kbd{min-width:150px;color:var(--weave-accent)}
 @media(max-width:650px){.weave-settings{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr)}.weave-settings nav{border-right:0;border-bottom:1px solid var(--weave-line);padding:8px 16px}.weave-settings nav select{width:100%;max-width:none}.weave-settings section{padding:20px}.weave-setting-row{align-items:flex-start;gap:12px}.weave-settings select{max-width:170px}.weave-setting-range{width:140px}.weave-setting-range input{width:90px}}
 `;

package/src/web/server/routes.ts

@@ -8,6 +8,7 @@
  * | GET    | `/api/graph`             | {@link GraphPayload}, ETag'd on `stamp`      |
  * | GET    | `/api/note/:slug`        | {@link NotePayload}                          |
  * | POST   | `/api/note/:slug`        | save a note's Markdown body                  |
+ * | POST   | `/api/notes`            | create an empty human-authored vault note    |
  * | POST   | `/api/note/:slug/rename` | rename a vault note                          |
  * | POST   | `/api/note/:slug/move`   | move a vault note                            |
  * | DELETE | `/api/note/:slug`        | delete a vault note                          |
@@ -56,7 +57,7 @@ import type { GraphModel as CoreGraphModel } from "../../core/graph/model";
 import { openNoteInEditor } from "../../core/openInEditor";
 import type { Note } from "../../core/types";
 import type { VaultMutationResult } from "../../core/vault";
-import { createFolder, deleteFolder, deleteNote, getNote, moveNote, renameFolder, renameNote, resolveHtmlPath, searchNotes, setNoteBody } from "../../core/vault";
+import { addNote, createFolder, deleteFolder, deleteNote, getNote, moveNote, renameFolder, renameNote, resolveHtmlPath, searchNotes, setNoteBody } from "../../core/vault";
 import { deriveTagIndex, type TaggedNote } from "../../core/view/links";
 import type {
   GraphPayload,
@@ -394,6 +395,16 @@ async function route(
     return sendJson(res, 200, { viewId: randomUUID(), layout: await deps.workspaceState.readLatest(), info: { vaultRoot: deps.vaultRoot, version: (JSON.parse(await readFile(new URL("../../../package.json", import.meta.url), "utf8")) as { version: string }).version } }, { "cache-control": "no-store" });
   }
   if (method === "POST" && path === "/api/workspace-state") return saveWorkspaceState(deps, req, res);
+  if (method === "POST" && path === "/api/notes") {
+    const body = await readJsonBody(req);
+    const title = body !== null && typeof body === "object" && !Array.isArray(body) ? (body as { title?: unknown }).title : null;
+    if (typeof title !== "string" || !title.trim() || /[\r\n]/.test(title)) {
+      sendJson(res, 400, { error: "expected a non-empty, single-line title" });
+      return;
+    }
+    const note = await addNote(deps.vaultRoot, { title: title.trim(), body: "", source: "human" });
+    return sendJson(res, 201, notePayload(note), { "cache-control": "no-store" });
+  }
   if (path.startsWith("/api/folder/")) {
     const handled = await routeFolder(deps, method, path.slice("/api/folder/".length), req, res);
     if (handled) return;