@tenyokjs/devdevian-cli 0.5.0-alpha.1 → 0.6.0-alpha.1

package/lib/tui.mjs

@@ -3,6 +3,7 @@ import { render, Box, Text, useApp, useInput, useWindowSize } from "ink";
 import { randomBytes } from "node:crypto";
 import { homedir, hostname } from "node:os";
 import { workspaceRoot, reviewSource } from "./workspace.mjs";
+import { DeviPanel } from "./devi.mjs";
 import { WorkspacePicker } from "./picker.mjs";
 import { DraftStore, draftIdentity } from "./drafts.mjs";
 import { spawn } from "node:child_process";
@@ -47,6 +48,18 @@ import { editExternal } from "./external-editor.mjs";
 import { markdownRows } from "./rich-text.mjs";
 import { problemMessage } from "./problems.mjs";
 import { ReviewWorkspace, codeRange } from "./review-workspace.mjs";
+import {
+  catalogFields,
+  initialCatalog,
+  catalogDocument,
+  prepareCatalog,
+  publishCatalog,
+  saveCalendar,
+  validateFilter,
+  localTime,
+  viewerZone,
+  webURL,
+} from "./catalog.mjs";
 const h = React.createElement;
 const itemsOf = (value) => (Array.isArray(value) ? value : value?.items || []);
 const stamp = (value) => {
@@ -73,6 +86,8 @@ const labelOf = (route) =>
     community: "Community",
     feedback: "Code feedback",
     thread: "Reply thread",
+    project: "Project",
+    event: "Event",
   }[route.view] ||
   "Workspace";
 function openBrowser(url) {
@@ -91,6 +106,8 @@ function openBrowser(url) {
   child.unref();
 }
 function fieldsFor(form) {
+  if (["catalog", "catalogFilter", "calendar"].includes(form.kind))
+    return catalogFields(form);
   if (form.kind === "appearance") return appearanceFields;
   if (form.kind === "publication")
     return [
@@ -330,7 +347,15 @@ function listRows(route, data, index, width, colors, density = "comfortable") {
     let title = item.title || item.name || "",
       meta = "",
       body = "";
-    if (route.view === "drafts") {
+    if (route.view === "projects") {
+      title = item.name;
+      meta = `${item.stage} · #${item.topic} · ${item.founder_name}`;
+      body = item.tagline || item.description;
+    } else if (route.view === "events") {
+      title = (item.cancelled_at ? "[Cancelled] " : "") + item.title;
+      meta = `${stamp(item.start_at)} · ${item.organizer_name}`;
+      body = item.description;
+    } else if (route.view === "drafts") {
       title = item.form.values.title || item.form.title;
       meta = "Local draft · " + stamp(item.savedAt);
       body =
@@ -422,6 +447,8 @@ function listRows(route, data, index, width, colors, density = "comfortable") {
   });
 }
 function documentRows(route, data, width, colors) {
+  if (route.view === "project" || route.view === "event")
+    return markdownRows(catalogDocument(route, data), width, colors);
   if (route.view !== "post" || (route.tab && route.tab !== "overview"))
     return contentLines(route, data).flatMap((line) => wrap(line, width));
   const post = data?.post;
@@ -523,7 +550,8 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     ),
     [user, setUser] = useState(null),
     [device, setDevice] = useState(null),
-    [authVersion, setAuthVersion] = useState(0);
+    [authVersion, setAuthVersion] = useState(0),
+    [booting, setBooting] = useState(true);
   const [route, setRoute] = useState({ view: "feed", page: 1 }),
     [data, setData] = useState(null),
     [loading, setLoading] = useState(false),
@@ -693,6 +721,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     setPreview(null);
     setDevice(null);
     setUser(null);
+    setBooting(true);
     setReading(null);
     setActionIndex(null);
     setUnread(0);
@@ -716,6 +745,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     } else setError(problemMessage(e));
   }
   function navigate(next, { replace = false } = {}) {
+    setBooting(false);
     if (!replace)
       history.current.push({
         route,
@@ -800,6 +830,20 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       await queueDraft(() => drafts.remove(draftIdentity(value)));
   }
   async function restoreDraft(item) {
+    if (
+      item.form.kind === "catalog" &&
+      item.form.catalogProgress?.completedId
+    ) {
+      navigate({
+        view: item.form.entity,
+        id: item.form.catalogProgress.completedId,
+        page: 1,
+      });
+      setNotice(
+        "This draft was already published. Opened the existing publication.",
+      );
+      return;
+    }
     await task(async () => {
       const saved = await drafts.read(item.id),
         next = { ...saved.form, draftId: item.id };
@@ -838,6 +882,8 @@ function App({ initialConfig, flags, root, initialAppearance }) {
           }
         }
       }
+      if (next.kind === "catalog")
+        next.topics = itemsOf(await api("/topics")).map((t) => [t.id, t.name]);
       openForm(next);
       setNotice(
         "Restored local draft. Check the code selection before publishing.",
@@ -898,7 +944,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         if (!controller.signal.aborted) fail(e);
       });
     return () => controller.abort();
-  }, [phase, api]);
+  }, [phase, api, authVersion]);
   useEffect(() => {
     if (phase !== "ready" || !api || form || route.view === "help") return;
     let active = true;
@@ -964,7 +1010,10 @@ function App({ initialConfig, flags, root, initialAppearance }) {
           if (active) fail(e);
         })
         .finally(() => {
-          if (active) setLoading(false);
+          if (active) {
+            setLoading(false);
+            setBooting(false);
+          }
         });
     return () => {
       active = false;
@@ -996,6 +1045,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
           if (controller.signal.aborted) return;
           resetAccount();
           setConfig(saved);
+          setBooting(true);
           setPhase("checking");
           setNotice("Terminal connected.");
           return;
@@ -1051,6 +1101,128 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       setCommandCursor(0);
     }
   }
+  async function composeCatalog(entity, editing = false) {
+    await task(async () => {
+      const row = editing ? await api(`/${entity}s/${route.id}`) : {};
+      if (editing && row.user_id !== user.id)
+        throw Error("Only the owner can edit this publication.");
+      const topics = itemsOf(await api("/topics")).map((t) => [t.id, t.name]);
+      const values = initialCatalog(entity, row);
+      if (!topics.some(([id]) => id === values.topic))
+        values.topic = topics[0]?.[0] || "web";
+      openForm({
+        kind: "catalog",
+        entity,
+        entityId: row.id,
+        revision: row.revision,
+        existing: row,
+        title: (editing ? "Edit your " : "Create a ") + entity,
+        topics,
+        values,
+      });
+    });
+  }
+  async function catalogFilter() {
+    await task(async () => {
+      const entity = route.view === "projects" ? "project" : "event";
+      const topics = itemsOf(await api("/topics")).map((t) => [t.id, t.name]);
+      openForm({
+        kind: "catalogFilter",
+        entity,
+        title: "Filter " + route.view,
+        topics,
+        values: {
+          query: route.query || "",
+          topic: route.topic || "",
+          stage: route.stage || "",
+          author: route.author || "",
+          status: route.status || "",
+          date: route.date || "",
+          timezone: route.timezone || viewerZone(),
+          mine: route.mine || "",
+          order: route.order || (entity === "project" ? "newest" : "earliest"),
+        },
+      });
+    });
+  }
+  function catalogAction(id) {
+    const row = current?.project || current?.event;
+    if (!row) return;
+    if (id === "edit") {
+      composeCatalog(route.view, true);
+      return;
+    }
+    if (id === "conversation") {
+      navigate({ view: "post", id: row.post_id, tab: "overview", page: 1 });
+      return;
+    }
+    if (id === "calendar") {
+      openForm({
+        kind: "calendar",
+        eventId: row.id,
+        title: "Export calendar",
+        values: { path: `devdevian-event-${row.id}.ics` },
+      });
+      return;
+    }
+    if (id === "attend") {
+      const attending = !row.viewer_attending;
+      askConfirm(
+        attending ? "Attend this event?" : "Leave this event?",
+        row.title,
+        () =>
+          task(async () => {
+            await api(`/events/${row.id}/attendance`, {
+              method: "PUT",
+              body: { attending },
+            });
+            invalidate(
+              attending
+                ? "You're attending. Your browser account sees the same update."
+                : "You left the event.",
+            );
+          }),
+      );
+      return;
+    }
+    if (id === "lifecycle") {
+      if (row.user_id !== user.id) {
+        setError("Only the organizer can manage this event.");
+        return;
+      }
+      const action = row.cancelled_at ? "restore" : "cancel";
+      askConfirm(
+        action === "cancel" ? "Cancel your event?" : "Restore your event?",
+        "Attendees will receive the event update.",
+        () =>
+          task(async () => {
+            await api(`/events/${row.id}/lifecycle`, {
+              method: "POST",
+              body: { action, revision: row.revision },
+            });
+            invalidate("Event updated.");
+          }),
+      );
+      return;
+    }
+    const target =
+      id === "website"
+        ? row.url
+        : id === "source"
+          ? row.repo
+          : id === "meeting"
+            ? row.url
+            : config.origin +
+              (route.view === "project"
+                ? "/app#post/" + row.post_id
+                : "/app#events/" + row.id);
+    try {
+      openBrowser(webURL(target));
+      setNotice("Opened in your browser.");
+    } catch (error) {
+      setError(error.message);
+    }
+  }
   function openAppearance() {
     openForm({
       kind: "appearance",
@@ -1062,6 +1234,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     );
   }
   function openForm(next) {
+    setBooting(false);
     setForm({
       ...next,
       draftId: next.draftId || randomBytes(32).toString("hex"),
@@ -1225,6 +1398,28 @@ function App({ initialConfig, flags, root, initialAppearance }) {
   }
   async function prepare() {
     if (!form) return;
+    if (form.kind === "catalogFilter") {
+      await task(async () => {
+        const values = validateFilter(form.values);
+        setForm(null);
+        navigate({ view: form.entity + "s", ...values, page: 1 });
+      });
+      return;
+    }
+    if (form.kind === "calendar") {
+      await task(async () => {
+        const path = await saveCalendar(
+          api,
+          root,
+          form.eventId,
+          form.values.path,
+        );
+        setForm(null);
+        setFocus("content");
+        setNotice("Calendar saved: " + clean(path));
+      });
+      return;
+    }
     if (form.kind === "appearance") {
       await task(async () => {
         const saved = await saveAppearance(form.values);
@@ -1263,6 +1458,23 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         navigate({ view: "post", id, tab: "overview", page: 1 });
         return;
       }
+      if (form.kind === "catalog") {
+        if (form.catalogProgress?.uncertain)
+          throw Error(
+            "Publication outcome is unknown. Check your projects/events before creating another copy. Keep this draft for reference.",
+          );
+        const plan = await prepareCatalog(api, root, form);
+        setPreview({
+          catalog: plan,
+          payload: plan.payload,
+          title: form.title,
+          method: form.entityId ? "PATCH" : "POST",
+          url: `/${form.entity}s`,
+        });
+        setScroll(0);
+        setYes(false);
+        return;
+      }
       let payload,
         method = "POST",
         url,
@@ -1354,10 +1566,22 @@ function App({ initialConfig, flags, root, initialAppearance }) {
   async function publish() {
     if (!preview) return;
     await task(async () => {
-      const response = await api(preview.url, {
-        method: preview.method,
-        body: preview.payload,
-      });
+      let working = form;
+      const response = preview.catalog
+        ? await publishCatalog(
+            api,
+            preview.catalog,
+            form.catalogProgress,
+            async (progress) => {
+              working = { ...working, catalogProgress: progress };
+              setForm(working);
+              await queueDraft(() => drafts.save(working));
+            },
+          )
+        : await api(preview.url, {
+            method: preview.method,
+            body: preview.payload,
+          });
       cache.current.clear();
       let localWarning = "";
       try {
@@ -1369,7 +1593,9 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       setPreview(null);
       setForm(null);
       setScroll(0);
-      if (preview.url === "/posts")
+      if (preview.catalog)
+        navigate({ view: form.entity, id: response.id, page: 1 });
+      else if (preview.url === "/posts")
         navigate({ view: "post", id: response.id, tab: "overview", page: 1 });
       else if (preview.url === "/communities")
         navigate({ view: "community", id: response.id, page: 1 });
@@ -1387,6 +1613,11 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     });
   }
   async function openSelected() {
+    if (route.view === "projects" || route.view === "events") {
+      if (selected)
+        navigate({ view: route.view.slice(0, -1), id: selected.id, page: 1 });
+      return;
+    }
     if (route.view === "community" && !current?.community?.is_member) return;
     const item = selected;
     if (!item) return;
@@ -1627,6 +1858,10 @@ function App({ initialConfig, flags, root, initialAppearance }) {
   }
   function runAction(id) {
     setActionIndex(null);
+    if (id?.startsWith("catalog-")) {
+      catalogAction(id.slice(8));
+      return;
+    }
     if (id === "read") {
       if (current?.post) {
         setReading(selected);
@@ -1685,6 +1920,10 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         );
         return;
       }
+      if (parsed.command === "project" || parsed.command === "event") {
+        navigate({ view: parsed.command, id: parsed.arg, page: 1 });
+        return;
+      }
       if (parsed.command === "appearance") {
         openAppearance();
         return;
@@ -1702,14 +1941,16 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       navigate({
         view: parsed.command,
         page: 1,
-        ...(parsed.command === "search" ? { query: parsed.arg } : {}),
+        ...(["search", "projects", "events"].includes(parsed.command)
+          ? { query: parsed.arg }
+          : {}),
       });
     } catch (e) {
       setError(e.message);
     }
   }
   function askQuit() {
-    if (form?.kind === "appearance") {
+    if (["appearance", "catalogFilter", "calendar"].includes(form?.kind)) {
       exit();
       return;
     }
@@ -1772,6 +2013,14 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         setDevice(null);
         return;
       }
+      if (phase === "checking") {
+        if (input === "q") exit();
+        else if (error && (keyEvent.return || input === "r" || input === "R")) {
+          setError("");
+          setAuthVersion((v) => v + 1);
+        }
+        return;
+      }
       if (input === "q") exit();
       else if (keyEvent.return && !busy.current) {
         if (phase === "pending" && device) openBrowser(device.verification_uri);
@@ -1848,6 +2097,22 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       return;
     }
     if (form) {
+      if (keyEvent.ctrl && input === "o" && form.kind === "catalog") {
+        const active = fieldsFor(form)[field];
+        if (["logo", "banner", "screenshots"].includes(active?.key)) {
+          setPicker({ mediaKey: active.key });
+          return;
+        }
+      }
+      if (
+        ["catalogFilter", "calendar"].includes(form.kind) &&
+        keyEvent.escape
+      ) {
+        setForm(null);
+        setFocus("content");
+        setError("");
+        return;
+      }
       if (form.kind === "appearance" && keyEvent.escape) {
         setForm(null);
         setFocus("content");
@@ -1927,6 +2192,14 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         return;
       }
       if (keyEvent.return && !active.multiline) {
+        if (
+          form.kind === "catalog" &&
+          ["logo", "banner", "screenshots"].includes(active.key) &&
+          !form.values[active.key]
+        ) {
+          setPicker({ mediaKey: active.key });
+          return;
+        }
         if (active.key === "file" && !form.values.file) {
           setPicker("files");
           return;
@@ -2012,6 +2285,17 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       setReviewFocus((v) => (v === "code" ? "notes" : "code"));
       return;
     }
+    if (
+      (input === "f" || input === "F") &&
+      ["projects", "events"].includes(route.view)
+    ) {
+      catalogFilter();
+      return;
+    }
+    if (input === "j" && route.view === "event") {
+      catalogAction("attend");
+      return;
+    }
     if (
       reviewing &&
       (input === "f" || input === "F") &&
@@ -2077,7 +2361,8 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     const prose =
       route.view === "help" ||
       (route.view === "post" && (!route.tab || route.tab === "overview")) ||
-      (route.view === "community" && !current?.community?.is_member);
+      (route.view === "community" && !current?.community?.is_member) ||
+      ["project", "event"].includes(route.view);
     if (
       keyEvent.upArrow ||
       keyEvent.downArrow ||
@@ -2149,6 +2434,10 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       return;
     }
     if (input === "n") {
+      if (["projects", "events"].includes(route.view)) {
+        composeCatalog(route.view.slice(0, -1));
+        return;
+      }
       if (route.view === "communities")
         openForm({
           kind: "community",
@@ -2177,6 +2466,10 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       return;
     }
     if (input === "e" || input === "E") {
+      if (["project", "event"].includes(route.view)) {
+        composeCatalog(route.view, true);
+        return;
+      }
       editSelected();
       return;
     }
@@ -2233,9 +2526,33 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       root,
       width,
       height: bodyHeight,
-      initial: picker,
+      initial: picker.mediaKey ? "files" : picker,
+      media: !!picker.mediaKey,
       onCancel: () => setPicker(null),
       onSelect: (source) => {
+        if (picker.mediaKey) {
+          const key = picker.mediaKey;
+          setForm((old) => ({
+            ...old,
+            values: {
+              ...old.values,
+              [key]:
+                key === "screenshots"
+                  ? [
+                      old.values[key] === "-" ? "" : old.values[key],
+                      source.path,
+                    ]
+                      .filter(Boolean)
+                      .join("\n")
+                  : source.path,
+            },
+          }));
+          setPicker(null);
+          setNotice(
+            "Image selected locally. It is uploaded only after confirmation.",
+          );
+          return;
+        }
         setForm((old) => ({
           ...old,
           source,
@@ -2257,44 +2574,82 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       },
     });
   else if (phase !== "ready") {
-    const lines = [
-      "A place for curious developers.",
-      "Your conversations, without leaving the terminal.",
-      "",
-      ...(phase === "pending" && device
+    const statusLines =
+      phase === "pending" && device
         ? [
             "Confirm this code: " + device.user_code,
-            "Waiting for your approval " + spin,
             device.verification_uri,
-            "Enter reopens the browser · Esc cancels",
+            "Waiting for your approval...",
           ]
         : phase === "checking"
-          ? ["Opening your workspace " + spin]
+          ? error
+            ? ["Connection could not be completed.", error]
+            : ["Connecting to Devdevian..."]
           : [
               "Sign in with your existing Devdevian account.",
-              "",
-              "Enter connects this terminal through your browser.",
               "Google, GitHub and email sign-in stay on the website.",
-              "",
-              "Q exits.",
-            ]),
-    ];
+            ];
+    const footer =
+      phase === "pending"
+        ? ["Enter reopens the browser · Esc cancels"]
+        : phase === "checking"
+          ? [error ? "R or Enter retries · Ctrl+C exits" : "Ctrl+C exits"]
+          : [
+              "Enter connects this terminal through your browser.",
+              "Q or Ctrl+C exits.",
+            ];
     center = h(
       Box,
       {
         borderStyle: colors.frame,
         borderColor: colors.purple,
         flexDirection: "column",
-        paddingX: 2,
-        paddingY: 1,
+        paddingX: 1,
         height: bodyHeight,
         overflow: "hidden",
       },
-      h(Text, { bold: true, color: colors.purple }, "YOUR DEVELOPER SPACE"),
-      h(FrameRows, {
-        rows: lines.flatMap((line) => wrap(line, width - 8)),
-        width: width - 8,
-        height: Math.max(1, bodyHeight - 5),
+      h(DeviPanel, {
+        width: Math.max(1, width - 4),
+        height: Math.max(1, bodyHeight - 2),
+        message:
+          effectiveAppearance.welcome === "off"
+            ? ""
+            : phase === "checking"
+              ? "Devi missed you."
+              : "Devi saved you a seat.",
+        status: statusLines,
+        footer,
+        show: effectiveAppearance.welcome === "on",
+        animate: phase !== "auth" && !error,
+        motion: effectiveAppearance.motion,
+      }),
+    );
+  } else if (
+    booting &&
+    !current &&
+    effectiveAppearance.welcome === "on" &&
+    !error &&
+    !dialog &&
+    !form &&
+    !picker
+  ) {
+    center = h(
+      Box,
+      {
+        borderStyle: colors.frame,
+        borderColor: colors.purple,
+        paddingX: 1,
+        height: bodyHeight,
+        overflow: "hidden",
+      },
+      h(DeviPanel, {
+        width: Math.max(1, width - 4),
+        height: Math.max(1, bodyHeight - 2),
+        message: "Devi missed you.",
+        status: ["Loading your " + labelOf(route).toLowerCase() + "..."],
+        footer: ["Ctrl+C exits"],
+        motion: effectiveAppearance.motion,
+        animate: true,
       }),
     );
   } else if (dialog) {
@@ -2361,8 +2716,29 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       const raw = [
         "AUDIENCE · " + audience,
         "",
-        ...(payload.title ? [payload.title, ""] : []),
+        ...(payload.title || payload.name
+          ? [payload.title || payload.name, ""]
+          : []),
         payload.body || payload.reason || payload.description || "",
+        ...(preview.catalog
+          ? [
+              "",
+              ...Object.entries(payload)
+                .filter(([key]) => !["description", "details"].includes(key))
+                .map(([key, value]) => `${key}: ${value}`),
+              "",
+              "DETAILS",
+              JSON.stringify(payload.details, null, 2),
+              "",
+              "IMAGES TO UPLOAD",
+              ...(preview.catalog.files.length
+                ? preview.catalog.files.map(
+                    (file) =>
+                      `${file.path} · ${file.mime} · ${file.size} bytes`,
+                  )
+                : ["No new images"]),
+            ]
+          : []),
         ...(payload.code ? ["", "CODE TO PUBLISH", payload.code] : []),
         ...(payload.review_focus
           ? ["", "REVIEW FOCUS", payload.review_focus]
@@ -2405,7 +2781,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         width: contentWidth,
         height: contentHeight,
       });
-    else if (loading && !current)
+    else if ((loading || booting) && !current)
       body = h(
         Text,
         { color: colors.muted },
@@ -2500,30 +2876,49 @@ function App({ initialConfig, flags, root, initialAppearance }) {
           height: contentHeight,
           offset: Math.min(scroll, Math.max(0, lines.length - contentHeight)),
         });
-      else if (!current?.items?.length)
-        body = h(
-          Box,
-          { flexDirection: "column", paddingTop: 1 },
-          h(
-            Text,
-            { color: colors.text },
-            route.view === "search"
-              ? "Find your next useful conversation."
-              : error
-                ? "Could not open this view."
-                : "Nothing here yet.",
-          ),
-          h(
-            Text,
-            { color: colors.muted },
-            error
-              ? "Press Shift+R to retry."
-              : route.view === "feed"
-                ? "N starts a conversation. A asks a question."
-                : "Use / to search or Tab to explore another section.",
-          ),
-        );
-      else {
+      else if (!current?.items?.length) {
+        const messages = {
+          inbox: [
+            "You're all caught up.",
+            "Replies, mentions and review updates will appear here.",
+          ],
+          drafts: [
+            "No local drafts yet.",
+            "Start writing to save a private draft on this device.",
+          ],
+          communities: [
+            "Find your people.",
+            "Use / to search or N to create a private community.",
+          ],
+          feed: [
+            "Nothing here yet.",
+            "N starts a conversation. A asks a question.",
+          ],
+          search: route.query
+            ? [
+                "No conversations matched your search.",
+                "Try fewer words or a different phrase.",
+              ]
+            : [
+                "Find your next useful conversation.",
+                "Press / and type /search followed by your query.",
+              ],
+        };
+        const message = messages[route.view] || [
+          "Nothing here yet.",
+          "Use / to search or Tab to explore another section.",
+        ];
+        body = h(DeviPanel, {
+          width: contentWidth,
+          height: contentHeight,
+          message: message[0],
+          status: [message[1]],
+          show:
+            effectiveAppearance.welcome === "on" &&
+            Object.hasOwn(messages, route.view),
+          motion: effectiveAppearance.motion,
+        });
+      } else {
         const visible = Math.max(1, Math.floor(contentHeight / stride)),
           first = Math.max(0, index - visible + 1),
           rows = listRows(
@@ -2702,27 +3097,31 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     );
   }
   const hint =
-    form?.kind === "appearance"
-      ? "← → choose · Tab next · Ctrl+S save · Esc cancel · 0 default preview"
-      : actionIndex !== null
-        ? "Actions are scoped to the selected item · Esc closes"
-        : reviewing && !form && !preview && !reading
-          ? "W code / discussion · Space select · C comment · X actions · F filter"
-          : picker
-            ? "Project files stay local until publication is confirmed"
-            : reading
-              ? "↑↓ scroll · R reply · E edit · D delete · Esc close"
-              : preview
-                ? "← → choose · Enter confirm · Esc edit"
-                : form
-                  ? "Tab field · Ctrl+E editor · Ctrl+O files · Ctrl+G diff · Ctrl+S preview"
-                  : phase !== "ready"
-                    ? "Enter connect / open browser · Ctrl+C exit"
-                    : route.view === "feedback"
-                      ? "↑↓ select · R reply · E edit · D delete · S resolve · ! report"
-                      : route.view === "post"
-                        ? "←→ tabs · ↑↓ select · R reply · E edit · D delete · Space read"
-                        : "↑↓ select · Enter open · Tab sections · [ ] pages · N new · / search";
+    ["projects", "events"].includes(route.view) && !form && !preview && !picker
+      ? "↑↓ select · Enter open · F filters · N new · [ ] pages · / search"
+      : ["project", "event"].includes(route.view) && !form && !preview
+        ? "↑↓ scroll · X actions · E edit your publication · Esc back"
+        : form?.kind === "appearance"
+          ? "← → choose · Tab next · Ctrl+S save · Esc cancel · 0 default preview"
+          : actionIndex !== null
+            ? "Actions are scoped to the selected item · Esc closes"
+            : reviewing && !form && !preview && !reading
+              ? "W code / discussion · Space select · C comment · X actions · F filter"
+              : picker
+                ? "Project files stay local until publication is confirmed"
+                : reading
+                  ? "↑↓ scroll · R reply · E edit · D delete · Esc close"
+                  : preview
+                    ? "← → choose · Enter confirm · Esc edit"
+                    : form
+                      ? "Tab field · Ctrl+E editor · Ctrl+O files · Ctrl+G diff · Ctrl+S preview"
+                      : phase !== "ready"
+                        ? "Enter connect / open browser · Ctrl+C exit"
+                        : route.view === "feedback"
+                          ? "↑↓ select · R reply · E edit · D delete · S resolve · ! report"
+                          : route.view === "post"
+                            ? "←→ tabs · ↑↓ select · R reply · E edit · D delete · Space read"
+                            : "↑↓ select · Enter open · Tab sections · [ ] pages · N new · / search";
   return h(
     ThemeContext.Provider,
     { value: colors },