fix(T3): inline tag create + explicit 404 on interest detail

F16 — InlineTagEditor: inline "Create new tag" affordance
  The popover now has a search input at the top. Typing a name that
  doesn't match any existing tag surfaces a "Create new tag: <name>"
  action that POSTs /api/v1/tags then attaches the new id to the entity.
  Reps no longer need to context-switch to Admin → Tags to create the
  first chip. Enter on the input also triggers create-and-attach.

F17 — Interest detail page: explicit not-found state
  Pre-fix, navigating to /port-X/interests/<port-Y-id> 404'd at the API
  but the UI silently rendered the list shell with empty tabs. Cross-
  port URL pastes now show an EmptyState with title "Interest not found"
  + a "Back to interests" CTA. 403 (no access in this port) gets its
  own copy. TanStack Query is told not to retry 404/403s so the empty
  state appears immediately.

1373/1373 vitest pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/shared/inline-tag-editor.tsx

@@ -5,6 +5,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Plus, X, Check } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { apiFetch } from '@/lib/api/client';
 import { toastError } from '@/lib/api/toast-error';
@@ -43,6 +44,7 @@ export function InlineTagEditor({
 }: InlineTagEditorProps) {
   const qc = useQueryClient();
   const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
 
   // Always fetch so we can hide the editor entirely when no tags are
   // configured AND the entity has no tags already applied — keeps the
@@ -60,6 +62,14 @@ export function InlineTagEditor({
     onError: (err) => toastError(err),
   });
 
+  // F16: inline "Create new tag: X" — was missing entirely. Reps had to
+  // context-switch to Admin → Tags to create the tag, then come back.
+  const createTag = useMutation({
+    mutationFn: (name: string) =>
+      apiFetch<{ data: Tag }>('/api/v1/tags', { method: 'POST', body: { name } }),
+    onError: (err) => toastError(err),
+  });
+
   function toggleTag(tagId: string) {
     const has = currentTags.some((t) => t.id === tagId);
     const nextIds = has
@@ -72,6 +82,26 @@ export function InlineTagEditor({
     setTags.mutate(currentTags.filter((t) => t.id !== tagId).map((t) => t.id));
   }
 
+  async function handleCreateAndAttach(name: string) {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const res = await createTag.mutateAsync(trimmed);
+    const newTag = res.data;
+    // Optimistically extend `allTags` so the new chip appears immediately.
+    qc.invalidateQueries({ queryKey: ['tags'] });
+    setTags.mutate([...currentTags.map((t) => t.id), newTag.id]);
+    setSearch('');
+  }
+
+  const lowerSearch = search.trim().toLowerCase();
+  const filtered = lowerSearch
+    ? (allTags?.data ?? []).filter((t) => t.name.toLowerCase().includes(lowerSearch))
+    : (allTags?.data ?? []);
+  // Suggest "Create new tag: X" when the user typed something but no
+  // exact-case-insensitive match exists.
+  const exactMatch = (allTags?.data ?? []).some((t) => t.name.toLowerCase() === lowerSearch);
+  const canCreate = !!lowerSearch && !exactMatch;
+
   // Hide the whole editor when the port has no tags configured AND this
   // entity has none applied. Once an admin adds the first tag in
   // Admin → Tags, the editor reappears on next mount/refetch.
@@ -116,14 +146,26 @@ export function InlineTagEditor({
             </Button>
           </PopoverTrigger>
           <PopoverContent className="w-64 p-0" align="start">
+            <div className="border-b p-2">
+              <Input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyDown={(e) => {
+                  // Enter on a non-empty no-match → create and attach.
+                  if (e.key === 'Enter' && canCreate && !createTag.isPending) {
+                    e.preventDefault();
+                    void handleCreateAndAttach(search);
+                  }
+                }}
+                placeholder="Search or create…"
+                className="h-7 text-xs"
+                autoFocus
+              />
+            </div>
             <div className="max-h-64 overflow-y-auto py-1">
               {!allTags && <div className="px-3 py-2 text-xs text-muted-foreground">Loading…</div>}
-              {allTags?.data.length === 0 && (
-                <div className="px-3 py-2 text-xs text-muted-foreground">
-                  No tags defined yet. Create some in Admin → Tags.
-                </div>
-              )}
-              {allTags?.data.map((t) => {
+              {filtered.map((t) => {
                 const checked = currentTags.some((c) => c.id === t.id);
                 return (
                   <button
@@ -143,6 +185,26 @@ export function InlineTagEditor({
                   </button>
                 );
               })}
+              {canCreate && (
+                <button
+                  type="button"
+                  disabled={createTag.isPending}
+                  onClick={() => void handleCreateAndAttach(search)}
+                  className="flex w-full items-center gap-2 border-t px-3 py-1.5 text-sm text-left hover:bg-muted/60"
+                >
+                  <Plus className="h-3.5 w-3.5 shrink-0" aria-hidden />
+                  <span className="flex-1 truncate">
+                    Create new tag: <strong>{search.trim()}</strong>
+                  </span>
+                </button>
+              )}
+              {filtered.length === 0 && !canCreate && !!allTags && (
+                <div className="px-3 py-2 text-xs text-muted-foreground">
+                  {allTags.data.length === 0
+                    ? 'No tags defined yet. Type a name to create one.'
+                    : 'No matching tags.'}
+                </div>
+              )}
             </div>
           </PopoverContent>
         </Popover>