@shortlink-org/portolan 0.2.2 → 0.2.4

package/src/pages/settings/DeliverySettings.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
+import { Switch } from "@headlessui/react";
 import {
-  Check,
   ChevronDown,
   CircleAlert,
   FolderGit2,
@@ -14,6 +14,7 @@ import {
   previewDeliveryPreset,
 } from "../../lib/local-api";
 import type {
+  DeliveryFeatureId,
   DeliveryPreset,
   DeliveryProvider,
 } from "../../lib/local-api";
@@ -24,6 +25,7 @@ const STATUS_CLASS: Record<
 > = {
   added: "status-verified",
   changed: "status-declared",
+  removed: "status-unresolved",
   unchanged: "status-verified",
   conflict: "status-unresolved",
 };
@@ -35,12 +37,12 @@ export function DeliverySettings({ local }: { local: boolean }) {
   const [error, setError] = useState("");
   const say = useToastStore((state) => state.say);
 
-  const load = useCallback(async (provider?: DeliveryProvider) => {
+  const load = useCallback(async (provider?: DeliveryProvider, features?: DeliveryFeatureId[]) => {
     if (!local) return;
     setLoading(true);
     setError("");
     try {
-      setPlan(await previewDeliveryPreset(provider));
+      setPlan(await previewDeliveryPreset(provider, features));
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     } finally {
@@ -60,6 +62,7 @@ export function DeliverySettings({ local }: { local: boolean }) {
       const installed = await installDeliveryPreset(
         plan.provider,
         plan.revision,
+        plan.features.filter((feature) => feature.selected).map((feature) => feature.id),
       );
       setPlan(installed);
       say(
@@ -76,6 +79,23 @@ export function DeliverySettings({ local }: { local: boolean }) {
     }
   }
 
+  function selectFeature(id: DeliveryFeatureId) {
+    if (!plan) return;
+    const feature = plan.features.find((item) => item.id === id);
+    if (!feature?.available) return;
+    const selected = new Set(
+      plan.features.filter((item) => item.selected).map((item) => item.id),
+    );
+    if (selected.has(id)) {
+      selected.delete(id);
+      if (id === "diff") selected.delete("sarif");
+    } else {
+      selected.add(id);
+      for (const required of feature.requires) selected.add(required);
+    }
+    void load(plan.provider, [...selected]);
+  }
+
   if (!local) {
     return (
       <div className="empty">
@@ -96,8 +116,8 @@ export function DeliverySettings({ local }: { local: boolean }) {
             <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.
+            Choose the automation this repository needs, preview the generated
+            jobs, then install them together.
           </p>
         </div>
         <div
@@ -111,7 +131,12 @@ export function DeliverySettings({ local }: { local: boolean }) {
               type="button"
               disabled={loading || installing}
               aria-pressed={plan?.provider === provider}
-              onClick={() => void load(provider)}
+              onClick={() => void load(
+                provider,
+                plan?.features
+                  .filter((feature) => feature.selected && (feature.id !== "sarif" || provider === "github"))
+                  .map((feature) => feature.id),
+              )}
               className={`capitalize ${plan?.provider === provider ? "is-on" : ""}`}
             >
               {provider === "github" ? "GitHub" : "GitLab"}
@@ -157,15 +182,46 @@ export function DeliverySettings({ local }: { local: boolean }) {
             )}
           </div>
 
-          <ul className="mt-4 grid gap-2 text-muted sm:grid-cols-2">
+          <div className="mt-4 grid gap-2 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>
+              <div
+                key={feature.id}
+                className={`flex items-start gap-3 rounded-control border px-3 py-3 transition-colors ${
+                  feature.available
+                    ? feature.selected
+                      ? "border-accent bg-surface"
+                      : "border-line hover:bg-surface"
+                    : "border-line opacity-60"
+                }`}
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="block font-medium text-ink">{feature.label}</span>
+                  <span className="mt-0.5 block text-muted">{feature.description}</span>
+                  {!feature.available ? (
+                    <span className="mt-1 block text-faint">Available for GitHub only.</span>
+                  ) : feature.requires.length > 0 ? (
+                    <span className="mt-1 block text-faint">
+                      Enables {feature.requires.map((required) => plan.features.find((item) => item.id === required)?.label).join(", ")}.
+                    </span>
+                  ) : null}
+                </span>
+                <Switch
+                  checked={feature.selected}
+                  disabled={!feature.available || loading || installing}
+                  onChange={() => selectFeature(feature.id)}
+                  aria-label={feature.label}
+                  className="group mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-line-strong bg-surface transition-colors outline-none data-checked:border-accent data-checked:bg-accent focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed"
+                >
+                  <span
+                    aria-hidden
+                    className="size-3.5 translate-x-0.5 rounded-full bg-muted shadow-xs transition-transform group-data-checked:translate-x-[18px] group-data-checked:bg-canvas"
+                  />
+                </Switch>
+              </div>
             ))}
-          </ul>
+          </div>
 
-          <div className="mt-4 divide-y divide-line overflow-hidden rounded-control border border-line">
+          {plan.files.length > 0 ? <div className="mt-4 divide-y divide-line overflow-hidden rounded-control border border-line">
             {plan.files.map((file) => (
               <details
                 key={file.path}
@@ -194,7 +250,7 @@ export function DeliverySettings({ local }: { local: boolean }) {
                 </div>
               </details>
             ))}
-          </div>
+          </div> : <div className="empty mt-4">No delivery jobs selected.</div>}
 
           {error ? <p className="mt-3 text-unresolved">{error}</p> : null}
           <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
@@ -204,12 +260,12 @@ export function DeliverySettings({ local }: { local: boolean }) {
             </p>
             {plan.status === "installed" ? (
               <span className="flex items-center gap-1.5 text-verified">
-                <ShieldCheck size={15} /> Preset installed
+                <ShieldCheck size={15} /> Selection installed
               </span>
             ) : (
               <button
                 type="button"
-                className="btn-accent"
+                className="product-primary"
                 disabled={installing || conflicts.length > 0}
                 onClick={() => void install()}
               >

package/src/pages/settings/IntegrationsSettings.tsx

@@ -0,0 +1,117 @@
+import { ExternalLink, Save, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { SectionTitle } from "../../components/PageHeader";
+import { TechIcon } from "../../components/TechIcon";
+import { normalizeKafkaUiUrl, useKafkaUi } from "../../lib/kafka-ui";
+import { techGlyph } from "../../lib/tech";
+
+const FIELD =
+  "mono w-full rounded-control border border-line bg-canvas px-3 py-2 text-ink outline-none focus:border-accent";
+
+function KafkaUiCard() {
+  const configured = useKafkaUi((state) => state.url);
+  const setUrl = useKafkaUi((state) => state.setUrl);
+  const [draft, setDraft] = useState(configured);
+  const normalized = normalizeKafkaUiUrl(draft);
+  const valid = normalized !== null;
+  const dirty = valid && normalized !== configured;
+  const glyph = techGlyph("Kafka");
+
+  const save = () => {
+    if (normalized === null) return;
+    setUrl(normalized);
+    setDraft(normalized);
+  };
+
+  const remove = () => {
+    setUrl("");
+    setDraft("");
+  };
+
+  return (
+    <section className="rounded-card border border-line bg-canvas p-card shadow-xs">
+      <div className="flex items-start gap-3">
+        <span className="flex size-9 shrink-0 items-center justify-center rounded-control border border-line bg-surface text-ink">
+          {glyph ? <TechIcon glyph={glyph} size={18} /> : null}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="font-semibold text-ink">Kafka UI</h2>
+            <span className={`chip ${configured ? "status-verified" : "text-muted"}`}>
+              {configured ? "configured" : "not configured"}
+            </span>
+          </div>
+          <p className="mt-1 text-muted">
+            Opens catalogued Kafka topics in your Kafbat Kafka UI installation.
+          </p>
+        </div>
+      </div>
+
+      <label className="mt-4 block">
+        <span className="label mb-1.5 block">Kafka UI cluster URL</span>
+        <input
+          type="url"
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && dirty) save();
+          }}
+          placeholder="https://kafka.example/ui/clusters/production"
+          spellCheck={false}
+          autoComplete="off"
+          aria-invalid={!valid}
+          className={`${FIELD} ${valid ? "" : "border-unresolved"}`}
+        />
+      </label>
+      <p className={`mono mt-2 ${valid ? "text-muted" : "text-unresolved"}`}>
+        {valid
+          ? "Use a cluster or topics URL to open the exact topic. A plain installation URL opens Kafka UI itself."
+          : "Enter an http:// or https:// URL."}
+      </p>
+
+      <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-line pt-4">
+        <button
+          type="button"
+          onClick={save}
+          disabled={!dirty}
+          className="product-primary"
+        >
+          <Save size={14} aria-hidden />
+          Save integration
+        </button>
+        {configured ? (
+          <>
+            <a
+              href={configured}
+              target="_blank"
+              rel="noreferrer"
+              className="tbtn px-3 py-1.5 text-ink"
+            >
+              Open Kafka UI
+              <ExternalLink size={14} aria-hidden />
+            </a>
+            <button
+              type="button"
+              onClick={remove}
+              className="tbtn ml-auto px-3 py-1.5 text-unresolved"
+            >
+              <Trash2 size={14} aria-hidden />
+              Remove
+            </button>
+          </>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export function IntegrationsSettings() {
+  return (
+    <section>
+      <SectionTitle right="stored in this browser">Integrations</SectionTitle>
+      <div className="grid gap-grid lg:grid-cols-2">
+        <KafkaUiCard />
+      </div>
+    </section>
+  );
+}

package/src/routes.test.ts

@@ -169,12 +169,14 @@ describe("routes", () => {
     expect(paths.settingsProjects()).toBe("/settings/projects");
     expect(paths.settingsPipeline()).toBe("/settings/pipeline");
     expect(paths.settingsDelivery()).toBe("/settings/delivery");
+    expect(paths.settingsIntegrations()).toBe("/settings/integrations");
     expect(paths.settingsPreferences()).toBe("/settings/preferences");
     expect(paths.settingsAbout()).toBe("/settings/about");
     for (const path of [
       paths.settingsProjects(),
       paths.settingsPipeline(),
       paths.settingsDelivery(),
+      paths.settingsIntegrations(),
       paths.settingsPreferences(),
       paths.settingsAbout(),
     ]) expect(isRoutable(path)).toBe(true);

package/src/routes.ts

@@ -45,6 +45,7 @@ export const paths = {
   settingsProjects: () => "/settings/projects",
   settingsPipeline: () => "/settings/pipeline",
   settingsDelivery: () => "/settings/delivery",
+  settingsIntegrations: () => "/settings/integrations",
   settingsPreferences: () => "/settings/preferences",
   settingsAbout: () => "/settings/about",
   external: (slug: string) => `/externals/${slug}`,
@@ -375,7 +376,7 @@ const ROUTES: RegExp[] = [
   /^\/language$/,
   /^\/problems$/,
   /^\/changes$/,
-  /^\/settings(?:\/(?:projects|pipeline|delivery|preferences|about))?$/,
+  /^\/settings(?:\/(?:projects|pipeline|delivery|integrations|preferences|about))?$/,
   /^\/externals\/[^/]+$/,
   /^\/map$/,
   /^\/adrs\/[^/]+$/,

package/src/selection/DetailPanel.tsx

@@ -34,7 +34,7 @@ import { stepLabel } from "../flow/labels";
 import { KIND_LABEL } from "../lib/kinds";
 import { eventScope, resolveShape } from "../lib/shape";
 import { stepsInto } from "../lib/backlinks";
-import { treeHref } from "../lib/source-link";
+import { sourceLocation, treeHref } from "../lib/source-link";
 import { walkSteps } from "../catalog";
 import { methodCount } from "../lib/api";
 import {
@@ -49,6 +49,7 @@ import { upstreamOf } from "../er/lineage";
 import type { LineageMaps } from "../er/lineage";
 import { ctxStyle } from "../lib/context-color";
 import { Ident } from "../components/Ident";
+import { SourcePreviewLink } from "../components/SourcePreview";
 import { StatusChip } from "../components/primitives";
 import { StepDetailBody } from "../flow/StepDetail";
 import {
@@ -420,6 +421,50 @@ function TableBody({
         </>
       ) : null}
 
+      {(table.accesses ?? []).length > 0 ? (
+        <>
+          <Label>Reads / writes</Label>
+          {(table.accesses ?? []).map((access, accessIndex) => {
+            const location = access.source
+              ? sourceLocation(
+                  access.source,
+                  index.serviceById.get(store.owner),
+                  allRepos(catalog),
+                )
+              : null;
+            const tone =
+              access.operation === "read"
+                ? "text-accent"
+                : access.operation === "write"
+                  ? "text-verified"
+                  : "text-unresolved";
+            return (
+              <div
+                key={`${access.operation}:${access.method}:${access.source}:${accessIndex}`}
+                className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-0.5 py-1"
+              >
+                <span className={`chip self-start uppercase ${tone}`}>
+                  {access.operation}
+                </span>
+                <div className="min-w-0">
+                  <div className="mono break-all text-ink">
+                    {access.method ?? "SQL client call"}
+                  </div>
+                  {access.source ? (
+                    <SourcePreviewLink
+                      location={location}
+                      className="mono block break-all text-muted hover:text-accent"
+                    >
+                      {access.source}
+                    </SourcePreviewLink>
+                  ) : null}
+                </div>
+              </div>
+            );
+          })}
+        </>
+      ) : null}
+
       <Label>Referenced by</Label>
       {into.length === 0 ? (
         <div className="mono text-muted">nothing points at this table</div>

package/src/selection/pages.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { pageContains, selectionPath } from "./pages";
+import { pageContains, selectionPath, selectsInPlace } from "./pages";
 import { selectionFor } from "./model";
 
 const dispatched = selectionFor("delivery.core.shipment.ShipmentDispatched");
@@ -44,6 +44,19 @@ describe("selectionPath", () => {
   });
 });
 
+describe("selectsInPlace", () => {
+  const flow = "/flows/cart-checkout";
+  const shop = selectionFor("shop");
+
+  it("selects a flow context on the flow the first time", () => {
+    expect(selectsInPlace(flow, shop, null)).toBe(true);
+  });
+
+  it("lets a repeated selection follow its link to the context page", () => {
+    expect(selectsInPlace(flow, shop, shop)).toBe(false);
+  });
+});
+
 // Navigation keeps a selection only when the page it lands on can point at it.
 // These are the cases that decide whether the palette moves the reader.
 describe("pageContains across pages", () => {

package/src/selection/pages.ts

@@ -9,7 +9,7 @@ import { walkSteps } from "../catalog";
 import { catalog, index } from "../data";
 import { paths } from "../routes";
 import type { Selection } from "./model";
-import { parseFlowStepId, resolveSelection } from "./model";
+import { parseFlowStepId, resolveSelection, sameSelection } from "./model";
 
 /** The page that owns a selection, or null when it has no page of its own. */
 export function selectionPath(selection: Selection): string | null {
@@ -257,12 +257,18 @@ export function pageContains(pathname: string, selection: Selection): boolean {
  * and only for something that flow actually draws. That is the one place where
  * leaving is the wrong answer — picking an event there is a question about
  * *this* sequence ("where does it appear?"), and the flow page answers it by
- * lighting the matching steps.
+ * lighting the matching steps. Clicking the highlighted selection again is an
+ * explicit request to follow the tree link to its own page.
  */
 export function selectsInPlace(
   pathname: string,
   selection: Selection,
+  current: Selection | null,
 ): boolean {
   const route = parseRoute(pathname);
-  return route.kind === "flow" && pageContains(pathname, selection);
+  return (
+    !sameSelection(current, selection) &&
+    route.kind === "flow" &&
+    pageContains(pathname, selection)
+  );
 }

package/vite.config.ts

@@ -7,6 +7,8 @@ import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import { publicSetupFrom } from "./src/lib/setup-info.ts";
+// @ts-expect-error plain JavaScript module intentionally has no browser types
+import { readManifest } from "./scripts/manifest.mjs";
 // The local control plane is a Node-only Vite plugin kept as plain ESM so its
 // pure discovery functions can also be tested directly.
 // @ts-expect-error plain JavaScript module intentionally has no browser types
@@ -121,7 +123,7 @@ try {
   // A clean checkout has no run to report yet. Settings says so explicitly.
 }
 const setupInfo = publicSetupFrom(
-  JSON.parse(manifestText) as unknown,
+  readManifest(resolve(workspace, "portolan.json")) as unknown,
   buildReport,
   createHash("sha256").update(manifestText).digest("hex"),
 );