Bugfix for SSRF angle in AI connections, component consolidation

Author: Stefan Ernst

frontend/src/design-system/tokens/themes/dark.css

@@ -15,6 +15,12 @@ html[data-color-mode="dark"] {
   --ds-surface-overlay: #282e33;
   --ds-surface-selected: #09326c;
   --ds-surface-card: #313940;
+  --ds-surface-raised-hovered: #313940;
+
+  /* =================================================================
+     SHADOW TOKENS
+     ================================================================= */
+  --ds-shadow-raised: 0px 1px 1px rgba(0,0,0,0.5), 0px 0px 1px rgba(0,0,0,0.6);
 
   /* =================================================================
      TEXT COLORS

frontend/src/design-system/tokens/themes/light.css

@@ -17,6 +17,12 @@ html[data-color-mode="light"] {
   --ds-surface-overlay: #ffffff;
   --ds-surface-selected: #e3f2fd;
   --ds-surface-card: #ffffff;
+  --ds-surface-raised-hovered: #f5f6f7;
+
+  /* =================================================================
+     SHADOW TOKENS
+     ================================================================= */
+  --ds-shadow-raised: 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F;
 
   /* =================================================================
      TEXT COLORS

frontend/src/design-system/viewer/pages/ItemKey.svelte

@@ -6,6 +6,8 @@
   <h1 class="text-2xl font-bold mb-2" style="color: var(--ds-text);">ItemKey</h1>
   <p class="mb-8" style="color: var(--ds-text-subtle);">
     Standard display component for work item keys. Shows the workspace key with the item number in a consistent format.
+    Styling is baked in: <code>text-xs font-mono</code> with <code>var(--ds-text-subtle)</code> color by default.
+    Interactive variants (href or onClick) automatically add <code>hover:underline cursor-pointer</code>.
   </p>
 
   <!-- Basic Usage -->
@@ -43,42 +45,52 @@
   <section class="mb-10">
     <h2 class="text-lg font-semibold mb-4" style="color: var(--ds-text);">As Link</h2>
     <p class="mb-4 text-sm" style="color: var(--ds-text-subtle);">
-      When <code>href</code> is provided, renders as a clickable link.
+      When <code>href</code> is provided, renders as a clickable link with hover:underline.
     </p>
     <div class="flex items-center gap-4">
       <ItemKey
         item={{ workspace_item_number: 42 }}
         workspace={{ key: 'PROJ' }}
         href="#/workspace/PROJ/item/42"
-        className="text-xs font-mono text-blue-600 hover:underline"
       />
       <ItemKey
         item={{ workspace_item_number: 123 }}
         workspace={{ key: 'WIND' }}
         href="#/workspace/WIND/item/123"
-        className="text-xs font-mono text-blue-600 hover:underline"
       />
     </div>
   </section>
 
-  <!-- Custom Styling -->
+  <!-- With onClick (Button) -->
   <section class="mb-10">
-    <h2 class="text-lg font-semibold mb-4" style="color: var(--ds-text);">Custom Styling</h2>
-    <div class="flex items-center gap-4">
-      <ItemKey
-        item={{ workspace_item_number: 42 }}
-        workspace={{ key: 'PROJ' }}
-        className="text-sm font-mono text-gray-900 font-semibold"
-      />
+    <h2 class="text-lg font-semibold mb-4" style="color: var(--ds-text);">With onClick (Button)</h2>
+    <p class="mb-4 text-sm" style="color: var(--ds-text-subtle);">
+      When <code>onClick</code> is provided without <code>href</code>, renders as a <code>&lt;button&gt;</code> with hover:underline.
+    </p>
+    <ItemKey
+      item={{ workspace_item_number: 42 }}
+      workspace={{ key: 'PROJ' }}
+      onClick={() => alert('Clicked PROJ-42')}
+    />
+  </section>
+
+  <!-- Custom Style Override -->
+  <section class="mb-10">
+    <h2 class="text-lg font-semibold mb-4" style="color: var(--ds-text);">Custom Style Override</h2>
+    <p class="mb-4 text-sm" style="color: var(--ds-text-subtle);">
+      Use the <code>style</code> prop to override the default color (e.g. for gradient backgrounds).
+    </p>
+    <div class="flex items-center gap-4 p-4 rounded-lg" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
       <ItemKey
         item={{ workspace_item_number: 42 }}
         workspace={{ key: 'PROJ' }}
-        className="text-xs font-mono bg-gray-100 px-2 py-1 rounded"
+        style="color: rgba(255,255,255,0.7);"
       />
       <ItemKey
-        item={{ workspace_item_number: 42 }}
-        workspace={{ key: 'PROJ' }}
-        className="text-xs font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded"
+        item={{ workspace_item_number: 123 }}
+        workspace={{ key: 'WIND' }}
+        href="#"
+        style="color: rgba(255,255,255,0.7);"
       />
     </div>
   </section>
@@ -99,32 +111,13 @@
           <ItemKey
             item={{ workspace_item_number: item.number }}
             workspace={{ key: 'PROJ' }}
-            className="text-xs font-mono text-gray-500"
           />
           <span class="text-sm" style="color: var(--ds-text);">{item.title}</span>
         </div>
       {/each}
     </div>
   </section>
 
-  <!-- With Click Handler -->
-  <section class="mb-10">
-    <h2 class="text-lg font-semibold mb-4" style="color: var(--ds-text);">With Click Handler</h2>
-    <p class="mb-4 text-sm" style="color: var(--ds-text-subtle);">
-      Use <code>onClick</code> for custom behavior like opening a modal while preserving link benefits.
-    </p>
-    <ItemKey
-      item={{ workspace_item_number: 42 }}
-      workspace={{ key: 'PROJ' }}
-      href="#/item/42"
-      onClick={(e) => {
-        e.preventDefault()
-        alert('Would open item modal for PROJ-42')
-      }}
-      className="text-xs font-mono text-blue-600 hover:underline cursor-pointer"
-    />
-  </section>
-
   <!-- Props Reference -->
   <section class="mb-10">
     <h2 class="text-lg font-semibold mb-4" style="color: var(--ds-text);">Props Reference</h2>
@@ -162,9 +155,9 @@
             <td class="p-2">null</td>
           </tr>
           <tr>
-            <td class="p-2"><code>className</code></td>
+            <td class="p-2"><code>style</code></td>
             <td class="p-2">string</td>
-            <td class="p-2">'text-xs font-mono text-gray-500'</td>
+            <td class="p-2">"color: var(--ds-text-subtle);"</td>
           </tr>
         </tbody>
       </table>

frontend/src/lib/components/Card.svelte

@@ -2,8 +2,8 @@
   let {
     variant = 'raised',    // 'raised', 'flat', 'outlined', 'dashed'
     padding = 'default',   // 'none', 'compact', 'default', 'spacious', 'loose', 'generous'
-    shadow = false,        // Add shadow-sm
-    hoverable = false,     // Add hover effects (shadow-md, translate-y)
+    shadow = false,        // Add raised shadow
+    hoverable = false,     // Add hover background effect
     glass = false,         // Glassmorphism effect
     href = null,           // If provided, renders as <a>
     onclick = null,        // Click handler
@@ -17,7 +17,7 @@
 
   // Variant styles using design tokens
   const variantStyles = {
-    raised: 'background-color: var(--ds-surface-raised); border-color: var(--ds-border);',
+    raised: 'background-color: var(--ds-surface-raised); border-color: transparent; box-shadow: var(--ds-shadow-raised);',
     flat: 'background-color: var(--ds-surface); border-color: var(--ds-border);',
     outlined: 'background-color: transparent; border-color: var(--ds-border);',
     dashed: 'background-color: var(--ds-surface-raised); border-color: var(--ds-border); border-style: dashed;'
@@ -38,6 +38,7 @@
   // Rounded classes
   const roundedClasses = {
     none: '',
+    xs: 'rounded-[3px]',
     sm: 'rounded-sm',
     md: 'rounded-md',
     lg: 'rounded-lg',
@@ -49,8 +50,7 @@
   const baseClasses = $derived([
     'border',
     roundedClasses[rounded],
-    shadow ? 'shadow-sm' : '',
-    hoverable ? 'transition-all duration-150 hover:shadow-md hover:-translate-y-px' : '',
+    hoverable ? 'card-hoverable' : '',
     // When no header/footer, apply padding directly on outer element
     !hasStructure ? paddingClasses[padding] : '',
     className
@@ -60,6 +60,7 @@
 
   const computedStyle = $derived([
     glass ? glassStyle : variantStyles[variant],
+    shadow && variant !== 'raised' ? 'box-shadow: var(--ds-shadow-raised);' : '',
     userStyle
   ].filter(Boolean).join(' '));
 </script>
@@ -113,4 +114,12 @@
     backdrop-filter: blur(12px) saturate(180%);
     -webkit-backdrop-filter: blur(12px) saturate(180%);
   }
+
+  .card-hoverable {
+    transition: background-color 140ms ease-in-out, box-shadow 140ms ease-in-out;
+  }
+
+  .card-hoverable:hover {
+    background-color: var(--ds-surface-raised-hovered) !important;
+  }
 </style>

frontend/src/lib/components/CardHeader.svelte

@@ -29,7 +29,7 @@
       <svelte:component this={icon} class="{iconSizeClasses[size]} flex-shrink-0" style="color: var(--ds-icon);" />
     {/if}
     <div class="min-w-0">
-      <h3 class="{sizeClasses[size]} font-medium truncate" style="color: var(--ds-text);">
+      <h3 class="{sizeClasses[size]} truncate" style="color: var(--ds-text);">
         {title}
       </h3>
       {#if subtitle}

frontend/src/lib/components/Lozenge.svelte

@@ -9,6 +9,7 @@
     rounded = 'rounded', // 'rounded' | 'rounded-md'
     size = 'sm', // 'sm' | 'md'
     icon = null, // Optional Lucide icon component
+    square = false, // Compact square indicator (no text)
     // Custom color props for dynamic colors (e.g., item type colors)
     customBg = null, // Hex color for background
     customBorder = null, // Hex color for border (defaults to customBg)
@@ -84,7 +85,7 @@
 </script>
 
 <span
-  class="inline-flex items-center gap-1 font-semibold border {rounded} {sizeClass}"
+  class="inline-flex items-center {square ? '' : 'gap-1'} font-semibold border {rounded} {square ? 'w-4 h-4 flex-shrink-0' : sizeClass}"
   style={computedStyle}
 >
   {#if icon}

frontend/src/lib/components/ModalBackdrop.svelte

@@ -0,0 +1,86 @@
+<script>
+  import { fade } from 'svelte/transition';
+
+  let {
+    show = $bindable(false),
+    opacity = 0.5,
+    blur = 2,
+    extraFilter = '',
+    zIndex = 50,
+    align = 'center',
+    paddingTop = '',
+    scrollable = false,
+    closeOnClick = true,
+    closeOnEscape = true,
+    transition = true,
+    ariaLabelledBy = undefined,
+    onclose = undefined,
+    children,
+  } = $props();
+
+  let backdropRef = $state(null);
+  let previouslyFocusedElement = null;
+
+  const bgStyle = $derived(`rgba(0, 0, 0, ${opacity})`);
+  const filterStyle = $derived(
+    [blur > 0 ? `blur(${blur}px)` : '', extraFilter].filter(Boolean).join(' ') || 'none'
+  );
+
+  const layoutClasses = $derived(
+    align === 'center'
+      ? 'flex items-center justify-center p-4'
+      : align === 'top'
+        ? `flex items-start justify-center ${paddingTop}${scrollable ? ' overflow-y-auto' : ''}`
+        : ''
+  );
+
+  // Focus management: save on open, restore on close
+  $effect(() => {
+    if (show && !previouslyFocusedElement) {
+      previouslyFocusedElement = document.activeElement;
+    }
+    if (!show && previouslyFocusedElement) {
+      previouslyFocusedElement?.focus();
+      previouslyFocusedElement = null;
+    }
+  });
+
+  function handleIntroEnd() {
+    backdropRef?.focus();
+  }
+
+  function handleClick(event) {
+    if (closeOnClick && event.target === event.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(event) {
+    if (closeOnEscape && event.key === 'Escape') {
+      close();
+    }
+  }
+
+  function close() {
+    show = false;
+    onclose?.();
+  }
+</script>
+
+{#if show}
+  <div
+    bind:this={backdropRef}
+    transition:fade={{ duration: transition ? 150 : 0 }}
+    onintroend={handleIntroEnd}
+    class="fixed inset-0 {layoutClasses} focus:outline-none"
+    style="z-index: {zIndex}; background-color: {bgStyle}; backdrop-filter: {filterStyle};"
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={ariaLabelledBy}
+    tabindex="-1"
+  >
+    {@render children?.()}
+  </div>
+{/if}

frontend/src/lib/dialogs/AIConfirmModal.svelte

@@ -1,9 +1,10 @@
 <script>
   import { X, Check, Square, CheckSquare } from 'lucide-svelte';
-  import { fade, scale } from 'svelte/transition';
+  import { scale } from 'svelte/transition';
   import { backOut } from 'svelte/easing';
   import Spinner from '../components/Spinner.svelte';
   import Button from '../components/Button.svelte';
+  import ModalBackdrop from '../components/ModalBackdrop.svelte';
 
   let {
     show = $bindable(false),
@@ -55,34 +56,11 @@
     oncreate?.(selectedTasks);
   }
 
-  function handleBackdropClick(e) {
-    if (e.target === e.currentTarget) {
-      close();
-    }
-  }
-
-  function handleKeydown(e) {
-    if (e.key === 'Escape') {
-      close();
-    }
-  }
-
   let allSelected = $derived(selected.size === subTasks.length && subTasks.length > 0);
   let selectedCount = $derived(selected.size);
 </script>
 
-{#if show}
-  <div
-    transition:fade={{ duration: 150 }}
-    class="fixed inset-0 flex items-start justify-center pt-8 overflow-y-auto z-50"
-    style="background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);"
-    tabindex="-1"
-    onclick={handleBackdropClick}
-    onkeydown={handleKeydown}
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="ai-confirm-title"
-  >
+<ModalBackdrop bind:show opacity={0.4} blur={4} align="top" paddingTop="pt-8" scrollable onclose={close} ariaLabelledBy="ai-confirm-title">
     <div
       transition:scale={{ duration: 200, start: 0.95, easing: backOut }}
       class="relative rounded-xl overflow-hidden max-w-2xl w-full mx-4 mb-8"
@@ -209,5 +187,4 @@
         </div>
       {/if}
     </div>
-  </div>
-{/if}
+</ModalBackdrop>