Merge pull request #47 from lossless-group/feature/entity-card-edit-remove

Every entry gets an undo — ✎/× edit & remove affordances on the entity cards

Author: mpstaton

apps/org-workbench/src/AddAffiliationInline.svelte

@@ -1,29 +1,31 @@
 <script lang="ts">
-  // Promote a bio-page link to an affiliation — AddPersonInline's gate
-  // pattern INVERTED: the person is fixed (the link row's owner), the ORG is
-  // being resolved. Seeded from the link's hostname, candidates come from
-  // resolver.search (whose D4 clause matches domains[*].domain), and the gate
-  // is ALWAYS shown: pick an existing org or explicitly create a thin one
-  // (name + the bio's domain, so it stays domain-matchable). The edge + its
-  // affiliated_with observation come from person.affiliate with the bio URL
-  // as source — the link row keeps its identity role; this adds the two
-  // facts it was silently dropping.
-  // Per context-v/issues/Person-Bio-Pages-Are-Affiliation-Signals-Not-Just-Identity-Links.md.
+  // Resolve an org and affiliate a fixed person with it — AddPersonInline's
+  // gate pattern INVERTED. Two doors share it:
+  //   1. Bio-link promotion (entry set): seeded from the link's hostname,
+  //      candidates via resolver.search's D4 domain clause, the bio URL as
+  //      the write's source. Per context-v/issues/Person-Bio-Pages-Are-
+  //      Affiliation-Signals-Not-Just-Identity-Links.md.
+  //   2. Manual re-affiliation (entry null): the "+ affiliate with another
+  //      org" action on the person card — no seed, the operator types the
+  //      org name and finds/creates. Per the Entity-Card-Edit-And-Remove-
+  //      Affordances spec's affiliation extension (the Marla Blow case).
+  // Either way the gate is ALWAYS shown: pick an existing org or explicitly
+  // create a thin, domain-matchable one.
 
   import { searchOrgs, affiliatePerson } from './lib/org-client';
   import type { OrgSuggestion, ShapedLink } from './lib/types';
 
   let {
     person_uuid,
     personName,
-    entry,
+    entry = null,
     client,
     onadded,
     oncancel,
   }: {
     person_uuid: string;
     personName: string;
-    entry: ShapedLink;
+    entry?: ShapedLink | null;
     client: string;
     onadded: () => void;
     oncancel: () => void;
@@ -37,7 +39,7 @@
     }
   }
 
-  const domain = $derived(hostOf(entry.url));
+  const domain = $derived(entry ? hostOf(entry.url) : '');
 
   let orgName = $state('');
   let role = $state('');
@@ -53,6 +55,7 @@
   });
 
   async function find(q: string) {
+    if (!q.trim()) return;
     error = null;
     try {
       candidates = await searchOrgs(q, client);
@@ -76,7 +79,7 @@
         org_domain: action === 'create' ? domain : undefined,
         role: role.trim() || null,
         client,
-        source: entry.url,
+        source: entry?.url ?? 'org-workbench-manual',
       });
       onadded(); // parent bumps + dispatches augment-it:entity-updated
     } catch (err) {
@@ -88,8 +91,12 @@
 
 <div class="ow-addperson">
   <p class="ow-gate-note">
-    Promote <strong>{domain || entry.url}</strong> to an affiliation for {personName} — pick the
-    org this bio lives on, or create it:
+    {#if entry}
+      Promote <strong>{domain || entry.url}</strong> to an affiliation for {personName} — pick the
+      org this bio lives on, or create it:
+    {:else}
+      Affiliate <strong>{personName}</strong> with another organization — find it by name, or create it:
+    {/if}
   </p>
 
   {#if phase === 'gate'}
@@ -105,8 +112,8 @@
         {/each}
       </ul>
     {:else if searched}
-      <p class="ow-gate-note">No existing org matches “{domain}”.</p>
-    {:else}
+      <p class="ow-gate-note">No existing org matches “{orgName.trim() || domain}”.</p>
+    {:else if entry}
       <p class="ow-gate-note">looking for orgs matching “{domain}”…</p>
     {/if}
 

apps/org-workbench/src/AdditiveList.svelte

@@ -2,12 +2,13 @@
   // Generic additive list — the org card's repeated organ. Renders shaped
   // entries (kind badge · name-or-host+path · date) with an inline ➕ form that
   // hands the URL (+ optional kind, + optional name when nameable) to a
-  // caller-supplied add function. Entries are additive: no delete — canonical
-  // writes are append + dedup server-side. When the caller supplies onedit,
-  // an entry's kind/name become patchable in place (✎ or the kind badge) —
-  // fields on an entry are correctable; the entry itself is still additive.
-  // Busy/error states are localized to this list; a failed add or edit never
-  // disturbs the sibling lists.
+  // caller-supplied add function. When the caller supplies onedit, an entry's
+  // url/kind/name become patchable in place (✎ or the kind badge); onremove
+  // adds the × with an inline confirm — the correction half of view-and-edit-
+  // in-place, per context-v/specs/Entity-Card-Edit-And-Remove-Affordances.md.
+  // The micro-buttons are hover/focus-revealed so rows rest quiet.
+  // Busy/error states are localized to this list; a failed add, edit, or
+  // remove never disturbs the sibling lists.
 
   import type { ShapedLink } from './lib/types';
 
@@ -22,6 +23,8 @@
     onsearch,
     oncrawl,
     onedit,
+    onremove,
+    removenote,
     entryaction,
   }: {
     title: string;
@@ -35,9 +38,15 @@
     // Optional 🤖 — didi's crawl for this whole list (v1.2): header-level,
     // because the list (not one entry) is the crawl's subject.
     oncrawl?: () => void;
-    // Optional per-entry patch (kind/name matched by URL server-side) —
-    // presence turns on the in-place editor.
-    onedit?: (entry: Entry, patch: { kind?: string; name?: string }) => Promise<void>;
+    // Optional per-entry patch (url/kind/name matched by current URL
+    // server-side) — presence turns on the in-place editor.
+    onedit?: (entry: Entry, patch: { url?: string; kind?: string; name?: string }) => Promise<void>;
+    // Optional per-entry remove (matched by URL server-side) — presence
+    // turns on the × with its inline confirm.
+    onremove?: (entry: Entry) => Promise<void>;
+    // Optional caller-supplied caution shown inside the remove confirm
+    // (e.g. "this stream fed 3 corpus items — they stay").
+    removenote?: (entry: Entry) => string | null;
     // Optional per-entry action (Phase 5 — "scan" on pulse streams).
     entryaction?: { label: string; fn: (entry: Entry) => void };
   } = $props();
@@ -52,11 +61,31 @@
 
   // In-place editor — one row at a time, keyed by the entry's URL.
   let editUrl = $state<string | null>(null);
+  let editNewUrl = $state('');
   let editKind = $state('');
   let editName = $state('');
   let editBusy = $state(false);
   let editError = $state<string | null>(null);
 
+  // Remove confirm — one row at a time, keyed by the entry's URL.
+  let removeUrl = $state<string | null>(null);
+  let removeBusy = $state(false);
+  let removeError = $state<string | null>(null);
+
+  async function commitRemove(entry: Entry) {
+    if (!onremove) return;
+    removeBusy = true;
+    removeError = null;
+    try {
+      await onremove(entry);
+      removeUrl = null;
+    } catch (err) {
+      removeError = err instanceof Error ? err.message : String(err);
+    } finally {
+      removeBusy = false;
+    }
+  }
+
   async function submit(e: SubmitEvent) {
     e.preventDefault();
     const trimmed = url.trim();
@@ -80,9 +109,11 @@
 
   function startEdit(entry: Entry) {
     editUrl = entry.url;
+    editNewUrl = entry.url;
     editKind = entry.kind;
     editName = entry.name ?? '';
     editError = null;
+    removeUrl = null;
   }
 
   function abortEdit() {
@@ -93,12 +124,14 @@
   async function commitEdit(e: SubmitEvent, entry: Entry) {
     e.preventDefault();
     if (!onedit) return;
-    const patch: { kind?: string; name?: string } = {};
+    const patch: { url?: string; kind?: string; name?: string } = {};
+    const u = editNewUrl.trim();
     const k = editKind.trim();
     const n = editName.trim();
+    if (u && u !== entry.url) patch.url = u;
     if (k && k !== entry.kind) patch.kind = k;
     if (n && n !== (entry.name ?? '')) patch.name = n;
-    if (!patch.kind && !patch.name) {
+    if (!patch.url && !patch.kind && !patch.name) {
       abortEdit();
       return;
     }
@@ -197,6 +230,14 @@
         <li class="ow-entry">
           {#if onedit && editUrl === e.url}
             <form class="ow-add" onsubmit={(ev) => commitEdit(ev, e)}>
+              <input
+                class="ow-add-url"
+                type="url"
+                placeholder="https://…"
+                bind:value={editNewUrl}
+                onkeydown={onEditKey}
+                disabled={editBusy}
+              />
               <input
                 class="ow-add-kind"
                 type="text"
@@ -237,22 +278,50 @@
               <span class="ow-kind">{e.kind}</span>
             {/if}
             <a class="ow-url" href={e.url} target="_blank" rel="noreferrer">{e.name ?? display(e.url)}</a>
-            {#if onedit}
-              <button
-                type="button"
-                class="ow-entry-action"
-                title="edit kind{nameable ? ' / name' : ''}"
-                onclick={() => startEdit(e)}
-              >
-                ✎
-              </button>
+            {#if onremove && removeUrl === e.url}
+              <span class="ow-remove-confirm">
+                remove?{#if removenote?.(e)}&nbsp;<em class="ow-remove-note">{removenote(e)}</em>{/if}
+                <button
+                  type="button"
+                  class="ow-add-go ow-remove-yes"
+                  disabled={removeBusy}
+                  onclick={() => commitRemove(e)}
+                >
+                  {removeBusy ? '…' : 'yes'}
+                </button>
+                <button type="button" class="ow-add-go" disabled={removeBusy} onclick={() => (removeUrl = null)}>
+                  keep
+                </button>
+              </span>
+            {:else}
+              {#if onedit}
+                <button
+                  type="button"
+                  class="ow-entry-action ow-micro"
+                  title="edit url / kind{nameable ? ' / name' : ''}"
+                  onclick={() => startEdit(e)}
+                >
+                  ✎
+                </button>
+              {/if}
+              {#if onremove}
+                <button
+                  type="button"
+                  class="ow-entry-action ow-micro"
+                  title="remove from {title}"
+                  onclick={() => (removeUrl = e.url)}
+                >
+                  ×
+                </button>
+              {/if}
             {/if}
             {#if entryaction}
               <button type="button" class="ow-entry-action" onclick={() => entryaction.fn(e)}>
                 {entryaction.label}
               </button>
             {/if}
             <span class="ow-date">{(e.added_at ?? '').slice(0, 10)}</span>
+            {#if removeError && removeUrl === e.url}<div class="ow-error">{removeError}</div>{/if}
           {/if}
         </li>
       {/each}
@@ -272,4 +341,28 @@
   .ow-kind-editable:hover {
     border-color: currentColor;
   }
+  /* ✎/× rest invisible so rows stay quiet; hover or keyboard focus reveals
+     them (spec D5). entryaction buttons ("scan") stay always-visible. */
+  .ow-entry .ow-micro {
+    opacity: 0;
+    transition: opacity 0.1s ease;
+  }
+  .ow-entry:hover .ow-micro,
+  .ow-entry:focus-within .ow-micro {
+    opacity: 1;
+  }
+  .ow-remove-confirm {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.72rem;
+    color: var(--color-text-muted, #9aa0aa);
+  }
+  .ow-remove-note {
+    font-style: italic;
+  }
+  .ow-remove-yes {
+    border-color: var(--color-error-text, #f3a3a3);
+    color: var(--color-error-text, #f3a3a3);
+  }
 </style>