@shortlink-org/portolan 0.1.0 → 0.2.1

package/src/pages/Settings.tsx

@@ -1,6 +1,6 @@
 import { useDocumentTitle } from "../app/title";
 import { createContext, useCallback, useContext, useEffect, useState } from "react";
-import { Link } from "react-router";
+import { Link, Navigate, NavLink, Route, Routes } from "react-router";
 import {
   ArrowLeft,
   Box,
@@ -10,24 +10,14 @@ import {
   FolderGit2,
   KeyRound,
   LoaderCircle,
-  Moon,
   Play,
   Plus,
-  Rows2,
-  Rows4,
   ShieldCheck,
-  Sun,
   Terminal,
   Trash2,
   X,
 } from "lucide-react";
 import { catalog, catalogSources } from "../data";
-import { useDensity } from "../app/density";
-import { useEditorStore } from "../components/EditorLink";
-import { Select } from "../components/Select";
-import { EDITORS } from "../lib/editor-link";
-import { parseEditor } from "../lib/editor-prefs";
-import { useTheme } from "../app/theme";
 import { useToastStore } from "../app/toast";
 import { absoluteTime, plural, relativeTime } from "../lib/format";
 import { setupInfo as staticSetupInfo } from "../lib/setup-info";
@@ -60,8 +50,8 @@ import { paths } from "../routes";
 import { Empty, SectionTitle } from "../components/PageHeader";
 import { Modal } from "../components/Overlay";
 import { MachineDocs } from "../components/MachineDocs";
-import { ChatSection } from "../chat/ChatSettings";
-import { BUILD as CHAT_BUILD } from "../chat/flags";
+import { DeliverySettings } from "./settings/DeliverySettings";
+import { PreferencesSettings } from "./settings/PreferencesSettings";
 
 type Health = "healthy" | "changed" | "failed" | "unchecked";
 
@@ -339,7 +329,7 @@ function ProjectCard({ project }: { project: SetupProject }) {
       </dl>
 
       <div className="mt-4 flex flex-wrap gap-1.5" aria-label="Active plugins">
-        {pluginNames.map((name) => <a key={name} href={`#plugin-${name}`} className="chip border-line-strong hover:border-accent hover:text-accent">{name}</a>)}
+        {pluginNames.map((name) => <Link key={name} to={`${paths.settingsPipeline()}#plugin-${name}`} className="chip border-line-strong hover:border-accent hover:text-accent">{name}</Link>)}
       </div>
 
       <details className="group mt-4 border-t border-line pt-3">
@@ -378,7 +368,9 @@ function Runtime({ plugin, icon = false }: { plugin: SetupPlugin; icon?: boolean
   const [Icon, tone, name] =
     plugin.runtime === "wasm"
       ? ([ShieldCheck, "text-verified", "WASM sandbox"] as const)
-      : ([Terminal, "text-declared", "host process"] as const);
+      : plugin.runtime === "host"
+        ? ([Terminal, "text-declared", "in the host"] as const)
+        : ([Terminal, "text-declared", "host process"] as const);
   return icon ? (
     <span className={tone} title={name}>
       <Icon size={14} aria-hidden />
@@ -469,7 +461,7 @@ function PluginsList() {
                     <div><div className="label mb-2">last run</div><PipelineSteps steps={runSteps} /></div>
                     <div className="space-y-4">
                       <div><div className="label mb-2">runtime</div><p className="mono"><Runtime plugin={plugin} /></p></div>
-                      <div><div className="label mb-2">used by</div>{plugin.projectIds.length > 0 ? <div className="flex flex-wrap gap-1.5">{plugin.projectIds.map((id) => <a key={id} href={`#project-${id}`} className="chip border-line-strong hover:border-accent hover:text-accent">{projectNames.get(id) ?? id}</a>)}</div> : <p className="mono text-muted">{plugin.stepCount > 0 ? "Estate-wide catalog" : "No pipeline step uses this plugin."}</p>}</div>
+                      <div><div className="label mb-2">used by</div>{plugin.projectIds.length > 0 ? <div className="flex flex-wrap gap-1.5">{plugin.projectIds.map((id) => <Link key={id} to={`${paths.settingsProjects()}#project-${id}`} className="chip border-line-strong hover:border-accent hover:text-accent">{projectNames.get(id) ?? id}</Link>)}</div> : <p className="mono text-muted">{plugin.stepCount > 0 ? "Estate-wide catalog" : "No pipeline step uses this plugin."}</p>}</div>
                       {outputs.length > 0 ? <div><div className="label mb-2">outputs</div><ul className="mono space-y-1 text-muted">{outputs.map((output) => <li key={output} className="truncate"><FileLink path={output} /></li>)}</ul></div> : null}
                     </div>
                   </div>
@@ -483,54 +475,6 @@ function PluginsList() {
   );
 }
 
-/**
- * Which editor the "edit ↗" links hand a file to. The links exist only in
- * local mode; the choice is offered everywhere, because a reader sets it once
- * and the static build they open tomorrow is the same browser.
- */
-function EditorChoice() {
-  const editor = useEditorStore((s) => s.editor);
-  const setEditor = useEditorStore((s) => s.set);
-  const options = EDITORS.map((e) => ({ value: e.id, label: e.name }));
-  return (
-    <div className="rounded-card border border-line p-card shadow-xs">
-      <div className="label mb-3">open source in</div>
-      <Select
-        value={editor}
-        options={options}
-        onChange={(value) => setEditor(parseEditor(value))}
-        label="Editor for source links"
-        menuWidth={200}
-      />
-      <p className="mono mt-2 text-muted">Used by the edit links in local mode.</p>
-    </div>
-  );
-}
-
-function Appearance() {
-  const { theme, toggle: toggleTheme } = useTheme();
-  const { density, toggle: toggleDensity } = useDensity();
-  return (
-    <div className="grid gap-grid sm:grid-cols-2 xl:grid-cols-3">
-      <div className="rounded-card border border-line p-card shadow-xs">
-        <div className="label mb-3">theme</div>
-        <div className="seg inline-flex" role="group" aria-label="Theme">
-          <button type="button" aria-pressed={theme === "dark"} onClick={() => theme !== "dark" && toggleTheme()} className={`flex items-center gap-1.5 ${theme === "dark" ? "is-on" : ""}`}><Moon size={15} aria-hidden /> dark</button>
-          <button type="button" aria-pressed={theme === "light"} onClick={() => theme !== "light" && toggleTheme()} className={`flex items-center gap-1.5 ${theme === "light" ? "is-on" : ""}`}><Sun size={15} aria-hidden /> light</button>
-        </div>
-      </div>
-      <div className="rounded-card border border-line p-card shadow-xs">
-        <div className="label mb-3">row density</div>
-        <div className="seg inline-flex" role="group" aria-label="Row density">
-          <button type="button" aria-pressed={density === "comfortable"} onClick={() => density !== "comfortable" && toggleDensity()} className={`flex items-center gap-1.5 ${density === "comfortable" ? "is-on" : ""}`}><Rows4 size={15} aria-hidden /> comfortable</button>
-          <button type="button" aria-pressed={density === "compact"} onClick={() => density !== "compact" && toggleDensity()} className={`flex items-center gap-1.5 ${density === "compact" ? "is-on" : ""}`}><Rows2 size={15} aria-hidden /> compact</button>
-        </div>
-      </div>
-      <EditorChoice />
-    </div>
-  );
-}
-
 const FIELD = "mono w-full rounded-control border border-line bg-canvas px-3 py-2 text-ink outline-none focus:border-accent";
 
 function Field({ label, value, onChange, placeholder, required = false }: { label: string; value: string; onChange: (value: string) => void; placeholder?: string; required?: boolean }) {
@@ -822,7 +766,7 @@ function Wizard({ open, onClose, onAdded, onRunStarted }: { open: boolean; onClo
           <div className="space-y-5">
             <div className={`rounded-control border px-3 py-3 ${trial ? "border-verified bg-surface" : finished?.status === "failed" ? "border-unresolved" : "border-line bg-surface"}`}>
               <div className="flex items-start gap-3">{trial ? <Check size={18} className="mt-0.5 shrink-0 text-verified" /> : finished?.status === "failed" ? <CircleAlert size={18} className="mt-0.5 shrink-0 text-unresolved" /> : <LoaderCircle size={18} className="mt-0.5 shrink-0 animate-spin text-accent" />}<div><div className="font-medium text-ink">{trial ? "Extraction succeeded — repository unchanged" : finished?.status === "failed" ? "Trial extraction failed" : activeStep ? `Running ${activeStep.plugin}` : "Creating an isolated workspace…"}</div><p className="mt-0.5 text-muted">{trial ? "These results came from real catalog fragments. Apply is now safe to continue." : "Portolan is running the selected extractors without writing to portolan.json or your project."}</p></div></div>
-              {trial?.previewUrl ? <a className="btn-accent mt-3 inline-flex" href={trial.previewUrl} target="_blank" rel="noreferrer">Open catalog preview ↗</a> : null}
+              {trial?.previewUrl ? <a className="product-primary mt-3 inline-flex" href={trial.previewUrl} target="_blank" rel="noreferrer">Open catalog preview ↗</a> : null}
               {trial?.previewError ? <p className="mt-2 text-declared">The extraction is valid, but the temporary site could not start: {trial.previewError}</p> : null}
               {!finished ? <><div className="mt-3 h-1.5 overflow-hidden rounded-full bg-canvas"><div className="h-full bg-accent transition-[width]" style={{ width: `${percent}%` }} /></div><div className="mono mt-1 text-right text-muted">{completedSteps.length} / {totalSteps || "?"} steps</div></> : null}
             </div>
@@ -837,12 +781,12 @@ function Wizard({ open, onClose, onAdded, onRunStarted }: { open: boolean; onClo
       </div>
       <div className="flex flex-wrap justify-end gap-2 border-t border-line px-5 py-4">
         <button type="button" className="tbtn" onClick={onClose} disabled={busy || trialRunning}>Cancel</button>
-        {stage === "source" ? <button key={repositoryError?.retryable ? "retry-inspection" : source} type="button" className="btn-accent" aria-label={repositoryError?.retryable ? credentialToken.trim() ? "Save token and retry" : "Retry inspection" : source === "external" ? "Inspect repository" : "Detect project"} onClick={() => void (repositoryError?.retryable ? credentialToken.trim() ? authenticateRepository() : retryInspection() : detect())} disabled={busy || (source === "local" ? !path.trim() : !repository.trim())}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : null} {repositoryError?.retryable ? credentialToken.trim() ? "Save token & retry" : "Retry inspection" : source === "external" ? "Inspect repository" : "Detect project"}</button> : null}
-        {stage === "scope" ? <button key={repositoryError?.retryable ? "retry-component" : "review-components"} type="button" className="btn-accent" aria-label={repositoryError?.retryable ? credentialToken.trim() ? "Save token and retry" : "Retry inspection" : `Review ${selectedComponents.length || "selected"} ${selectedComponents.length === 1 ? "component" : "components"}`} onClick={() => void (repositoryError?.retryable ? credentialToken.trim() ? authenticateRepository() : retryInspection() : reviewSelectedComponents())} disabled={busy || (!repositoryError?.retryable && !selectedComponents.length)}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} {repositoryError?.retryable ? credentialToken.trim() ? "Save token & retry" : "Retry inspection" : <>Review {selectedComponents.length || "selected"} {selectedComponents.length === 1 ? "component" : "components"}</>}</button> : null}
-        {stage === "configure" ? <button type="button" className="btn-accent" onClick={() => void runTrial()} disabled={busy || !draft?.plugins.length}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} Run trial extraction</button> : null}
+        {stage === "source" ? <button key={repositoryError?.retryable ? "retry-inspection" : source} type="button" className="product-primary" aria-label={repositoryError?.retryable ? credentialToken.trim() ? "Save token and retry" : "Retry inspection" : source === "external" ? "Inspect repository" : "Detect project"} onClick={() => void (repositoryError?.retryable ? credentialToken.trim() ? authenticateRepository() : retryInspection() : detect())} disabled={busy || (source === "local" ? !path.trim() : !repository.trim())}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : null} {repositoryError?.retryable ? credentialToken.trim() ? "Save token & retry" : "Retry inspection" : source === "external" ? "Inspect repository" : "Detect project"}</button> : null}
+        {stage === "scope" ? <button key={repositoryError?.retryable ? "retry-component" : "review-components"} type="button" className="product-primary" aria-label={repositoryError?.retryable ? credentialToken.trim() ? "Save token and retry" : "Retry inspection" : `Review ${selectedComponents.length || "selected"} ${selectedComponents.length === 1 ? "component" : "components"}`} onClick={() => void (repositoryError?.retryable ? credentialToken.trim() ? authenticateRepository() : retryInspection() : reviewSelectedComponents())} disabled={busy || (!repositoryError?.retryable && !selectedComponents.length)}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} {repositoryError?.retryable ? credentialToken.trim() ? "Save token & retry" : "Retry inspection" : <>Review {selectedComponents.length || "selected"} {selectedComponents.length === 1 ? "component" : "components"}</>}</button> : null}
+        {stage === "configure" ? <button type="button" className="product-primary" onClick={() => void runTrial()} disabled={busy || !draft?.plugins.length}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} Run trial extraction</button> : null}
         {stage === "trial" && trialRunning ? <button type="button" className="tbtn" onClick={() => trialRunId && void cancelGeneration(trialRunId)}>Cancel trial</button> : null}
-        {stage === "trial" && finished && !trial ? <button type="button" className="btn-accent" onClick={back}>Back to configuration</button> : null}
-        {stage === "trial" && trial ? pendingComponents.length > 0 ? <button type="button" className="btn-accent" onClick={() => void applyTrial(false)} disabled={busy}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} Add & review next</button> : <><button type="button" className="tbtn" onClick={() => void applyTrial(false)} disabled={busy}>Add without generating</button><button type="button" className="btn-accent" onClick={() => void applyTrial(true)} disabled={busy}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} Add & generate</button></> : null}
+        {stage === "trial" && finished && !trial ? <button type="button" className="product-primary" onClick={back}>Back to configuration</button> : null}
+        {stage === "trial" && trial ? pendingComponents.length > 0 ? <button type="button" className="product-primary" onClick={() => void applyTrial(false)} disabled={busy}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} Add & review next</button> : <><button type="button" className="tbtn" onClick={() => void applyTrial(false)} disabled={busy}>Add without generating</button><button type="button" className="product-primary" onClick={() => void applyTrial(true)} disabled={busy}>{busy ? <LoaderCircle size={15} className="animate-spin" /> : <Play size={15} />} Add & generate</button></> : null}
       </div>
     </Modal>
   );
@@ -878,55 +822,136 @@ function RunDialog({ runId, open, onClose, onFinished, onApply }: { runId: strin
         {preview ? <section className="mt-5"><div className="label mb-2">generated diff · {preview.totalFiles} {plural(preview.totalFiles, "file")}</div>{preview.files.length ? <div className="divide-y divide-line overflow-hidden rounded-control border border-line">{preview.files.map((file) => <details key={file.path} className="group"><summary className="flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-surface"><span className={`chip ${file.status === "removed" ? "status-unresolved" : file.status === "added" ? "status-verified" : "status-declared"}`}>{file.status}</span><span className="mono truncate text-ink">{file.path}</span><ChevronDown size={15} className="ml-auto shrink-0 text-muted transition-transform group-open:rotate-180" /></summary><pre className="mono max-h-80 overflow-auto whitespace-pre p-3 text-muted bg-surface">{file.diff || "Binary file changed"}</pre></details>)}</div> : <div className="rounded-control border border-line bg-surface px-3 py-3 text-muted">Generated documentation is already up to date.</div>}{preview.truncated ? <p className="mt-2 text-muted">Showing the first {preview.files.length} changed files.</p> : null}</section> : null}
         {logs.length ? <details className="mt-4"><summary className="cursor-pointer text-muted">Generator log · {logs.length} lines</summary><pre className="mono mt-2 max-h-48 overflow-auto whitespace-pre-wrap rounded-control bg-surface p-3 text-muted">{logs.map((event) => event.type === "log" ? event.message : "").join("\n")}</pre></details> : null}
       </div>
-      <div className="flex justify-end gap-2 border-t border-line px-5 py-4">{finished ? <><button type="button" className="tbtn" onClick={onClose}>{preview?.files.length ? "Cancel" : "Done"}</button>{preview?.files.length && finished.status === "ok" && runId ? <button type="button" className="btn-accent" onClick={() => onApply(runId)}><Play size={15} /> Apply changes</button> : null}</> : <button type="button" className="tbtn" onClick={() => runId && void cancelGeneration(runId)}>Cancel generation</button>}</div>
+      <div className="flex justify-end gap-2 border-t border-line px-5 py-4">{finished ? <><button type="button" className="tbtn" onClick={onClose}>{preview?.files.length ? "Cancel" : "Done"}</button>{preview?.files.length && finished.status === "ok" && runId ? <button type="button" className="product-primary" onClick={() => onApply(runId)}><Play size={15} /> Apply changes</button> : null}</> : <button type="button" className="tbtn" onClick={() => runId && void cancelGeneration(runId)}>Cancel generation</button>}</div>
     </Modal>
   );
 }
 
-function SettingsContent({ local, onAdd, onGenerate }: { local: boolean; onAdd: () => void; onGenerate: () => void }) {
+const SETTINGS_LINKS = [
+  ["Overview", paths.settings()],
+  ["Projects", paths.settingsProjects()],
+  ["Pipeline", paths.settingsPipeline()],
+  ["Delivery", paths.settingsDelivery()],
+  ["Preferences", paths.settingsPreferences()],
+] as const;
+
+function SettingsNav() {
+  return (
+    <nav className="mt-5 border-b border-line" aria-label="Settings sections">
+      <div className="tab-scroll flex overflow-x-auto">
+        {SETTINGS_LINKS.map(([label, to], index) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={index === 0}
+            className={({ isActive }) =>
+              `mono shrink-0 border-b-2 px-3 py-2 transition-colors ${
+                isActive
+                  ? "border-accent text-ink"
+                  : "border-transparent text-muted hover:text-ink"
+              }`
+            }
+          >
+            {label}
+          </NavLink>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+function OverviewSettings() {
   const setupInfo = useSetup();
   const active = setupInfo.plugins.filter((plugin) => plugin.stepCount > 0);
   return (
-    <div className="h-full overflow-y-auto p-gutter">
-      <div className="max-w-table">
-        <div className="flex flex-wrap items-start justify-between gap-3"><div><div className="flex items-center gap-2"><h1 className="text-lg font-semibold">Settings</h1>{local ? <span className="chip status-verified">local mode</span> : null}</div><p className="mt-1 max-w-prose text-muted">The projects, plugins and local preferences used by this catalog. {local ? "This local session can update portolan.json and preview generator output." : "Build configuration is read-only here and comes from portolan.json."}</p></div>{local ? <button type="button" className="btn-accent" onClick={onGenerate}><Play size={15} /> Preview generated diff</button> : null}</div>
-        <BuildHealth />
-
-        <div className="mt-4 grid grid-cols-2 gap-grid lg:grid-cols-4">
-          <Metric value={setupInfo.projects.length} label="project" />
-          <Metric value={active.length} label="active plugin" />
-          <Metric value={setupInfo.steps.length} label="pipeline step" />
-          <Metric value={catalogSources.length} label="catalog source" />
-        </div>
-
-        <section className="mt-section">
-          <SectionTitle right={local ? "editable in local mode" : "declared in portolan.json"}>Projects</SectionTitle>
-          {setupInfo.projects.length === 0 && !local ? <Empty>portolan.json names no projects — every input here is the estate's own</Empty> : <div className="grid gap-grid xl:grid-cols-2">{setupInfo.projects.map((project) => <ProjectCard key={project.id} project={project} />)}{local ? <AddProjectCard onClick={onAdd} /> : null}</div>}
-        </section>
-
-        <section className="mt-section">
-          <SectionTitle right={`${active.length} of ${setupInfo.plugins.length} active`}>Plugins</SectionTitle>
-          <PluginsList />
-          <p className="mono mt-2 text-muted">WASM runs without filesystem, network or environment access. A host process runs with the permissions of the build.</p>
-        </section>
+    <>
+      <BuildHealth />
+      <div className="mt-4 grid grid-cols-2 gap-grid lg:grid-cols-4">
+        <Metric value={setupInfo.projects.length} label="project" />
+        <Metric value={active.length} label="active plugin" />
+        <Metric value={setupInfo.steps.length} label="pipeline step" />
+        <Metric value={catalogSources.length} label="catalog source" />
+      </div>
+      <div className="mt-section grid gap-grid sm:grid-cols-2">
+        <Link to={paths.settingsProjects()} className="card">
+          <div className="font-semibold text-ink">Projects</div>
+          <p className="mt-1 text-muted">Sources, scopes and extraction coverage for {setupInfo.projects.length} {plural(setupInfo.projects.length, "project")}.</p>
+        </Link>
+        <Link to={paths.settingsPipeline()} className="card">
+          <div className="font-semibold text-ink">Pipeline</div>
+          <p className="mt-1 text-muted">Inspect {active.length} active {plural(active.length, "plugin")} and their generated outputs.</p>
+        </Link>
+        <Link to={paths.settingsDelivery()} className="card">
+          <div className="font-semibold text-ink">Delivery</div>
+          <p className="mt-1 text-muted">Install review checks and static catalog publishing for GitHub or GitLab.</p>
+        </Link>
+        <Link to={paths.settingsPreferences()} className="card">
+          <div className="font-semibold text-ink">Preferences</div>
+          <p className="mt-1 text-muted">Theme, row density, source editor and Ask the catalog.</p>
+        </Link>
+      </div>
+    </>
+  );
+}
 
-        <section className="mt-section"><SectionTitle right="stored in this browser">Appearance</SectionTitle><Appearance /></section>
+function ProjectsSettings({ local, onAdd }: { local: boolean; onAdd: () => void }) {
+  const setupInfo = useSetup();
+  return (
+    <section>
+      <SectionTitle right={local ? "editable in local mode" : "declared in portolan.json"}>Projects</SectionTitle>
+      {setupInfo.projects.length === 0 && !local ? <Empty>portolan.json names no projects — every input here is the estate's own</Empty> : <div className="grid gap-grid xl:grid-cols-2">{setupInfo.projects.map((project) => <ProjectCard key={project.id} project={project} />)}{local ? <AddProjectCard onClick={onAdd} /> : null}</div>}
+    </section>
+  );
+}
 
-        {CHAT_BUILD.built ? <section className="mt-section"><SectionTitle right="stored in this browser">Ask the catalog</SectionTitle><ChatSection /></section> : null}
+function PipelineSettings() {
+  const setupInfo = useSetup();
+  const active = setupInfo.plugins.filter((plugin) => plugin.stepCount > 0);
+  return (
+    <div className="space-y-section">
+      <section>
+        <SectionTitle right={`${active.length} of ${setupInfo.plugins.length} active`}>Plugins</SectionTitle>
+        <PluginsList />
+        <p className="mono mt-2 text-muted">WASM runs without network or environment access, and a generator without a filesystem. A host process runs with the permissions of the build; a plugin in the host is Portolan's own code doing what needs a socket, such as fetching another repository.</p>
+      </section>
+      <details className="rounded-card border border-line shadow-xs">
+        <summary className="cursor-pointer select-none px-4 py-3 font-semibold text-ink">Advanced build inputs</summary>
+        <div className="border-t border-line p-4">
+          <div className="label mb-2">catalog source patterns</div>
+          {setupInfo.sources.length === 0 ? <Empty>no source patterns declared</Empty> : <ul className="mono space-y-1 text-muted">{setupInfo.sources.map((source) => <li key={source}>{source}</li>)}</ul>}
+          <div className="label mt-5 mb-2">pipeline</div>
+          {setupInfo.steps.length === 0 ? <Empty>no pipeline steps declared</Empty> : <div className="space-y-1">{setupInfo.steps.map((step, index) => <div key={`${step.phase}:${step.plugin}:${step.input ?? "catalog"}:${index}`} className="mono grid gap-x-3 text-muted sm:grid-cols-[5rem_9rem_1fr]"><span>{step.phase}</span><span className="text-ink">{step.plugin}</span><span className="truncate" title={step.input ?? "merged catalog"}>{step.input ?? "merged catalog"} → {step.output}</span></div>)}</div>}
+          <div className="label mt-5 mb-2">generated documentation</div>
+          <MachineDocs />
+        </div>
+      </details>
+    </div>
+  );
+}
 
-        <details className="mt-section rounded-card border border-line shadow-xs">
-          <summary className="cursor-pointer select-none px-4 py-3 font-semibold text-ink">Advanced build inputs</summary>
-          <div className="border-t border-line p-4">
-            <div className="label mb-2">catalog source patterns</div>
-            {setupInfo.sources.length === 0 ? <Empty>no source patterns declared</Empty> : <ul className="mono space-y-1 text-muted">{setupInfo.sources.map((source) => <li key={source}>{source}</li>)}</ul>}
-            <div className="label mt-5 mb-2">pipeline</div>
-            {setupInfo.steps.length === 0 ? <Empty>no pipeline steps declared</Empty> : <div className="space-y-1">{setupInfo.steps.map((step, index) => <div key={`${step.phase}:${step.plugin}:${step.input ?? "catalog"}:${index}`} className="mono grid gap-x-3 text-muted sm:grid-cols-[5rem_9rem_1fr]"><span>{step.phase}</span><span className="text-ink">{step.plugin}</span><span className="truncate" title={step.input ?? "merged catalog"}>{step.input ?? "merged catalog"} → {step.output}</span></div>)}</div>}
-            <div className="label mt-5 mb-2">generated documentation</div>
-            <MachineDocs />
+function SettingsContent({ local, onAdd, onGenerate }: { local: boolean; onAdd: () => void; onGenerate: () => void }) {
+  return (
+    <div className="h-full overflow-y-auto p-gutter">
+      <div className="max-w-table">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <div className="flex items-center gap-2"><h1 className="text-lg font-semibold">Settings</h1>{local ? <span className="chip status-verified">local mode</span> : null}</div>
+            <p className="mt-1 max-w-prose text-muted">Configure projects, extraction, delivery automation and local preferences. {local ? "This local session can write reviewed changes." : "Build configuration is read-only here."}</p>
           </div>
-        </details>
-
-        <div className="mono mt-section flex items-center gap-2 pb-section text-muted"><Box size={14} aria-hidden />{local ? "Changes are written to portolan.json; generated files remain reviewable in git." : "Configuration is embedded at build time; changing it requires a new catalog build."}</div>
+          {local ? <button type="button" className="product-primary" onClick={onGenerate}><Play size={15} /> Preview generated diff</button> : null}
+        </div>
+        <SettingsNav />
+        <div className="mt-section">
+          <Routes>
+            <Route index element={<OverviewSettings />} />
+            <Route path="projects" element={<ProjectsSettings local={local} onAdd={onAdd} />} />
+            <Route path="pipeline" element={<PipelineSettings />} />
+            <Route path="delivery" element={<section><SectionTitle right={local ? "preview before writing" : "local mode required"}>Delivery presets</SectionTitle><DeliverySettings local={local} /></section>} />
+            <Route path="preferences" element={<PreferencesSettings />} />
+            <Route path="*" element={<Navigate to={paths.settings()} replace />} />
+          </Routes>
+        </div>
+        <div className="mono mt-section flex items-center gap-2 pb-section text-muted"><Box size={14} aria-hidden />{local ? "Changes are written only after preview; generated files remain reviewable in git." : "Configuration is embedded at build time; changing it requires a new catalog build."}</div>
       </div>
     </div>
   );

package/src/pages/settings/DeliverySettings.tsx

@@ -0,0 +1,229 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  Check,
+  ChevronDown,
+  CircleAlert,
+  FolderGit2,
+  LoaderCircle,
+  Play,
+  ShieldCheck,
+} from "lucide-react";
+import { useToastStore } from "../../app/toast";
+import {
+  installDeliveryPreset,
+  previewDeliveryPreset,
+} from "../../lib/local-api";
+import type {
+  DeliveryPreset,
+  DeliveryProvider,
+} from "../../lib/local-api";
+
+const STATUS_CLASS: Record<
+  DeliveryPreset["files"][number]["status"],
+  string
+> = {
+  added: "status-verified",
+  changed: "status-declared",
+  unchanged: "status-verified",
+  conflict: "status-unresolved",
+};
+
+export function DeliverySettings({ local }: { local: boolean }) {
+  const [plan, setPlan] = useState<DeliveryPreset | null>(null);
+  const [loading, setLoading] = useState(local);
+  const [installing, setInstalling] = useState(false);
+  const [error, setError] = useState("");
+  const say = useToastStore((state) => state.say);
+
+  const load = useCallback(async (provider?: DeliveryProvider) => {
+    if (!local) return;
+    setLoading(true);
+    setError("");
+    try {
+      setPlan(await previewDeliveryPreset(provider));
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setLoading(false);
+    }
+  }, [local]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function install() {
+    if (!plan) return;
+    setInstalling(true);
+    setError("");
+    try {
+      const installed = await installDeliveryPreset(
+        plan.provider,
+        plan.revision,
+      );
+      setPlan(installed);
+      say(
+        installed.written.length === 1
+          ? `${installed.written[0]} installed`
+          : `${installed.written.length} delivery files installed`,
+      );
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : String(cause);
+      setError(message);
+      say(message);
+    } finally {
+      setInstalling(false);
+    }
+  }
+
+  if (!local) {
+    return (
+      <div className="empty">
+        Start <code>portolan dev</code> to preview and install delivery presets
+        in this repository.
+      </div>
+    );
+  }
+
+  const conflicts =
+    plan?.files.filter((file) => file.status === "conflict") ?? [];
+
+  return (
+    <div className="rounded-card border border-line p-card shadow-xs">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <div className="flex items-center gap-2 font-semibold text-ink">
+            <FolderGit2 size={16} className="text-accent" /> Delivery automation
+          </div>
+          <p className="mt-1 max-w-prose text-muted">
+            Install review checks and static catalog publishing directly into
+            this repository.
+          </p>
+        </div>
+        <div
+          className="seg inline-flex"
+          role="group"
+          aria-label="Delivery provider"
+        >
+          {(["github", "gitlab"] as const).map((provider) => (
+            <button
+              key={provider}
+              type="button"
+              disabled={loading || installing}
+              aria-pressed={plan?.provider === provider}
+              onClick={() => void load(provider)}
+              className={`capitalize ${plan?.provider === provider ? "is-on" : ""}`}
+            >
+              {provider === "github" ? "GitHub" : "GitLab"}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="mt-4 flex items-center gap-2 text-muted">
+          <LoaderCircle size={15} className="animate-spin" /> Inspecting
+          repository…
+        </div>
+      ) : error && !plan ? (
+        <div className="mt-4 rounded-control border border-line bg-surface px-3 py-2 text-unresolved">
+          {error}
+        </div>
+      ) : plan ? (
+        <>
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            <span
+              className={`chip ${
+                plan.status === "conflict"
+                  ? "status-unresolved"
+                  : plan.status === "update"
+                    ? "status-declared"
+                    : "status-verified"
+              }`}
+            >
+              {plan.status}
+            </span>
+            <span className="mono text-muted">
+              {plan.repository} · {plan.defaultBranch}
+            </span>
+            {plan.detectedProvider === plan.provider ? (
+              <span className="text-faint">detected from origin</span>
+            ) : plan.detectedProvider ? (
+              <span className="text-faint">
+                origin uses {plan.detectedProvider === "github" ? "GitHub" : "GitLab"}
+              </span>
+            ) : (
+              <span className="text-faint">provider selected manually</span>
+            )}
+          </div>
+
+          <ul className="mt-4 grid gap-2 text-muted sm:grid-cols-2">
+            {plan.features.map((feature) => (
+              <li key={feature} className="flex items-center gap-2">
+                <Check size={14} className="shrink-0 text-verified" /> {feature}
+              </li>
+            ))}
+          </ul>
+
+          <div className="mt-4 divide-y divide-line overflow-hidden rounded-control border border-line">
+            {plan.files.map((file) => (
+              <details
+                key={file.path}
+                className="group"
+                open={file.status === "conflict"}
+              >
+                <summary className="flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-surface">
+                  <span className={`chip ${STATUS_CLASS[file.status]}`}>
+                    {file.status}
+                  </span>
+                  <span className="mono truncate text-ink">{file.path}</span>
+                  <ChevronDown
+                    size={15}
+                    className="ml-auto shrink-0 text-muted transition-transform group-open:rotate-180"
+                  />
+                </summary>
+                <div className="border-t border-line bg-surface">
+                  {file.message ? (
+                    <p className="flex items-center gap-2 px-3 pt-3 text-unresolved">
+                      <CircleAlert size={14} /> {file.message}
+                    </p>
+                  ) : null}
+                  <pre className="mono max-h-72 overflow-auto whitespace-pre p-3 text-muted">
+                    {file.diff || "No changes — this file is up to date."}
+                  </pre>
+                </div>
+              </details>
+            ))}
+          </div>
+
+          {error ? <p className="mt-3 text-unresolved">{error}</p> : null}
+          <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
+            <p className="text-faint">
+              Only files shown above will be written. Existing unmanaged
+              workflows are never replaced.
+            </p>
+            {plan.status === "installed" ? (
+              <span className="flex items-center gap-1.5 text-verified">
+                <ShieldCheck size={15} /> Preset installed
+              </span>
+            ) : (
+              <button
+                type="button"
+                className="btn-accent"
+                disabled={installing || conflicts.length > 0}
+                onClick={() => void install()}
+              >
+                {installing ? (
+                  <LoaderCircle size={15} className="animate-spin" />
+                ) : (
+                  <Play size={15} />
+                )}
+                {plan.status === "update" ? "Update preset" : "Install preset"}
+              </button>
+            )}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}