merge(08-03): Favorites widget with backend persistence

.planning/phases/08-dashboard-widgets-vollimplementierung/08-03-SUMMARY.md

@@ -0,0 +1,172 @@
+---
+phase: 08-dashboard-widgets-vollimplementierung
+plan: "03"
+subsystem: dashboard-widgets
+tags: [favorites, widget, tdd, dashboard, persistence, ssrf, i18n, icons]
+status: complete
+
+dependency_graph:
+  requires:
+    - 08-01 (wireFavoritesWidget, WIDGET_CONSTRAINTS.favorites, i18n keys)
+    - 08-02 (no direct dep, wave-3 parallel)
+  provides:
+    - FavoritesWidget component (add/edit/delete, list/grid, letter fallback)
+    - FavoriteLink Prisma model (userId/tenantId/widgetId scoped)
+    - FavoritesModule NestJS (CRUD + SSRF icon discovery)
+    - favorites-api.ts client (fetchFavorites/createFavorite/updateFavorite/deleteFavorite)
+    - wireFavoritesWidget() now connected in page.tsx
+  affects:
+    - apps/api/prisma/schema.prisma
+    - apps/api/src/app.module.ts
+    - apps/web/src/app/(portal)/page.tsx
+
+tech_stack:
+  added: []
+  patterns:
+    - TDD Red/Green cycle (FavoritesWidget behavioral contract)
+    - SSRF protection ported from personal-dashboard/favorite-icons.ts
+    - redirect: 'manual' with per-hop DNS check (T-08-05)
+    - userId + widgetId scoping for all DB queries (T-08-06 / Pitfall 3)
+    - useEffect dep array excludes t() to prevent re-fetch on each render
+    - letter fallback span always in DOM (img layered on top via absolute positioning)
+
+key_files:
+  created:
+    - apps/api/src/favorites/favorites.module.ts
+    - apps/api/src/favorites/favorites.controller.ts
+    - apps/api/src/favorites/favorites.service.ts
+    - apps/api/src/favorites/icon-discovery.service.ts
+    - apps/api/src/favorites/dto/create-favorite.dto.ts
+    - apps/api/src/favorites/dto/update-favorite.dto.ts
+    - apps/web/src/lib/favorites-api.ts
+    - apps/web/src/components/dashboard/widgets/favorites-widget.tsx
+    - apps/web/src/components/dashboard/widgets/favorites-widget.test.tsx
+  modified:
+    - apps/api/prisma/schema.prisma (FavoriteLink model added)
+    - apps/api/src/app.module.ts (FavoritesModule registered)
+    - apps/web/src/app/(portal)/page.tsx (wireFavoritesWidget added)
+
+decisions:
+  - "useEffect deps: [instanceId] only — t() mock creates new fn ref on each render, causing re-fetch loops in tests; excluded intentionally"
+  - "dangerouslySetInnerHTML comment-only occurrences (2) are explanation comments, not actual usage — XSS threat T-08-07 mitigated"
+  - "Letter fallback span always rendered (absolute positioned), img layered on top and hidden via onError — avoids flash-of-no-icon"
+  - "Sync act() + waitFor() pattern in tests — async act() hangs when component uses void async handlers; waitFor polls until promise chain settles"
+
+metrics:
+  duration: "~25 minutes"
+  completed: "2026-07-01"
+  tasks_completed: 3
+  tests_added: 7
+  files_created: 9
+  files_modified: 3
+---
+
+# Phase 08 Plan 03: Favorites Widget Summary
+
+Favorites-Widget Vollimplementierung (DASH-09) via TDD Red/Green-Zyklus: persistente Favoritenliste mit server-seitiger Icon-Discovery (SSRF-Schutz), Inline-CRUD im Edit-Modus, Liste/Kacheln-Ansicht und Buchstaben-Fallback.
+
+## What Was Built
+
+- **FavoriteLink Prisma Model**: Felder userId, tenantId, widgetId, title, url, iconUrl (nullable), position. Indizes auf userId, tenantId, widgetId (Pitfall 3 — jede Widget-Instanz hat ihre eigene Favoritenliste).
+
+- **IconDiscoveryService** (`icon-discovery.service.ts`): Port aus `personal-dashboard/src/lib/favorite-icons.ts`. SSRF-Schutz: DNS-Aufloesung jeder URL und jedes Redirect-Ziels, private IPv4/IPv6-Ranges blockiert, blocked hostnames (localhost/.local/0.0.0.0), `redirect: 'manual'` mit manueller Redirect-Verfolgung bis MAX_REDIRECTS=2, 4000ms AbortController-Timeout, 200k-Zeichen HTML-Cap (T-08-05, T-08-09). User-Agent geaendert auf `tessera/1.0`.
+
+- **FavoritesModule** (NestJS): FavoritesController (GET/POST/PATCH/DELETE /favorites), FavoritesService (list/create/update/remove — alle Queries scoped by userId, T-08-06), IconDiscoveryService als Provider. In AppModule registriert.
+
+- **favorites-api.ts**: FavoriteLink-Typ + fetchFavorites(widgetId)/createFavorite(payload)/updateFavorite(id, payload)/deleteFavorite(id). Alle Requests mit `credentials: 'include'` und API_URL/favorites.
+
+- **FavoritesWidget** (`favorites-widget.tsx`): 'use client', useTranslations. Laedt Favoriten beim Mount via fetchFavorites(instanceId). Sortierung nach position asc + title asc. Listenansicht (default) und Kachelansicht (umschaltbar im Edit-Modus, persists via updateWidgetConfig). Inline-CRUD im Edit-Modus: '+'-Formular, Bearbeiten-Inline-Form, Loeschen-Button. Icons: `<img>` mit onError-Hide + `<span data-testid="letter-fallback-{id}">` als Buchstaben-Fallback. Links: target="_blank" rel="noreferrer" (T-08-08). Kein dangerouslySetInnerHTML (T-08-07).
+
+- **page.tsx Wiring**: `wireFavoritesWidget(FavoritesWidget)` hinzugefuegt.
+
+## Tasks
+
+| Task | Description | Status | Commit |
+|------|-------------|--------|--------|
+| 1 | RED: Failing tests fuer FavoritesWidget CRUD + view toggle + letter fallback | Complete | a3bb3f2 |
+| 2 | FavoriteLink schema + FavoritesModule (CRUD + SSRF icon discovery) | Complete | 758d246 |
+| 3 | GREEN: FavoritesWidget frontend + API client + page.tsx wiring | Complete | cc6f5ae |
+
+## Test Results
+
+- **favorites-widget.test.tsx**: 7 Tests — fetchFavorites mit instanceId aufgerufen, empty state, add-Formular, inline edit, delete mit DOM-Entfernung, list/grid toggle, Buchstaben-Fallback
+- **Full Web Suite**: 81/81 Tests bestehen (17 Test-Dateien)
+- **Web TypeScript**: sauber (0 Fehler)
+- **API TypeScript**: sauber (0 Fehler, prisma generate erfolgreich)
+
+## Deviations from Plan
+
+### Worktree Fast-Forward (auto-fix, Rule 3)
+
+**Found during:** Pre-task setup
+
+**Issue:** Das Worktree-Branch `worktree-agent-a80275c51086517d1` war bei `88db54f` (vor phase-08-Commits), nicht am erwarteten Basis-Commit `4645a5f` (Main nach Wave 2). Phase-08 wave-1 und wave-2 Artefakte (wireFavoritesWidget, WIDGET_CONSTRAINTS, i18n-Keys) fehlten.
+
+**Fix:** `git merge main --ff-only` — Fast-Forward auf `4645a5f`. Keine Konflikte. Node-Modules-Symlinks danach erstellt.
+
+**Impact:** Keiner. Alle Plan-01 und Plan-02-Artefakte standen danach vollstaendig zur Verfuegung.
+
+### useEffect Dependency Array: t() ausgeschlossen (auto-fix, Rule 1)
+
+**Found during:** Task 3 GREEN — test 'edit' scheiterte bei waitFor (saveButton nicht sichtbar)
+
+**Issue:** `t()` aus `useTranslations()` war in `useEffect([instanceId, t])`-Abhaengigkeiten. Der Mock erzeugt bei jedem Render eine neue Funktionsreferenz -> useEffect feuert bei jedem State-Update neu -> `setLoading(true)` loescht die geladenen Favoriten.
+
+**Fix:** Dependency-Array auf `[instanceId]` reduziert; error-Fallback nutzt stabilen String-Key statt `t()`. Kommentar erklaert Entscheidung.
+
+**Files modified:** `favorites-widget.tsx` (useEffect)
+
+**Commit:** cc6f5ae
+
+### Testmuster: Sync act() + waitFor() statt async act() (auto-fix, Rule 1)
+
+**Found during:** Task 3 GREEN — add/edit/delete Tests timeout nach 5000ms
+
+**Issue:** `await act(async () => { fireEvent.click(btn); })` bei Komponenten die `void asyncHandler(e)` nutzen: act() wartet nicht auf asynchrone Fortsetzungen in `void`-discarded Promises.
+
+**Fix:** Interaktions-Events mit sync `act(() => { fireEvent...; })` aufgerufen; assertions in `await waitFor(() => ...)` verschoben. waitFor pollt bis die async-Kette (API-Mock -> setState) abgeschlossen ist.
+
+**Files modified:** `favorites-widget.test.tsx`
+
+**Commit:** cc6f5ae
+
+### dangerouslySetInnerHTML grep-count = 2 (kein Problem)
+
+Beide Vorkommen sind in **Kommentaren** (Zeile 24 und 354) die erklaeren WARUM dangerouslySetInnerHTML nicht verwendet wird. Kein tatsaechlicher JSX-Attribut-Einsatz. T-08-07 korrekt mitigiert.
+
+## Known Stubs
+
+Keine Stubs. FavoritesWidget ist vollstaendig implementiert und mit Backend verbunden.
+
+## Threat Surface Scan
+
+Alle Threats aus dem Plan-Threat-Register wurden mitigiert:
+
+| Threat ID | Status |
+|-----------|--------|
+| T-08-05 (SSRF via IconDiscoveryService) | Mitigiert — vollstaendiger SSRF-Guard portiert: DNS-Check, private IPs, redirect:manual, 4000ms Timeout, 200k HTML-Cap |
+| T-08-06 (Spoofing via FavoritesService) | Mitigiert — jede Query scoped by userId + widgetId; NotFoundException bei Ownership-Mismatch |
+| T-08-07 (XSS via icon render) | Mitigiert — iconUrl nur via `<img src>`; kein dangerouslySetInnerHTML |
+| T-08-08 (open redirect) | Mitigiert — Links mit target="_blank" rel="noreferrer"; kein server-seitiger Redirect |
+| T-08-09 (DoS via HTML fetch) | Mitigiert — MAX_HTML_CHARS 200000 Truncation + 4000ms AbortController |
+
+Keine neuen Sicherheitsoberflaechen eingefuehrt, die nicht im Threat-Modell erwaehnt waren.
+
+## Self-Check: PASSED
+
+| Item | Status |
+|------|--------|
+| favorites-widget.tsx | FOUND |
+| favorites-widget.test.tsx | FOUND |
+| favorites-api.ts | FOUND |
+| favorites.module.ts | FOUND |
+| icon-discovery.service.ts | FOUND |
+| FavoriteLink in schema.prisma | FOUND |
+| FavoritesModule in app.module.ts | FOUND |
+| page.tsx: wireFavoritesWidget(FavoritesWidget) | FOUND |
+| Commit a3bb3f2 (RED) | FOUND |
+| Commit 758d246 (backend) | FOUND |
+| Commit cc6f5ae (GREEN) | FOUND |
+| Full suite 81/81 | PASSED |
+| Web TypeScript: 0 errors | PASSED |
+| API TypeScript: 0 errors | PASSED |

apps/api/prisma/schema.prisma

@@ -233,3 +233,20 @@ model SmtpConfig {
   createdAt         DateTime @default(now())
   updatedAt         DateTime @updatedAt
 }
+
+model FavoriteLink {
+  id        String   @id @default(uuid())
+  userId    String
+  tenantId  String
+  widgetId  String
+  title     String
+  url       String
+  iconUrl   String?
+  position  Int      @default(0)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([userId])
+  @@index([tenantId])
+  @@index([widgetId])
+}

apps/api/src/app.module.ts

@@ -12,6 +12,7 @@ import { MailModule } from './mail/mail.module';
 import { CalendarModule } from './calendar/calendar.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { DkvModule } from './dkv/dkv.module';
+import { FavoritesModule } from './favorites/favorites.module';
 import { DomaincheckModule } from './domaincheck/domaincheck.module';
 import { ModuleRegistryModule } from './module-registry/module-registry.module';
 import { PrismaModule } from './prisma/prisma.module';
@@ -37,6 +38,7 @@ import { UserModule } from './user/user.module';
     CalendarModule,
     SettingsModule,
     DkvModule,
+    FavoritesModule,
   ],
   providers: [
     // Global JWT guard: all routes require auth unless @Public()

apps/api/src/favorites/dto/create-favorite.dto.ts

@@ -0,0 +1,32 @@
+import {
+  IsInt,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  IsUrl,
+  IsUUID,
+} from 'class-validator';
+
+/**
+ * DTO for creating a new FavoriteLink.
+ * widgetId scopes the link to a specific widget instance (T-08-06 / Pitfall 3).
+ */
+export class CreateFavoriteDto {
+  @IsUUID()
+  widgetId!: string;
+
+  @IsString()
+  @IsNotEmpty()
+  title!: string;
+
+  @IsUrl()
+  url!: string;
+
+  @IsOptional()
+  @IsString()
+  iconUrl?: string;
+
+  @IsOptional()
+  @IsInt()
+  position?: number;
+}

apps/api/src/favorites/dto/update-favorite.dto.ts

@@ -0,0 +1,27 @@
+import { IsInt, IsOptional, IsString, IsUrl } from 'class-validator';
+
+/**
+ * DTO for updating an existing FavoriteLink.
+ * All fields are optional — only provided fields are updated.
+ * iconUrl accepts null explicitly to clear a stored icon.
+ */
+export class UpdateFavoriteDto {
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @IsOptional()
+  @IsUrl()
+  url?: string;
+
+  /**
+   * iconUrl can be a string (updated URL), null (clear icon), or absent (no change).
+   * No strict type validation so null passes through to Prisma.
+   */
+  @IsOptional()
+  iconUrl?: string | null;
+
+  @IsOptional()
+  @IsInt()
+  position?: number;
+}

apps/api/src/favorites/favorites.controller.ts

@@ -0,0 +1,88 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  ForbiddenException,
+  Get,
+  Param,
+  Patch,
+  Post,
+  Query,
+  Req,
+} from '@nestjs/common';
+import { Request } from 'express';
+import { CreateFavoriteDto } from './dto/create-favorite.dto';
+import { UpdateFavoriteDto } from './dto/update-favorite.dto';
+import { FavoritesService } from './favorites.service';
+
+/**
+ * REST controller for per-user, per-widget favorite links.
+ *
+ * All routes are protected by the global JwtAuthGuard + TenantGuard.
+ *
+ * Routes:
+ * - GET  /favorites?widgetId=   — list favorites for a widget instance
+ * - POST /favorites             — create a favorite (triggers server-side icon discovery)
+ * - PATCH /favorites/:id        — update a favorite (ownership verified in service)
+ * - DELETE /favorites/:id       — delete a favorite (ownership verified in service)
+ */
+@Controller('favorites')
+export class FavoritesController {
+  constructor(private readonly favoritesService: FavoritesService) {}
+
+  private extractContext(req: Request) {
+    const userId = (req as any).user?.id;
+    const tenantId =
+      (req as any).tenantId ?? (req as any).user?.tenantId;
+
+    if (!tenantId) {
+      throw new ForbiddenException('No tenant context');
+    }
+    if (!userId) {
+      throw new ForbiddenException('No user context');
+    }
+
+    return { userId, tenantId };
+  }
+
+  @Get()
+  async list(
+    @Query('widgetId') widgetId: string,
+    @Req() req: Request,
+  ) {
+    const { userId } = this.extractContext(req);
+
+    return this.favoritesService.list(userId, widgetId);
+  }
+
+  @Post()
+  async create(
+    @Body() dto: CreateFavoriteDto,
+    @Req() req: Request,
+  ) {
+    const { userId, tenantId } = this.extractContext(req);
+
+    return this.favoritesService.create(userId, tenantId, dto);
+  }
+
+  @Patch(':id')
+  async update(
+    @Param('id') id: string,
+    @Body() dto: UpdateFavoriteDto,
+    @Req() req: Request,
+  ) {
+    const { userId } = this.extractContext(req);
+
+    return this.favoritesService.update(id, userId, dto);
+  }
+
+  @Delete(':id')
+  async remove(
+    @Param('id') id: string,
+    @Req() req: Request,
+  ) {
+    const { userId } = this.extractContext(req);
+
+    return this.favoritesService.remove(id, userId);
+  }
+}

apps/api/src/favorites/favorites.module.ts

@@ -0,0 +1,20 @@
+import { Module } from '@nestjs/common';
+import { FavoritesController } from './favorites.controller';
+import { FavoritesService } from './favorites.service';
+import { IconDiscoveryService } from './icon-discovery.service';
+
+/**
+ * NestJS module for per-user favorite link management.
+ *
+ * Provides:
+ * - FavoritesController: REST API under /favorites (CRUD scoped by user + widget)
+ * - FavoritesService:    Business logic with userId-scoped queries (T-08-06)
+ * - IconDiscoveryService: Server-side icon/favicon discovery with SSRF protection (T-08-05)
+ *
+ * PrismaModule is global — no need to re-import here.
+ */
+@Module({
+  controllers: [FavoritesController],
+  providers: [FavoritesService, IconDiscoveryService],
+})
+export class FavoritesModule {}

apps/api/src/favorites/favorites.service.ts

@@ -0,0 +1,96 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { CreateFavoriteDto } from './dto/create-favorite.dto';
+import { UpdateFavoriteDto } from './dto/update-favorite.dto';
+import { IconDiscoveryService } from './icon-discovery.service';
+
+/**
+ * Service for managing per-user, per-widget favorite links.
+ *
+ * Access control (T-08-06 / Pitfall 3):
+ * - Every query is scoped by userId (prevents cross-user access).
+ * - list() additionally scopes by widgetId so each widget instance has its own set.
+ * - update() and remove() verify userId ownership before mutating.
+ */
+@Injectable()
+export class FavoritesService {
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly iconDiscovery: IconDiscoveryService,
+  ) {}
+
+  /**
+   * Returns all favorites for a user's widget instance, ordered by position asc.
+   * Scoped by userId AND widgetId (Pitfall 3 — separate widgets must not share links).
+   */
+  async list(userId: string, widgetId: string) {
+    return this.prisma.favoriteLink.findMany({
+      where: { userId, widgetId },
+      orderBy: [{ position: 'asc' }, { title: 'asc' }],
+    });
+  }
+
+  /**
+   * Creates a new favorite link.
+   * If iconUrl is not provided, triggers server-side icon discovery with SSRF protection.
+   */
+  async create(userId: string, tenantId: string, dto: CreateFavoriteDto) {
+    let iconUrl = dto.iconUrl ?? null;
+
+    // Server-side icon discovery (D-05) — only when caller did not supply an icon
+    if (!iconUrl) {
+      iconUrl = await this.iconDiscovery.discoverFavoriteIconUrl(dto.url);
+    }
+
+    return this.prisma.favoriteLink.create({
+      data: {
+        userId,
+        tenantId,
+        widgetId: dto.widgetId,
+        title: dto.title,
+        url: dto.url,
+        iconUrl,
+        position: dto.position ?? 0,
+      },
+    });
+  }
+
+  /**
+   * Updates an existing favorite.
+   * Verifies userId ownership before applying changes (T-08-06).
+   * Accepts null as an explicit value for iconUrl (clears stored icon).
+   */
+  async update(id: string, userId: string, dto: UpdateFavoriteDto) {
+    const link = await this.prisma.favoriteLink.findUnique({ where: { id } });
+
+    if (!link || link.userId !== userId) {
+      throw new NotFoundException('FavoriteLink not found');
+    }
+
+    const data: Record<string, unknown> = {};
+
+    if (dto.title !== undefined) data.title = dto.title;
+    if (dto.url !== undefined) data.url = dto.url;
+    if ('iconUrl' in dto) data.iconUrl = dto.iconUrl; // Allows explicit null
+    if (dto.position !== undefined) data.position = dto.position;
+
+    return this.prisma.favoriteLink.update({
+      where: { id },
+      data,
+    });
+  }
+
+  /**
+   * Deletes a favorite link.
+   * Verifies userId ownership before deleting (T-08-06).
+   */
+  async remove(id: string, userId: string) {
+    const link = await this.prisma.favoriteLink.findUnique({ where: { id } });
+
+    if (!link || link.userId !== userId) {
+      throw new NotFoundException('FavoriteLink not found');
+    }
+
+    await this.prisma.favoriteLink.delete({ where: { id } });
+  }
+}

apps/api/src/favorites/icon-discovery.service.ts

@@ -0,0 +1,283 @@
+import { Injectable } from '@nestjs/common';
+import { lookup } from 'dns/promises';
+import { isIP } from 'net';
+
+/**
+ * Server-side favicon / icon discovery with SSRF protection (T-08-05).
+ *
+ * Ported from personal-dashboard/src/lib/favorite-icons.ts.
+ * Security guards:
+ * - DNS resolves every URL (including redirects) and checks for private IP ranges
+ * - redirect: 'manual' — follows redirects manually so each hop is re-validated
+ * - 4000 ms AbortController timeout per request
+ * - 200 000 character HTML cap to prevent memory exhaustion (T-08-09)
+ * - Blocked hostnames: localhost, .local, 0.0.0.0
+ */
+
+const FALLBACK_ICON_PATH = '/favicon.ico';
+const HTML_FETCH_TIMEOUT_MS = 4000;
+const MAX_REDIRECTS = 2;
+const MAX_HTML_CHARS = 200000;
+
+type FetchHtmlResult = {
+  html: string;
+  finalUrl: string;
+};
+
+function isPrivateIpv4(address: string): boolean {
+  const parts = address.split('.').map((part) => Number.parseInt(part, 10));
+
+  if (
+    parts.length !== 4 ||
+    parts.some(
+      (part) => !Number.isInteger(part) || part < 0 || part > 255,
+    )
+  ) {
+    return true;
+  }
+
+  const [a, b] = parts;
+
+  return (
+    a === 0 ||
+    a === 10 ||
+    a === 127 ||
+    (a === 100 && b !== undefined && b >= 64 && b <= 127) ||
+    (a === 169 && b === 254) ||
+    (a === 172 && b !== undefined && b >= 16 && b <= 31) ||
+    (a === 192 && b === 168) ||
+    (a === 192 && b === 0) ||
+    (a === 198 && (b === 18 || b === 19)) ||
+    a >= 224
+  );
+}
+
+function isPrivateIpv6(address: string): boolean {
+  const lower = address.toLowerCase();
+
+  return (
+    lower === '::' ||
+    lower === '::1' ||
+    lower.startsWith('fc') ||
+    lower.startsWith('fd') ||
+    lower.startsWith('fe80:') ||
+    lower.startsWith('::ffff:127.') ||
+    lower.startsWith('::ffff:10.') ||
+    lower.startsWith('::ffff:192.168.')
+  );
+}
+
+function isPrivateIpAddress(address: string): boolean {
+  const version = isIP(address);
+
+  if (version === 4) return isPrivateIpv4(address);
+  if (version === 6) return isPrivateIpv6(address);
+
+  return true; // Unknown format → block by default
+}
+
+function isBlockedHostname(hostname: string): boolean {
+  const h = hostname.trim().toLowerCase();
+
+  return (
+    h === 'localhost' ||
+    h.endsWith('.localhost') ||
+    h.endsWith('.local') ||
+    h === '0.0.0.0'
+  );
+}
+
+async function isPublicHttpUrl(url: URL): Promise<boolean> {
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+    return false;
+  }
+
+  if (isBlockedHostname(url.hostname)) {
+    return false;
+  }
+
+  const directVersion = isIP(url.hostname);
+
+  if (directVersion !== 0) {
+    return !isPrivateIpAddress(url.hostname);
+  }
+
+  try {
+    const addresses = await lookup(url.hostname, { all: true });
+
+    if (addresses.length === 0) return false;
+
+    return addresses.every((a) => !isPrivateIpAddress(a.address));
+  } catch {
+    return false;
+  }
+}
+
+function getOriginFaviconUrl(pageUrl: string): string {
+  try {
+    const url = new URL(pageUrl);
+
+    return new URL(FALLBACK_ICON_PATH, url.origin).toString();
+  } catch {
+    return FALLBACK_ICON_PATH;
+  }
+}
+
+function parseAttributes(tag: string): Record<string, string> {
+  const attrs: Record<string, string> = {};
+  const re = /([a-zA-Z_:.-]+)\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
+  let m: RegExpExecArray | null;
+
+  while ((m = re.exec(tag)) !== null) {
+    const key = m[1].toLowerCase();
+    const value = m[3] ?? m[4] ?? m[5] ?? '';
+
+    attrs[key] = value;
+  }
+
+  return attrs;
+}
+
+function toAbsoluteUrl(value: string | undefined, base: string): string | null {
+  if (!value) return null;
+
+  try {
+    const url = new URL(value, base);
+
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
+
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+
+function extractIconFromHtml(html: string, baseUrl: string): string | null {
+  const linkTags = html.match(/<link\b[^>]*>/gi) ?? [];
+  const metaTags = html.match(/<meta\b[^>]*>/gi) ?? [];
+
+  const linkCandidates = linkTags
+    .map((tag) => parseAttributes(tag))
+    .map((a) => ({
+      rel: (a.rel ?? '').toLowerCase(),
+      href: toAbsoluteUrl(a.href, baseUrl),
+    }))
+    .filter((c) => c.href);
+
+  const appleTouchIcon = linkCandidates.find((c) =>
+    c.rel.includes('apple-touch-icon'),
+  )?.href;
+
+  if (appleTouchIcon) return appleTouchIcon;
+
+  const icon = linkCandidates.find((c) =>
+    c.rel.split(/\s+/).includes('icon'),
+  )?.href;
+
+  if (icon) return icon;
+
+  const shortcutIcon = linkCandidates.find((c) =>
+    c.rel.includes('shortcut icon'),
+  )?.href;
+
+  if (shortcutIcon) return shortcutIcon;
+
+  const imageSrc = linkCandidates.find((c) =>
+    c.rel.includes('image_src'),
+  )?.href;
+
+  if (imageSrc) return imageSrc;
+
+  const metaImage = metaTags
+    .map((tag) => parseAttributes(tag))
+    .map((a) => ({
+      property: (a.property ?? a.name ?? '').toLowerCase(),
+      content: toAbsoluteUrl(a.content, baseUrl),
+    }))
+    .find(
+      (c) =>
+        c.content &&
+        (c.property === 'og:image' ||
+          c.property === 'og:logo' ||
+          c.property === 'twitter:image'),
+    )?.content;
+
+  return metaImage ?? null;
+}
+
+async function fetchHtml(pageUrl: URL): Promise<FetchHtmlResult | null> {
+  let currentUrl = pageUrl;
+
+  for (let redirectCount = 0; redirectCount <= MAX_REDIRECTS; redirectCount++) {
+    const isPublic = await isPublicHttpUrl(currentUrl);
+
+    if (!isPublic) return null;
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), HTML_FETCH_TIMEOUT_MS);
+
+    try {
+      const response = await fetch(currentUrl.toString(), {
+        redirect: 'manual', // SSRF: follow manually so each hop is re-validated
+        signal: controller.signal,
+        headers: {
+          Accept: 'text/html,application/xhtml+xml,*/*',
+          'User-Agent': 'tessera/1.0',
+        },
+      });
+
+      if (response.status >= 300 && response.status < 400) {
+        const location = response.headers.get('location');
+
+        if (!location) return null;
+
+        currentUrl = new URL(location, currentUrl);
+        continue;
+      }
+
+      if (!response.ok) return null;
+
+      const contentType = response.headers.get('content-type') ?? '';
+
+      if (!contentType.toLowerCase().includes('text/html')) return null;
+
+      const html = await response.text();
+
+      return {
+        html: html.slice(0, MAX_HTML_CHARS), // T-08-09: HTML cap
+        finalUrl: currentUrl.toString(),
+      };
+    } catch {
+      return null;
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+
+  return null;
+}
+
+@Injectable()
+export class IconDiscoveryService {
+  /**
+   * Discover the best icon URL for a given web page URL.
+   * Falls back to <origin>/favicon.ico when discovery fails or URL is private.
+   *
+   * SSRF protection: every URL and redirect target is validated against
+   * private IP ranges, blocked hostnames, and forced-proxy vectors (T-08-05).
+   */
+  async discoverFavoriteIconUrl(pageUrl: string): Promise<string> {
+    const fallback = getOriginFaviconUrl(pageUrl);
+
+    try {
+      const url = new URL(pageUrl);
+      const htmlResult = await fetchHtml(url);
+
+      if (!htmlResult) return fallback;
+
+      return extractIconFromHtml(htmlResult.html, htmlResult.finalUrl) ?? fallback;
+    } catch {
+      return fallback;
+    }
+  }
+}

apps/web/src/app/(portal)/page.tsx

@@ -5,13 +5,14 @@ import { useTranslations } from 'next-intl';
 import { DashboardGrid } from '@/components/dashboard/dashboard-grid';
 import { EditModeToggle } from '@/components/dashboard/edit-mode-toggle';
 import { WidgetCatalogModal } from '@/components/dashboard/widget-catalog-modal';
-import { wireClockWidget, wireSearchWidget, wireCalendarWidget, wireNoteWidget, wireCalculatorWidget, wireStopwatchWidget } from '@/components/dashboard/widget-registry';
+import { wireClockWidget, wireSearchWidget, wireCalendarWidget, wireNoteWidget, wireCalculatorWidget, wireStopwatchWidget, wireFavoritesWidget } from '@/components/dashboard/widget-registry';
 import { ClockWidget } from '@/components/dashboard/widgets/clock-widget';
 import { SearchWidget } from '@/components/dashboard/widgets/search-widget';
 import { CalendarWidget } from '@/components/dashboard/widgets/calendar-widget';
 import { NoteWidget } from '@/components/dashboard/widgets/note-widget';
 import { CalculatorWidget } from '@/components/dashboard/widgets/calculator-widget';
 import { StopwatchWidget } from '@/components/dashboard/widgets/stopwatch-widget';
+import { FavoritesWidget } from '@/components/dashboard/widgets/favorites-widget';
 import { useDashboardStore } from '@/lib/stores/dashboard-store';
 import type { WidgetType } from '@/components/dashboard/widget-registry';
 
@@ -22,6 +23,7 @@ wireCalendarWidget(CalendarWidget);
 wireNoteWidget(NoteWidget);
 wireCalculatorWidget(CalculatorWidget);
 wireStopwatchWidget(StopwatchWidget);
+wireFavoritesWidget(FavoritesWidget);
 
 export default function DashboardPage() {
   const t = useTranslations('widgets');

apps/web/src/components/dashboard/widgets/favorites-widget.test.tsx

@@ -0,0 +1,290 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock next-intl — passthrough t(key) => key (Pitfall: must be before imports)
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+// Mock favorites-api — all 4 functions as controllable vi.fn() spies
+vi.mock('@/lib/favorites-api', () => ({
+  fetchFavorites: vi.fn(),
+  createFavorite: vi.fn(),
+  updateFavorite: vi.fn(),
+  deleteFavorite: vi.fn(),
+}));
+
+// Mock dashboard-api for updateWidgetConfig (view mode persistence)
+vi.mock('@/lib/dashboard-api', () => ({
+  updateWidgetConfig: vi.fn().mockResolvedValue(undefined),
+}));
+
+import {
+  fetchFavorites,
+  createFavorite,
+  updateFavorite,
+  deleteFavorite,
+} from '@/lib/favorites-api';
+
+// Must import AFTER mocks
+import { FavoritesWidget } from './favorites-widget';
+
+// Typed mock helpers
+const mockFetch = fetchFavorites as ReturnType<typeof vi.fn>;
+const mockCreate = createFavorite as ReturnType<typeof vi.fn>;
+const mockUpdate = updateFavorite as ReturnType<typeof vi.fn>;
+const mockDelete = deleteFavorite as ReturnType<typeof vi.fn>;
+
+const BASE_FAVORITES = [
+  {
+    id: 'fav-id-1',
+    widgetId: 'fav-1',
+    title: 'GitHub',
+    url: 'https://github.com',
+    iconUrl: 'https://github.com/favicon.ico',
+    position: 0,
+  },
+  {
+    id: 'fav-id-2',
+    widgetId: 'fav-1',
+    title: 'Notion',
+    url: 'https://notion.so',
+    iconUrl: null, // null iconUrl → letter fallback 'N'
+    position: 1,
+  },
+];
+
+describe('FavoritesWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default: return the base favorites list
+    mockFetch.mockResolvedValue([...BASE_FAVORITES]);
+    mockCreate.mockResolvedValue({
+      id: 'fav-id-new',
+      widgetId: 'fav-1',
+      title: 'New Link',
+      url: 'https://example.com',
+      iconUrl: null,
+      position: 2,
+    });
+    mockUpdate.mockResolvedValue({
+      ...BASE_FAVORITES[0],
+      title: 'GitHub Updated',
+    });
+    mockDelete.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('calls fetchFavorites with instanceId on mount and renders link titles', async () => {
+    render(
+      <FavoritesWidget
+        instanceId="fav-1"
+        config={{}}
+        isEditMode={false}
+      />,
+    );
+
+    // fetchFavorites must be called with the instanceId (widgetId scope — Pitfall 3)
+    expect(mockFetch).toHaveBeenCalledWith('fav-1');
+
+    // After async resolution, link titles should be visible
+    await waitFor(() => {
+      expect(screen.getByText('GitHub')).toBeInTheDocument();
+      expect(screen.getByText('Notion')).toBeInTheDocument();
+    });
+  });
+
+  it('shows empty message when fetchFavorites resolves to empty array', async () => {
+    mockFetch.mockResolvedValue([]);
+
+    render(
+      <FavoritesWidget
+        instanceId="fav-1"
+        config={{}}
+        isEditMode={false}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('favorites.empty')).toBeInTheDocument();
+    });
+  });
+
+  it('add: submit form in edit mode calls createFavorite with widgetId, title, url', async () => {
+    mockFetch.mockResolvedValue([]);
+
+    render(
+      <FavoritesWidget
+        instanceId="fav-1"
+        config={{}}
+        isEditMode={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('favorites.empty')).toBeInTheDocument();
+    });
+
+    // Fill in the add form (inputs are identified by placeholder translation keys)
+    const titleInput = screen.getByPlaceholderText('favorites.addTitle');
+    const urlInput = screen.getByPlaceholderText('favorites.addUrl');
+
+    // Use sync fireEvent — RTL will flush state updates automatically
+    act(() => {
+      fireEvent.change(titleInput, { target: { value: 'New Link' } });
+      fireEvent.change(urlInput, { target: { value: 'https://example.com' } });
+    });
+
+    // Submit the form
+    const addButton = screen.getByRole('button', { name: /favorites\.addButton/i });
+    act(() => {
+      fireEvent.click(addButton);
+    });
+
+    // waitFor polls until the async chain (createFavorite → setFavorites) completes
+    await waitFor(() => {
+      expect(mockCreate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          widgetId: 'fav-1',
+          title: 'New Link',
+          url: 'https://example.com',
+        }),
+      );
+    });
+
+    // The new link title should appear in the list
+    await waitFor(() => {
+      expect(screen.getByText('New Link')).toBeInTheDocument();
+    });
+  });
+
+  it('edit: clicking edit, changing title, saving calls updateFavorite with id and new title', async () => {
+    render(
+      <FavoritesWidget
+        instanceId="fav-1"
+        config={{}}
+        isEditMode={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('GitHub')).toBeInTheDocument();
+    });
+
+    // Click the edit button for 'GitHub' (aria-label is the translation key)
+    const editButtons = screen.getAllByRole('button', {
+      name: /favorites\.editButton/i,
+    });
+    act(() => {
+      fireEvent.click(editButtons[0]);
+    });
+
+    // Change the title in the inline edit form
+    await waitFor(() => {
+      expect(screen.getByDisplayValue('GitHub')).toBeInTheDocument();
+    });
+    const editTitleInput = screen.getByDisplayValue('GitHub');
+    act(() => {
+      fireEvent.change(editTitleInput, { target: { value: 'GitHub Updated' } });
+    });
+
+    // Click Save
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /favorites\.saveButton/i })).toBeInTheDocument();
+    });
+    const saveButton = screen.getByRole('button', {
+      name: /favorites\.saveButton/i,
+    });
+    act(() => {
+      fireEvent.click(saveButton);
+    });
+
+    // updateFavorite called with the favorite id and new title
+    await waitFor(() => {
+      expect(mockUpdate).toHaveBeenCalledWith(
+        'fav-id-1',
+        expect.objectContaining({ title: 'GitHub Updated' }),
+      );
+    });
+  });
+
+  it('delete: clicking delete calls deleteFavorite with id and removes the row', async () => {
+    render(
+      <FavoritesWidget
+        instanceId="fav-1"
+        config={{}}
+        isEditMode={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('GitHub')).toBeInTheDocument();
+    });
+
+    // Click the delete button for 'GitHub' (first delete button)
+    const deleteButtons = screen.getAllByRole('button', {
+      name: /favorites\.deleteButton/i,
+    });
+    act(() => {
+      fireEvent.click(deleteButtons[0]);
+    });
+
+    // deleteFavorite called with the correct id
+    await waitFor(() => {
+      expect(mockDelete).toHaveBeenCalledWith('fav-id-1');
+    });
+
+    // The deleted favorite is removed from the list
+    await waitFor(() => {
+      expect(screen.queryByText('GitHub')).not.toBeInTheDocument();
+    });
+  });
+
+  it('view toggle: switching to grid in edit mode renders grid container', async () => {
+    render(
+      <FavoritesWidget
+        instanceId="fav-1"
+        config={{ viewMode: 'list' }}
+        isEditMode={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('GitHub')).toBeInTheDocument();
+    });
+
+    // Default list view — list container should be present
+    expect(screen.getByTestId('favorites-list')).toBeInTheDocument();
+
+    // Click the 'Kacheln' (grid) toggle button
+    const gridButton = screen.getByRole('button', {
+      name: /favorites\.gridView/i,
+    });
+    await act(async () => {
+      fireEvent.click(gridButton);
+    });
+
+    // Grid container should now be rendered
+    expect(screen.getByTestId('favorites-grid')).toBeInTheDocument();
+  });
+
+  it('letter fallback: link with iconUrl null renders first uppercase letter of title', async () => {
+    render(
+      <FavoritesWidget
+        instanceId="fav-1"
+        config={{}}
+        isEditMode={false}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Notion')).toBeInTheDocument();
+    });
+
+    // 'Notion' has iconUrl null — the letter fallback span should show 'N'
+    expect(screen.getByTestId('letter-fallback-fav-id-2')).toHaveTextContent('N');
+  });
+});

apps/web/src/components/dashboard/widgets/favorites-widget.tsx

@@ -0,0 +1,462 @@
+'use client';
+
+import { FormEvent, useEffect, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { updateWidgetConfig } from '@/lib/dashboard-api';
+import {
+  createFavorite,
+  deleteFavorite,
+  fetchFavorites,
+  updateFavorite,
+  type FavoriteLink,
+} from '@/lib/favorites-api';
+import type { WidgetProps } from '@/components/dashboard/widget-registry';
+
+/**
+ * FavoritesWidget — persistent per-widget list of favorite links (DASH-09).
+ *
+ * Features:
+ * - Loads favorites scoped to this widget instance via instanceId (Pitfall 3)
+ * - Add / edit / delete in edit mode with inline forms
+ * - List view (default, D-03) and grid view switchable in edit mode
+ * - Server-side icon discovery (letter fallback when iconUrl is null)
+ * - Links open in new tab with rel="noreferrer" (T-08-08 open-redirect mitigation)
+ * - No dangerouslySetInnerHTML (T-08-07 XSS mitigation)
+ */
+export function FavoritesWidget({
+  instanceId,
+  config,
+  isEditMode,
+}: WidgetProps) {
+  const t = useTranslations('widgets');
+
+  const [favorites, setFavorites] = useState<FavoriteLink[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // View mode: read from config, default 'list' (D-03)
+  const [viewMode, setViewMode] = useState<'list' | 'grid'>(
+    (config.viewMode as 'list' | 'grid') ?? 'list',
+  );
+
+  // Add-form state
+  const [newTitle, setNewTitle] = useState('');
+  const [newUrl, setNewUrl] = useState('');
+  const [newIconUrl, setNewIconUrl] = useState('');
+
+  // Inline edit state
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editTitle, setEditTitle] = useState('');
+  const [editUrl, setEditUrl] = useState('');
+  const [editIconUrl, setEditIconUrl] = useState('');
+
+  // Sorted favorites: position asc, then title asc
+  const sortedFavorites = useMemo(
+    () =>
+      [...favorites].sort((a, b) => {
+        if (a.position !== b.position) return a.position - b.position;
+        return a.title.localeCompare(b.title);
+      }),
+    [favorites],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await fetchFavorites(instanceId);
+        if (!cancelled) setFavorites(data);
+      } catch {
+        // Use a stable error key — t is excluded from deps intentionally
+        if (!cancelled) setError('favorites.error');
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+    // instanceId is the only meaningful dependency — t is stable at runtime
+    // and excluded to prevent re-fetching on every render (mock creates new fn)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instanceId]);
+
+  function getFallbackLetter(title: string): string {
+    const clean = title.trim();
+    return clean ? clean.slice(0, 1).toUpperCase() : '?';
+  }
+
+  // --- View mode toggle (edit mode only, D-03) ---
+  function handleViewMode(next: 'list' | 'grid') {
+    setViewMode(next);
+    void updateWidgetConfig(instanceId, { viewMode: next });
+  }
+
+  // --- Add favorite ---
+  async function handleAdd(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const cleanTitle = newTitle.trim();
+    const cleanUrl = newUrl.trim();
+    const cleanIconUrl = newIconUrl.trim();
+
+    if (!cleanTitle || !cleanUrl) return;
+
+    try {
+      const created = await createFavorite({
+        widgetId: instanceId,
+        title: cleanTitle,
+        url: cleanUrl,
+        iconUrl: cleanIconUrl || undefined,
+      });
+      setFavorites((prev) => [...prev, created]);
+      setNewTitle('');
+      setNewUrl('');
+      setNewIconUrl('');
+    } catch {
+      setError(t('favorites.error'));
+    }
+  }
+
+  // --- Edit favorite ---
+  function startEdit(fav: FavoriteLink) {
+    setEditingId(fav.id);
+    setEditTitle(fav.title);
+    setEditUrl(fav.url);
+    setEditIconUrl(fav.iconUrl ?? '');
+    setError(null);
+  }
+
+  function cancelEdit() {
+    setEditingId(null);
+    setEditTitle('');
+    setEditUrl('');
+    setEditIconUrl('');
+  }
+
+  async function handleSaveEdit(id: string) {
+    const cleanTitle = editTitle.trim();
+    const cleanUrl = editUrl.trim();
+    const cleanIconUrl = editIconUrl.trim();
+
+    if (!cleanTitle || !cleanUrl) return;
+
+    try {
+      const updated = await updateFavorite(id, {
+        title: cleanTitle,
+        url: cleanUrl,
+        iconUrl: cleanIconUrl || null,
+      });
+      setFavorites((prev) => prev.map((f) => (f.id === id ? updated : f)));
+      cancelEdit();
+    } catch {
+      setError(t('favorites.error'));
+    }
+  }
+
+  // --- Delete favorite ---
+  async function handleDelete(id: string) {
+    try {
+      await deleteFavorite(id);
+      setFavorites((prev) => prev.filter((f) => f.id !== id));
+      if (editingId === id) cancelEdit();
+    } catch {
+      setError(t('favorites.error'));
+    }
+  }
+
+  // --- Render ---
+  return (
+    <div className="flex flex-col h-full overflow-auto p-2 gap-2">
+      {/* View mode toggle (edit mode only) */}
+      {isEditMode && (
+        <div className="flex gap-1 widgetNoDrag" aria-label={t('favorites.name')}>
+          <button
+            type="button"
+            onClick={() => handleViewMode('list')}
+            className={`px-2 py-1 text-xs rounded ${
+              viewMode === 'list'
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground'
+            }`}
+          >
+            {t('favorites.listView')}
+          </button>
+          <button
+            type="button"
+            onClick={() => handleViewMode('grid')}
+            className={`px-2 py-1 text-xs rounded ${
+              viewMode === 'grid'
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground'
+            }`}
+          >
+            {t('favorites.gridView')}
+          </button>
+        </div>
+      )}
+
+      {/* Status messages */}
+      {loading && (
+        <p className="text-xs text-muted-foreground">{t('favorites.loading')}</p>
+      )}
+      {error && (
+        <p className="text-xs text-destructive">{error}</p>
+      )}
+
+      {/* Favorites list / grid */}
+      {!loading && sortedFavorites.length === 0 && (
+        <p className="text-xs text-muted-foreground">{t('favorites.empty')}</p>
+      )}
+
+      {!loading && sortedFavorites.length > 0 && (
+        viewMode === 'grid' ? (
+          <div
+            data-testid="favorites-grid"
+            className="grid grid-cols-3 gap-2"
+          >
+            {sortedFavorites.map((fav) => (
+              <FavoriteTile
+                key={fav.id}
+                fav={fav}
+                isEditMode={isEditMode}
+                editingId={editingId}
+                editTitle={editTitle}
+                editUrl={editUrl}
+                editIconUrl={editIconUrl}
+                getFallbackLetter={getFallbackLetter}
+                onStartEdit={startEdit}
+                onCancelEdit={cancelEdit}
+                onSaveEdit={handleSaveEdit}
+                onDelete={handleDelete}
+                onEditTitleChange={setEditTitle}
+                onEditUrlChange={setEditUrl}
+                onEditIconUrlChange={setEditIconUrl}
+                t={t}
+              />
+            ))}
+          </div>
+        ) : (
+          <div
+            data-testid="favorites-list"
+            className="flex flex-col gap-1"
+          >
+            {sortedFavorites.map((fav) => (
+              <FavoriteTile
+                key={fav.id}
+                fav={fav}
+                isEditMode={isEditMode}
+                editingId={editingId}
+                editTitle={editTitle}
+                editUrl={editUrl}
+                editIconUrl={editIconUrl}
+                getFallbackLetter={getFallbackLetter}
+                onStartEdit={startEdit}
+                onCancelEdit={cancelEdit}
+                onSaveEdit={handleSaveEdit}
+                onDelete={handleDelete}
+                onEditTitleChange={setEditTitle}
+                onEditUrlChange={setEditUrl}
+                onEditIconUrlChange={setEditIconUrl}
+                t={t}
+              />
+            ))}
+          </div>
+        )
+      )}
+
+      {/* Add form (edit mode only, D-04) */}
+      {isEditMode && (
+        <form
+          onSubmit={(e) => void handleAdd(e)}
+          className="flex flex-col gap-1 pt-1 border-t border-border widgetNoDrag"
+        >
+          <input
+            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            placeholder={t('favorites.addTitle')}
+          />
+          <input
+            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+            value={newUrl}
+            onChange={(e) => setNewUrl(e.target.value)}
+            placeholder={t('favorites.addUrl')}
+          />
+          <button
+            type="submit"
+            className="w-full rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
+          >
+            {t('favorites.addButton')}
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}
+
+// --- FavoriteTile sub-component ---
+
+type FavoriteTileProps = {
+  fav: FavoriteLink;
+  isEditMode: boolean;
+  editingId: string | null;
+  editTitle: string;
+  editUrl: string;
+  editIconUrl: string;
+  getFallbackLetter: (title: string) => string;
+  onStartEdit: (fav: FavoriteLink) => void;
+  onCancelEdit: () => void;
+  onSaveEdit: (id: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+  onEditTitleChange: (v: string) => void;
+  onEditUrlChange: (v: string) => void;
+  onEditIconUrlChange: (v: string) => void;
+  t: (key: string) => string;
+};
+
+function FavoriteTile({
+  fav,
+  isEditMode,
+  editingId,
+  editTitle,
+  editUrl,
+  editIconUrl,
+  getFallbackLetter,
+  onStartEdit,
+  onCancelEdit,
+  onSaveEdit,
+  onDelete,
+  onEditTitleChange,
+  onEditUrlChange,
+  onEditIconUrlChange,
+  t,
+}: FavoriteTileProps) {
+  const isEditing = editingId === fav.id;
+
+  return (
+    <div className="flex flex-col">
+      {/* Main link row */}
+      <div className="flex items-center gap-2">
+        {/* Anchor — opens in new tab, no server-side redirect (T-08-08) */}
+        <a
+          href={fav.url}
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-2 flex-1 min-w-0 hover:underline widgetNoDrag"
+          onClick={(e) => isEditMode && e.preventDefault()} // block navigation in edit mode
+        >
+          {/* Icon container with letter fallback (T-08-07 — no dangerouslySetInnerHTML) */}
+          <div className="relative flex-shrink-0 w-5 h-5">
+            <span
+              data-testid={`letter-fallback-${fav.id}`}
+              className="absolute inset-0 flex items-center justify-center text-xs font-semibold bg-muted rounded"
+            >
+              {getFallbackLetter(fav.title)}
+            </span>
+            {fav.iconUrl && (
+              <img
+                src={fav.iconUrl}
+                alt=""
+                width={20}
+                height={20}
+                loading="lazy"
+                className="absolute inset-0 w-5 h-5 rounded"
+                onError={(e) => {
+                  (e.currentTarget as HTMLImageElement).style.display = 'none';
+                }}
+              />
+            )}
+          </div>
+
+          <span className="text-xs truncate">{fav.title}</span>
+        </a>
+
+        {/* Action buttons (edit mode only, D-04) */}
+        {isEditMode && !isEditing && (
+          <div className="flex gap-1 flex-shrink-0 widgetNoDrag">
+            <button
+              type="button"
+              aria-label={t('favorites.editButton')}
+              title={t('favorites.editButton')}
+              className="p-0.5 text-muted-foreground hover:text-foreground"
+              onClick={() => onStartEdit(fav)}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                width="14"
+                height="14"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M4 20h4.6L19.2 9.4a2.1 2.1 0 0 0 0-3l-1.6-1.6a2.1 2.1 0 0 0-3 0L4 15.4V20Zm2-2v-1.8L16.1 6.1l1.8 1.8L7.8 18H6Zm9.1-12.9 1.8-1.8 1.8 1.8-1.8 1.8-1.8-1.8Z" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              aria-label={t('favorites.deleteButton')}
+              title={t('favorites.deleteButton')}
+              className="p-0.5 text-muted-foreground hover:text-destructive"
+              onClick={() => void onDelete(fav.id)}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                width="14"
+                height="14"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M7 21c-.6 0-1.1-.2-1.5-.7A2 2 0 0 1 5 18.9V8H4V6h5V4h6v2h5v2h-1v10.9c0 .6-.2 1.1-.7 1.5-.4.4-.9.6-1.5.6H7ZM17 8H7v10.9l.1.1h9.8l.1-.1V8Zm-8 9h2v-7H9v7Zm4 0h2v-7h-2v7Z" />
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Inline edit form */}
+      {isEditMode && isEditing && (
+        <div className="flex flex-col gap-1 mt-1 pl-7 widgetNoDrag">
+          <input
+            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+            value={editTitle}
+            onChange={(e) => onEditTitleChange(e.target.value)}
+            placeholder={t('favorites.addTitle')}
+          />
+          <input
+            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+            value={editUrl}
+            onChange={(e) => onEditUrlChange(e.target.value)}
+            placeholder={t('favorites.addUrl')}
+          />
+          <input
+            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+            value={editIconUrl}
+            onChange={(e) => onEditIconUrlChange(e.target.value)}
+            placeholder="Logo-URL (optional)"
+          />
+          <div className="flex gap-1">
+            <button
+              type="button"
+              className="flex-1 rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
+              onClick={() => void onSaveEdit(fav.id)}
+            >
+              {t('favorites.saveButton')}
+            </button>
+            <button
+              type="button"
+              className="flex-1 rounded bg-muted px-2 py-1 text-xs text-muted-foreground hover:bg-muted/80 transition-colors"
+              onClick={onCancelEdit}
+            >
+              {t('favorites.cancelButton')}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/favorites-api.ts

@@ -0,0 +1,81 @@
+/**
+ * Favorites API client functions.
+ * Mirrors the NestJS FavoritesController routes (08-03).
+ * All calls use credentials: 'include' for cookie-based auth.
+ */
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+export interface FavoriteLink {
+  id: string;
+  widgetId: string;
+  title: string;
+  url: string;
+  iconUrl: string | null;
+  position: number;
+}
+
+/**
+ * Fetch all favorite links for a specific widget instance.
+ * The widgetId parameter scopes the query to the correct widget (Pitfall 3).
+ */
+export async function fetchFavorites(widgetId: string): Promise<FavoriteLink[]> {
+  const res = await fetch(
+    `${API_URL}/favorites?widgetId=${encodeURIComponent(widgetId)}`,
+    { credentials: 'include' },
+  );
+  if (!res.ok) throw new Error('Failed to fetch favorites');
+
+  return res.json();
+}
+
+/**
+ * Create a new favorite link.
+ * Server-side icon discovery runs automatically if iconUrl is not provided.
+ */
+export async function createFavorite(payload: {
+  widgetId: string;
+  title: string;
+  url: string;
+  iconUrl?: string;
+}): Promise<FavoriteLink> {
+  const res = await fetch(`${API_URL}/favorites`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) throw new Error('Failed to create favorite');
+
+  return res.json();
+}
+
+/**
+ * Update an existing favorite link.
+ * Pass iconUrl: null to clear a stored icon.
+ */
+export async function updateFavorite(
+  id: string,
+  payload: Partial<{ title: string; url: string; iconUrl: string | null; position: number }>,
+): Promise<FavoriteLink> {
+  const res = await fetch(`${API_URL}/favorites/${encodeURIComponent(id)}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) throw new Error('Failed to update favorite');
+
+  return res.json();
+}
+
+/**
+ * Delete a favorite link by id.
+ */
+export async function deleteFavorite(id: string): Promise<void> {
+  const res = await fetch(`${API_URL}/favorites/${encodeURIComponent(id)}`, {
+    method: 'DELETE',
+    credentials: 'include',
+  });
+  if (!res.ok) throw new Error('Failed to delete favorite');
+}