basis-design 0.1.0 → 0.2.0

package/src/shell/ExportDialog.tsx

@@ -2,8 +2,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import type { Design } from "../../shared/design.ts";
 import type { ClientMessage, ExportWriteResult } from "../../shared/protocol.ts";
 import { exportCss, exportJson, exportTailwind } from "../../shared/tokens.ts";
+import { BrowseButton } from "./FolderField.tsx";
 import { readPref, writePref } from "./prefs.ts";
 import styles from "./Shell.module.css";
+import { VerifyKit, type VerifyKitProps } from "./VerifyKit.tsx";
 
 const FORMATS = [
   { id: "css", label: "CSS variables", file: "tokens.css", type: "text/css", build: exportCss },
@@ -11,7 +13,7 @@ const FORMATS = [
   { id: "json", label: "JSON", file: "design-system.json", type: "application/json", build: exportJson },
 ] as const;
 
-type Tab = "kit" | (typeof FORMATS)[number]["id"];
+type Tab = "kit" | "verify" | (typeof FORMATS)[number]["id"];
 
 interface ExportDialogProps {
   design: Design;
@@ -22,6 +24,7 @@ interface ExportDialogProps {
   result: ExportWriteResult | null;
   send: (message: ClientMessage) => void;
   onClose: () => void;
+  verify: Omit<VerifyKitProps, "workspace" | "send">;
 }
 
 /** The folder the kit was last written to, remembered per project so one never writes into another's. */
@@ -40,6 +43,7 @@ function StarterKit({
 }: Pick<ExportDialogProps, "workspace" | "problems" | "manifest" | "result" | "send">) {
   const [target, setTarget] = useState(() => readPref(targetPref(workspace)) ?? "");
   const [pending, setPending] = useState(false);
+  const [browseError, setBrowseError] = useState<string | null>(null);
   // Only show results of writes made while this dialog is open.
   const [stale] = useState(latest);
   const result = latest === stale ? null : latest;
@@ -103,13 +107,20 @@ function StarterKit({
             id="export-target"
             value={target}
             onChange={(event) => setTarget(event.target.value)}
-            placeholder="C:\Code\my-app\src\design-system"
+            placeholder="Browse, or paste the folder's path"
             spellCheck={false}
           />
+          <BrowseButton
+            title="Choose the folder to write the starter kit into"
+            start={target}
+            onPick={setTarget}
+            onError={setBrowseError}
+          />
           <button type="submit" className={styles.chromeButton} disabled={!target.trim() || pending}>
             {pending ? "Writing…" : "Write files"}
           </button>
         </div>
+        {browseError && <p className={styles.kitError}>{browseError}</p>}
         {result?.error && <p className={styles.kitError}>{result.error}</p>}
         {conflicts && (
           <div className={styles.kitConflicts}>
@@ -138,7 +149,16 @@ function StarterKit({
   );
 }
 
-export function ExportDialog({ design, workspace, problems, manifest, result, send, onClose }: ExportDialogProps) {
+export function ExportDialog({
+  design,
+  workspace,
+  problems,
+  manifest,
+  result,
+  send,
+  onClose,
+  verify,
+}: ExportDialogProps) {
   const dialog = useRef<HTMLDialogElement>(null);
   const [tab, setTab] = useState<Tab>("kit");
   const [copied, setCopied] = useState(false);
@@ -189,6 +209,9 @@ export function ExportDialog({ design, workspace, problems, manifest, result, se
           <button type="button" role="tab" aria-selected={tab === "kit"} onClick={() => setTab("kit")}>
             Starter kit
           </button>
+          <button type="button" role="tab" aria-selected={tab === "verify"} onClick={() => setTab("verify")}>
+            Verification kit
+          </button>
           {FORMATS.map((item) => (
             <button
               key={item.id}
@@ -203,11 +226,25 @@ export function ExportDialog({ design, workspace, problems, manifest, result, se
         </div>
         {tab === "kit" ? (
           <StarterKit workspace={workspace} problems={problems} manifest={manifest} result={result} send={send} />
+        ) : tab === "verify" ? (
+          <VerifyKit workspace={workspace} send={send} {...verify} />
         ) : (
           <pre className={styles.code}>{code}</pre>
         )}
         <footer className={styles.dialogFooter}>
-          {tab === "kit" ? (
+          {tab === "verify" ? (
+            <>
+              <span className={styles.muted}>basis-verify/ · takes a few seconds per screen</span>
+              <button
+                type="button"
+                className={styles.primaryButton}
+                disabled={verify.progress !== null}
+                onClick={() => send({ type: "verify-kit" })}
+              >
+                {verify.progress ? "Building…" : "Build .zip"}
+              </button>
+            </>
+          ) : tab === "kit" ? (
             <>
               <span className={styles.muted}>{manifest ? `${manifest.folder}.zip` : ""}</span>
               <a className={styles.primaryButton} href="/export/starter-kit.zip" download>

package/src/shell/FolderField.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useState } from "react";
+import styles from "./Shell.module.css";
+
+/*
+ * Choosing a folder without typing its path: the operating system's own folder dialog, opened by the Basis server
+ * (it runs on this computer), and the git repos it finds in the usual places for code.
+ */
+
+async function api<T>(path: string, body: object = {}): Promise<T> {
+  const response = await fetch(path, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) throw new Error(`Basis answered ${response.status}`);
+  return (await response.json()) as T;
+}
+
+interface BrowseButtonProps {
+  /** The title of the system's folder dialog. */
+  title: string;
+  /** Where the dialog starts; the user's home folder when empty or missing. */
+  start: string;
+  onPick: (path: string) => void;
+  onError: (message: string | null) => void;
+}
+
+/** Opens the system's folder dialog; the folder the user chooses fills the field. */
+export function BrowseButton({ title, start, onPick, onError }: BrowseButtonProps) {
+  const [open, setOpen] = useState(false);
+  const browse = async () => {
+    setOpen(true);
+    onError(null);
+    try {
+      const answer = await api<{ path: string | null; error?: string }>("/api/pick-folder", { title, start });
+      if (answer.path) onPick(answer.path);
+      if (answer.error) onError(answer.error);
+    } catch (error) {
+      onError((error as Error).message);
+    } finally {
+      setOpen(false);
+    }
+  };
+  return (
+    <button type="button" className={styles.chromeButton} onClick={() => void browse()} disabled={open}>
+      {open ? "Choose in the dialog…" : "Browse…"}
+    </button>
+  );
+}
+
+interface RepoSuggestion {
+  name: string;
+  dir: string;
+}
+
+interface FolderFieldProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (path: string) => void;
+  placeholder: string;
+  /** The title of the system's folder dialog. */
+  dialogTitle: string;
+  /** Offers the git repos found on this computer, the most recently used first. */
+  suggestRepos?: boolean;
+  autoFocus?: boolean;
+}
+
+/** A folder path: typed or pasted, chosen in the system's dialog, or picked from the repos Basis found. */
+export function FolderField({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  dialogTitle,
+  suggestRepos = false,
+  autoFocus,
+}: FolderFieldProps) {
+  const [error, setError] = useState<string | null>(null);
+  const [repos, setRepos] = useState<RepoSuggestion[]>([]);
+
+  useEffect(() => {
+    if (!suggestRepos) return;
+    let current = true;
+    api<{ repos: RepoSuggestion[] }>("/api/repos")
+      .then((answer) => current && setRepos(answer.repos))
+      .catch(() => {});
+    return () => {
+      current = false;
+    };
+  }, [suggestRepos]);
+
+  return (
+    <>
+      <label htmlFor={id}>{label}</label>
+      <div className={styles.folderRow}>
+        <input
+          id={id}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={placeholder}
+          spellCheck={false}
+          autoComplete="off"
+          autoFocus={autoFocus}
+        />
+        <BrowseButton title={dialogTitle} start={value} onPick={onChange} onError={setError} />
+      </div>
+      {error && <p className={styles.kitError}>{error}</p>}
+      {repos.length > 0 && (
+        <div className={styles.repoSuggestions} role="group" aria-label="Repos on this computer">
+          <span className={styles.muted}>Repos on this computer</span>
+          <div>
+            {repos.slice(0, 8).map((repo) => (
+              <button
+                key={repo.dir}
+                type="button"
+                className={styles.repoChip}
+                aria-pressed={value === repo.dir}
+                title={repo.dir}
+                onClick={() => onChange(repo.dir)}
+              >
+                {repo.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/shell/ProjectMenu.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useId, useRef, useState } from "react";
-import type { ClientMessage, ProjectEntry } from "../../shared/protocol.ts";
+import type { ClientMessage, ProjectEntry, TemplateUpdate } from "../../shared/protocol.ts";
+import { FolderField } from "./FolderField.tsx";
 import styles from "./Shell.module.css";
 
 interface ProjectMenuProps {
@@ -9,6 +10,8 @@ interface ProjectMenuProps {
   agentBusy: boolean;
   /** The server's answer to the last failed project request. */
   error: { message: string } | null;
+  /** A newer starter template the open project can bring in. */
+  templateUpdate: TemplateUpdate | null;
   send: (message: ClientMessage) => void;
 }
 
@@ -18,7 +21,7 @@ type Dialog = "create" | "open" | "repo" | null;
  * The open project, where the brand used to be, with the list of projects:
  * switch to one, start a new one, or open a workspace folder from elsewhere.
  */
-export function ProjectMenu({ project, projects, agentBusy, error, send }: ProjectMenuProps) {
+export function ProjectMenu({ project, projects, agentBusy, error, templateUpdate, send }: ProjectMenuProps) {
   const [open, setOpen] = useState(false);
   const [dialog, setDialog] = useState<Dialog>(null);
   /** The error when the last request went out; a different one (even with the same text) is the answer to it. */
@@ -66,6 +69,11 @@ export function ProjectMenu({ project, projects, agentBusy, error, send }: Proje
       >
         <span className={styles.brandMark} aria-hidden />
         <span className={styles.projectName}>{project?.name ?? "Basis"}</span>
+        {templateUpdate && (
+          <span className={styles.updateDot}>
+            <span className="visually-hidden">, starter template update available</span>
+          </span>
+        )}
         <svg viewBox="0 0 16 16" aria-hidden>
           <path d="m4.5 6.5 3.5 3.5 3.5-3.5" />
         </svg>
@@ -154,6 +162,34 @@ export function ProjectMenu({ project, projects, agentBusy, error, send }: Proje
               </div>
             </div>
           )}
+          {templateUpdate && (
+            <div className={styles.projectRepo}>
+              <span className={styles.projectRepoHint}>
+                Basis' starter components have improved since this project began. Files nobody changed are already up to
+                date; the agent brings the improvements into{" "}
+                {templateUpdate.files.length === 1
+                  ? "the one changed file"
+                  : `${templateUpdate.files.length} changed files`}
+                , in a review.
+              </span>
+              <div className={styles.projectRepoActions}>
+                <button
+                  type="button"
+                  className={styles.chromeButton}
+                  disabled={agentBusy}
+                  onClick={() => {
+                    setOpen(false);
+                    send({ type: "template-update" });
+                  }}
+                >
+                  Bring them in
+                </button>
+                <button type="button" className={styles.chromeButton} onClick={() => send({ type: "template-skip" })}>
+                  Skip
+                </button>
+              </div>
+            </div>
+          )}
           <div className={styles.projectActions}>
             <button
               type="button"
@@ -255,7 +291,7 @@ function ProjectDialog({ mode, current, error, onSubmit, onClose }: ProjectDialo
             <h2>{mode === "create" ? "New project" : mode === "repo" ? "Link a product repo" : "Open a folder"}</h2>
             <p>
               {mode === "create"
-                ? "A design system of its own, with its own history and chat. It lives in Basis' workspaces folder."
+                ? "A design system of its own, with its own history and chat. It is saved in ~/.basis/workspaces (or BASIS_HOME)."
                 : mode === "repo"
                   ? `The repo ${current?.name ?? "this project"} designs for. The agent reads it to match the product's look, components and terms; it never writes there.`
                   : "A Basis workspace anywhere on this computer, or an empty or new folder (inside a product repo, say) for Basis to set up."}
@@ -306,32 +342,33 @@ function ProjectDialog({ mode, current, error, onSubmit, onClose }: ProjectDialo
                 </label>
               </fieldset>
               {fromRepo && (
-                <>
-                  <label htmlFor="project-repo">Repo folder</label>
-                  <input
-                    id="project-repo"
-                    value={dir}
-                    onChange={(event) => setDir(event.target.value)}
-                    placeholder="C:\\Code\\my-app"
-                    spellCheck={false}
-                    autoComplete="off"
-                  />
-                </>
+                <FolderField
+                  id="project-repo"
+                  label="Repo folder"
+                  value={dir}
+                  onChange={setDir}
+                  placeholder="Browse, pick a repo below, or paste its path"
+                  dialogTitle="Choose the product repo"
+                  suggestRepos
+                />
               )}
             </>
           ) : (
             <>
-              <label htmlFor="project-dir">{mode === "repo" ? "Repo folder" : "Folder"}</label>
-              <input
+              <FolderField
                 id="project-dir"
+                label={mode === "repo" ? "Repo folder" : "Folder"}
                 value={dir}
-                onChange={(event) => setDir(event.target.value)}
-                placeholder={mode === "repo" ? "C:\\Code\\my-app" : "C:\\Code\\my-app\\design-system"}
-                spellCheck={false}
-                autoComplete="off"
+                onChange={setDir}
+                placeholder={
+                  mode === "repo" ? "Browse, pick a repo below, or paste its path" : "Browse, or paste its path"
+                }
+                dialogTitle={
+                  mode === "repo" ? "Choose the product repo" : "Choose a Basis workspace or an empty folder"
+                }
+                suggestRepos={mode === "repo"}
                 autoFocus
               />
-              <p className={styles.muted}>Use the full path.</p>
               {mode === "repo" && (
                 <label className={styles.projectCheck}>
                   <input type="checkbox" checked={bringIn} onChange={(event) => setBringIn(event.target.checked)} />