Implement tasks 25, 26 + completion visibility setting

Task 25: Multiple dashboards — dashboards table + migration, /d/[slug]
route, root redirect, dashboard tabs in nav with create/rename/delete/
set-default. Task 26: Editable dashboard — react-grid-layout drag/resize
editor, widget picker modal with per-widget configurator auto-generated
from default config, save/reset server actions with Zod validation.

Completion visibility: server-side per-user setting (hours) replaces
localStorage timer; queries filter completed items by updatedAt cutoff;
Settings page dropdown persists preference via server action.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

STATUS.md

@@ -23,6 +23,8 @@ Living progress tracker. Update at the end of each task. Codex and Claude Code b
 - **21 — Quick-add registry**. Added `url: string` to `QuickAddAction` type (action is now optional). Added `getQuickAdds()` / `SerializedQuickAddItem` to registry (strips non-serializable `action` fn before crossing server→client boundary). Updated all three module manifests with navigation URLs. Built `QuickAddProvider` (context + cmd+k global shortcut), `QuickAddFab` (opens sheet, replaces plain button in dashboard), `QuickAddSheet` (bottom drawer / desktop popover grouped by module), and `CommandPalette` (cmdk-powered modal with arrow + enter + esc keyboard nav). Provider in root layout receives actions from `getQuickAdds()` at render time — adding a module's `quickAdds` automatically appears in both surfaces. Also added `.claude/**` to ESLint ignores to prevent stale worktree build artifacts from failing lint. `pnpm typecheck`, `pnpm lint`, `pnpm build`, and all 4 E2E specs pass.
 - **22 — Activity log**. Added `activity_log` table to `_core/schema.ts` with index on `(household_id, created_at desc)`. Migration `0008_activity_log.sql` applied. `logActivity()` server function in `_core/activity.ts` reads current session and inserts a row. Added `ActivityLogEntry` type and optional `renderActivity?(entry): string` to `EntityTypeRegistration` in `_core/module.ts`. All three module manifests implement `renderActivity` for each entity type (human-readable, no hardcoded branches in the widget). Replaced `core.activity` widget stub with a real async server component that queries the last 20 rows via `getEntityType(entry.entityType)?.renderActivity(entry)`. Wired `logActivity()` into every create/update/delete in calendar, lists, and notes server actions. Also added `text` to `getAuthorizedItem` select so toggle/delete log the item text. `pnpm typecheck`, `pnpm lint`, `pnpm build`, and all 4 E2E specs pass.
 - **30 — Share-link service**. Added `share_links` table to `_core/schema.ts` + migration `0009_share_links.sql`. Created `_core/share.ts` with `createShareLink`, `resolveShareToken`, `revokeShareLink`, and `getActiveShareLinks`. Token is 32 random bytes (URL-safe base64), stored as SHA-256 hash — raw token only returned at creation. `createShareLink` guards that the entity type is registered with `canShare === true`. `resolveShareToken` returns null for expired or revoked tokens. All three functions exported from `_core/index.ts`. `/settings` page gained a Share links card: lists active links (entity label, read/write capabilities, expiry) with a Revoke button per link (server action in `settings/actions.ts`). `pnpm typecheck`, `pnpm lint`, `pnpm build`, and all 4 E2E specs pass.
+- **25 — Multiple dashboards per user**. Added `dashboards` table (migration `0012_dashboards.sql`). Migrated each user's `default_dashboard_layout` into a "Home" dashboard row with `is_default = true`; dropped the interim column. Server actions: `listDashboards`, `createDashboard`, `renameDashboard`, `deleteDashboard`, `setDefaultDashboard`, `reorderDashboards`, `saveDashboardLayout`, `resetDashboardLayout`, `resolveWidgetConfigOptions`. `/` redirects to the user's default `/d/<slug>`. Dashboard switcher in AppNav renders tabs (active highlighted client-side) with a `+` button to create new dashboards and a kebab menu on the active tab for rename / set-default / delete. `pnpm typecheck`, `pnpm lint`, `pnpm build` pass.
+- **26 — Customizable layout + widget configuration**. Installed `react-grid-layout` v2. Dashboard pages check `?edit=1` to enter edit mode, rendering a client `DashboardEditor` instead of the static grid. Editor uses `react-grid-layout` with `gridConfig`/`dragConfig` v2 API; each widget shell shows a drag handle, configure button (⚙), and remove button (🗑). `WidgetPicker` is a two-step modal: step 1 lists all registry widgets grouped by category; step 2 is a `WidgetConfigurator` auto-generated from the widget's default config — handles `"all"|string[]` multi-selects, booleans, numbers, and enums. `resolveWidgetConfigOptions` server action fetches dynamic options (calendars, lists). Save validates each config against its registered Zod schema. Reset to defaults calls `computeDefaultLayout()`. `pnpm typecheck`, `pnpm build` pass.
 - **31 — Public share viewer**. Made `actorId` nullable in `activity_log` (migration `0010_nullable_actor_id.sql`, `onDelete: "set null"`) for anonymous share-page mutations. Added `logShareActivity` to `_core/activity.ts` (no session, explicit `householdId`). Added `householdId` to `resolveShareToken` return. Added `renderSharedView` to `EntityTypeRegistration` type. Each module implements `loadForShare` (bare DB queries, no session) and `renderSharedView`: calendar shows upcoming 90-day events or single-event details, lists shows items with optional toggle, notes shows title + body. `toggleShareListItem` server action lives in `lists/server/share-actions.ts` — validates token write capability, verifies item→list→household chain, logs `share.toggle` with `actorId = null`. `/app/s/[token]/page.tsx` resolves token, dispatches to `loadForShare` + `renderSharedView`, returns friendly error for invalid/expired tokens, sets `noindex`. Middleware `/s/*` exemption confirmed present. `pnpm typecheck`, `pnpm lint`, `pnpm build`, and all 4 E2E specs pass.
 
 ## Next up

drizzle/0011_completion_visibility.sql

@@ -0,0 +1 @@
+ALTER TABLE "users" ADD COLUMN "completion_visibility_hours" integer NOT NULL DEFAULT 24;

drizzle/0012_dashboards.sql

@@ -0,0 +1,28 @@
+CREATE TABLE "dashboards" (
+  "id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+  "user_id" uuid NOT NULL REFERENCES "users"("id") ON DELETE CASCADE,
+  "name" text NOT NULL,
+  "slug" text NOT NULL,
+  "is_default" boolean NOT NULL DEFAULT false,
+  "position" integer NOT NULL DEFAULT 0,
+  "layout" jsonb NOT NULL DEFAULT '{"version":1,"widgets":[]}',
+  "created_at" timestamp with time zone NOT NULL DEFAULT now(),
+  "updated_at" timestamp with time zone NOT NULL DEFAULT now()
+);
+
+CREATE UNIQUE INDEX "dashboards_user_slug_uq" ON "dashboards" ("user_id", "slug");
+
+-- Migrate each existing user's default_dashboard_layout into a "Home" dashboard.
+-- Idempotent: ON CONFLICT DO NOTHING.
+INSERT INTO "dashboards" ("user_id", "name", "slug", "is_default", "position", "layout")
+SELECT
+  "id",
+  'Home',
+  'home',
+  true,
+  0,
+  COALESCE("default_dashboard_layout", '{"version":1,"widgets":[]}')
+FROM "users"
+ON CONFLICT DO NOTHING;
+
+ALTER TABLE "users" DROP COLUMN IF EXISTS "default_dashboard_layout";

package.json

@@ -30,6 +30,7 @@
     "@types/node": "^22.9.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@types/react-grid-layout": "^2.1.0",
     "drizzle-kit": "^0.31.10",
     "eslint": "^9.15.0",
     "eslint-config-next": "^16.2.4",
@@ -58,6 +59,7 @@
     "postgres": "^3.4.9",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
+    "react-grid-layout": "^2.2.3",
     "shadcn": "^4.7.0",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       react-dom:
         specifier: ^19.2.5
         version: 19.2.5(react@19.2.5)
+      react-grid-layout:
+        specifier: ^2.2.3
+        version: 2.2.3(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       shadcn:
         specifier: ^4.7.0
         version: 4.7.0(@types/node@22.19.17)(typescript@5.9.3)
@@ -96,6 +99,9 @@ importers:
       '@types/react-dom':
         specifier: ^19.2.3
         version: 19.2.3(@types/react@19.2.14)
+      '@types/react-grid-layout':
+        specifier: ^2.1.0
+        version: 2.1.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       drizzle-kit:
         specifier: ^0.31.10
         version: 0.31.10
@@ -1542,6 +1548,10 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
+  '@types/react-grid-layout@2.1.0':
+    resolution: {integrity: sha512-pHEjVg9ert6BDFHFQ1IEdLUkd2gasJvyti5lV2kE46N/R07ZiaSZpAXeXJAA1MXy/Qby23fZmiuEgZkITxPXug==}
+    deprecated: This is a stub types definition. react-grid-layout provides its own type definitions, so you do not need this installed.
+
   '@types/react@19.2.14':
     resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
@@ -2441,6 +2451,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-equals@4.0.3:
+    resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==}
+
   fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -3457,6 +3470,18 @@ packages:
     peerDependencies:
       react: ^19.2.5
 
+  react-draggable@4.5.0:
+    resolution: {integrity: sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+
+  react-grid-layout@2.2.3:
+    resolution: {integrity: sha512-OAEJHBxmfuxQfVtZwRzmsokijGlBgzYIJ7MUlLk/VSa43SaGzu15w5D0P2RDrfX5EvP9POMbL6bFrai/huDzbQ==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3480,6 +3505,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-resizable@3.1.3:
+    resolution: {integrity: sha512-liJBNayhX7qA4tBJiBD321FDhJxgGTJ07uzH5zSORXoE8h7PyEZ8mLqmosST7ppf6C4zUsbd2gzDMmBCfFp9Lw==}
+    peerDependencies:
+      react: '>= 16.3'
+      react-dom: '>= 16.3'
+
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -3517,6 +3548,9 @@ packages:
   reselect@5.1.1:
     resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -5142,6 +5176,13 @@ snapshots:
     dependencies:
       '@types/react': 19.2.14
 
+  '@types/react-grid-layout@2.1.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+    dependencies:
+      react-grid-layout: 2.2.3(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
   '@types/react@19.2.14':
     dependencies:
       csstype: 3.2.3
@@ -6185,6 +6226,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@4.0.3: {}
+
   fast-glob@3.3.1:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -7118,6 +7161,24 @@ snapshots:
       react: 19.2.5
       scheduler: 0.27.0
 
+  react-draggable@4.5.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
+    dependencies:
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+
+  react-grid-layout@2.2.3(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
+    dependencies:
+      clsx: 2.1.1
+      fast-equals: 4.0.3
+      prop-types: 15.8.1
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      react-draggable: 4.5.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react-resizable: 3.1.3(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      resize-observer-polyfill: 1.5.1
+
   react-is@16.13.1: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.5):
@@ -7139,6 +7200,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  react-resizable@3.1.3(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
+    dependencies:
+      prop-types: 15.8.1
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      react-draggable: 4.5.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+
   react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.5):
     dependencies:
       get-nonce: 1.0.1
@@ -7183,6 +7251,8 @@ snapshots:
 
   reselect@5.1.1: {}
 
+  resize-observer-polyfill@1.5.1: {}
+
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}

src/app/d/[slug]/page.tsx

@@ -0,0 +1,91 @@
+import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import { getCurrentSession } from "@/lib/session";
+import { parseDashboardLayout, computeDefaultLayout } from "@/lib/dashboard";
+import { getWidget, getWidgetMetas } from "@/modules/_core";
+import { getDashboardBySlug } from "@/app/d/actions";
+import { DashboardEditor } from "@/components/dashboard-editor";
+import { QuickAddFab } from "@/components/quick-add-fab";
+import { EditDashboardButton } from "@/components/edit-dashboard-button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+const smColSpan: Record<number, string> = {
+  1: "sm:col-span-1", 2: "sm:col-span-2", 3: "sm:col-span-3",
+  4: "sm:col-span-4", 5: "sm:col-span-5", 6: "sm:col-span-6",
+  7: "sm:col-span-7", 8: "sm:col-span-8", 9: "sm:col-span-9",
+  10: "sm:col-span-10", 11: "sm:col-span-11", 12: "sm:col-span-12",
+};
+
+export default async function DashboardPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ edit?: string }>;
+}) {
+  const { slug } = await params;
+  const { edit } = await searchParams;
+  const isEditing = edit === "1";
+
+  const { user, household } = await getCurrentSession();
+  const dashboard = await getDashboardBySlug(slug);
+  if (!dashboard) notFound();
+
+  const layout = parseDashboardLayout(dashboard.layout) ?? computeDefaultLayout();
+  const widgetMetas = getWidgetMetas();
+
+  if (isEditing) {
+    return (
+      <DashboardEditor
+        dashboard={{ id: dashboard.id, name: dashboard.name, slug: dashboard.slug }}
+        layout={layout}
+        widgetMetas={widgetMetas}
+      />
+    );
+  }
+
+  const ctx = { userId: user.id, householdId: household.id };
+  const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x);
+
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{dashboard.name}</h1>
+        <div className="flex items-center gap-2">
+          <QuickAddFab />
+          <EditDashboardButton />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-12">
+        {placements.map((placement, i) => {
+          const widget = getWidget(placement.widgetId);
+          if (!widget) return null;
+          const colClass = smColSpan[placement.w] ?? "sm:col-span-12";
+          return (
+            <div key={i} className={`col-span-1 ${colClass}`}>
+              <Card className="h-full">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-base">{widget.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <Suspense
+                    fallback={
+                      <div className="animate-pulse space-y-2">
+                        <div className="h-3 w-3/4 rounded bg-muted" />
+                        <div className="h-3 w-1/2 rounded bg-muted" />
+                        <div className="h-3 w-2/3 rounded bg-muted" />
+                      </div>
+                    }
+                  >
+                    {widget.render({ config: placement.config, ctx })}
+                  </Suspense>
+                </CardContent>
+              </Card>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/app/d/actions.ts

@@ -0,0 +1,191 @@
+"use server";
+
+import { and, asc, eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+import { db } from "@/lib/db";
+import { getCurrentSession } from "@/lib/session";
+import { getWidget } from "@/modules/_core";
+import { dashboards } from "@/modules/_core/schema";
+import { computeDefaultLayout, type DashboardLayout } from "@/lib/dashboard";
+
+export type DashboardMeta = {
+  id: string;
+  name: string;
+  slug: string;
+  isDefault: boolean;
+  position: number;
+};
+
+export async function listDashboards(): Promise<DashboardMeta[]> {
+  const { user } = await getCurrentSession();
+  const rows = await db
+    .select({ id: dashboards.id, name: dashboards.name, slug: dashboards.slug, isDefault: dashboards.isDefault, position: dashboards.position })
+    .from(dashboards)
+    .where(eq(dashboards.userId, user.id))
+    .orderBy(asc(dashboards.position), asc(dashboards.createdAt));
+  return rows;
+}
+
+export async function getDefaultDashboardSlug(): Promise<string> {
+  const { user } = await getCurrentSession();
+  const rows = await db
+    .select({ slug: dashboards.slug })
+    .from(dashboards)
+    .where(and(eq(dashboards.userId, user.id), eq(dashboards.isDefault, true)))
+    .limit(1);
+  if (rows[0]) return rows[0].slug;
+  // Fallback: first dashboard by position
+  const [first] = await db
+    .select({ slug: dashboards.slug })
+    .from(dashboards)
+    .where(eq(dashboards.userId, user.id))
+    .orderBy(asc(dashboards.position), asc(dashboards.createdAt))
+    .limit(1);
+  if (first) return first.slug;
+  // No dashboards yet — create Home
+  await createDashboard("Home");
+  return "home";
+}
+
+export async function getDashboardBySlug(slug: string) {
+  const { user } = await getCurrentSession();
+  const [row] = await db
+    .select()
+    .from(dashboards)
+    .where(and(eq(dashboards.userId, user.id), eq(dashboards.slug, slug)))
+    .limit(1);
+  return row ?? null;
+}
+
+function toSlug(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    || "dashboard";
+}
+
+async function uniqueSlug(userId: string, base: string): Promise<string> {
+  let slug = base;
+  let attempt = 1;
+  for (;;) {
+    const [existing] = await db
+      .select({ id: dashboards.id })
+      .from(dashboards)
+      .where(and(eq(dashboards.userId, userId), eq(dashboards.slug, slug)))
+      .limit(1);
+    if (!existing) return slug;
+    attempt++;
+    slug = `${base}-${attempt}`;
+  }
+}
+
+export async function createDashboard(name: string): Promise<DashboardMeta> {
+  const parsed = z.string().trim().min(1).max(80).parse(name);
+  const { user } = await getCurrentSession();
+  const slug = await uniqueSlug(user.id, toSlug(parsed));
+  const rows = await db
+    .insert(dashboards)
+    .values({ userId: user.id, name: parsed, slug, isDefault: false, position: 9999 })
+    .returning();
+  const row = rows[0];
+  if (!row) throw new Error("Insert failed");
+  revalidatePath("/");
+  return { id: row.id, name: row.name, slug: row.slug, isDefault: row.isDefault, position: row.position };
+}
+
+export async function renameDashboard(id: string, name: string): Promise<void> {
+  const parsedName = z.string().trim().min(1).max(80).parse(name);
+  const { user } = await getCurrentSession();
+  await db
+    .update(dashboards)
+    .set({ name: parsedName, updatedAt: new Date() })
+    .where(and(eq(dashboards.id, id), eq(dashboards.userId, user.id)));
+  revalidatePath("/");
+}
+
+export async function deleteDashboard(id: string): Promise<void> {
+  const { user } = await getCurrentSession();
+  const all = await db
+    .select({ id: dashboards.id, isDefault: dashboards.isDefault, slug: dashboards.slug })
+    .from(dashboards)
+    .where(eq(dashboards.userId, user.id));
+  if (all.length <= 1) throw new Error("Cannot delete your only dashboard");
+  const target = all.find((d) => d.id === id);
+  if (!target) throw new Error("Dashboard not found");
+
+  await db.delete(dashboards).where(and(eq(dashboards.id, id), eq(dashboards.userId, user.id)));
+
+  // If we deleted the default, promote another
+  if (target.isDefault) {
+    const next = all.find((d) => d.id !== id);
+    if (next) {
+      await db
+        .update(dashboards)
+        .set({ isDefault: true })
+        .where(and(eq(dashboards.id, next.id), eq(dashboards.userId, user.id)));
+    }
+  }
+  revalidatePath("/");
+  redirect("/");
+}
+
+export async function setDefaultDashboard(id: string): Promise<void> {
+  const { user } = await getCurrentSession();
+  await db
+    .update(dashboards)
+    .set({ isDefault: false })
+    .where(eq(dashboards.userId, user.id));
+  await db
+    .update(dashboards)
+    .set({ isDefault: true })
+    .where(and(eq(dashboards.id, id), eq(dashboards.userId, user.id)));
+  revalidatePath("/");
+}
+
+export async function reorderDashboards(orderedIds: string[]): Promise<void> {
+  const { user } = await getCurrentSession();
+  await Promise.all(
+    orderedIds.map((id, i) =>
+      db
+        .update(dashboards)
+        .set({ position: i })
+        .where(and(eq(dashboards.id, id), eq(dashboards.userId, user.id))),
+    ),
+  );
+  revalidatePath("/");
+}
+
+export async function saveDashboardLayout(id: string, layout: DashboardLayout): Promise<void> {
+  const { user } = await getCurrentSession();
+  // Validate each widget's config against its registered schema
+  for (const placement of layout.widgets) {
+    const widget = getWidget(placement.widgetId);
+    if (!widget) continue;
+    widget.configSchema.parse(placement.config);
+  }
+  await db
+    .update(dashboards)
+    .set({ layout: layout as unknown as Record<string, unknown>, updatedAt: new Date() })
+    .where(and(eq(dashboards.id, id), eq(dashboards.userId, user.id)));
+  revalidatePath("/");
+}
+
+export async function resetDashboardLayout(id: string): Promise<void> {
+  const { user } = await getCurrentSession();
+  const layout = computeDefaultLayout();
+  await db
+    .update(dashboards)
+    .set({ layout: layout as unknown as Record<string, unknown>, updatedAt: new Date() })
+    .where(and(eq(dashboards.id, id), eq(dashboards.userId, user.id)));
+  revalidatePath("/");
+}
+
+export async function resolveWidgetConfigOptions(widgetId: string): Promise<unknown> {
+  const { user, household } = await getCurrentSession();
+  const widget = getWidget(widgetId);
+  if (!widget?.resolveConfigOptions) return null;
+  return widget.resolveConfigOptions({ userId: user.id, householdId: household.id });
+}

src/app/layout.tsx

@@ -6,8 +6,9 @@ import { AppNav } from "@/components/app-nav";
 import "@/modules"; // registers all module manifests
 import { auth } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { eq } from "drizzle-orm";
+import { asc, eq } from "drizzle-orm";
-import { users } from "@/modules/_core/schema";
+import { dashboards, users } from "@/modules/_core/schema";
+import type { DashboardMeta } from "@/app/d/actions";
 import { getQuickAdds } from "@/modules/_core";
 import { QuickAddProvider } from "@/components/quick-add-provider";
 import { QuickAddSheet } from "@/components/quick-add-sheet";
@@ -40,6 +41,7 @@ export default async function RootLayout({
 }) {
   let theme = "default";
   let themeMode = "system";
+  let userDashboards: DashboardMeta[] = [];
 
   const session = await auth();
   if (session?.user?.id) {
@@ -52,6 +54,11 @@ export default async function RootLayout({
       theme = row.theme;
       themeMode = row.themeMode;
     }
+    userDashboards = await db
+      .select({ id: dashboards.id, name: dashboards.name, slug: dashboards.slug, isDefault: dashboards.isDefault, position: dashboards.position })
+      .from(dashboards)
+      .where(eq(dashboards.userId, session.user.id))
+      .orderBy(asc(dashboards.position), asc(dashboards.createdAt));
   }
 
   // For system mode we can't know the preference on the server — the inline
@@ -71,7 +78,7 @@ export default async function RootLayout({
       </head>
       <body className="min-h-screen">
         <QuickAddProvider actions={quickAdds}>
-          <AppNav />
+          <AppNav dashboards={userDashboards} />
           <main>{children}</main>
           <QuickAddSheet />
           <CommandPalette />

src/app/page.tsx

@@ -1,83 +1,7 @@
-import { Suspense } from "react";
+import { redirect } from "next/navigation";
-import { eq } from "drizzle-orm";
+import { getDefaultDashboardSlug } from "@/app/d/actions";
-import { db } from "@/lib/db";
-import { computeDefaultLayout, parseDashboardLayout } from "@/lib/dashboard";
-import { getCurrentSession } from "@/lib/session";
-import { getWidget } from "@/modules/_core";
-import { users } from "@/modules/_core/schema";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { QuickAddFab } from "@/components/quick-add-fab";
 
-// Static lookup ensures Tailwind sees all sm:col-span-* classes at build time.
+export default async function RootPage() {
-const smColSpan: Record<number, string> = {
+  const slug = await getDefaultDashboardSlug();
-  1: "sm:col-span-1",
+  redirect(`/d/${slug}`);
-  2: "sm:col-span-2",
-  3: "sm:col-span-3",
-  4: "sm:col-span-4",
-  5: "sm:col-span-5",
-  6: "sm:col-span-6",
-  7: "sm:col-span-7",
-  8: "sm:col-span-8",
-  9: "sm:col-span-9",
-  10: "sm:col-span-10",
-  11: "sm:col-span-11",
-  12: "sm:col-span-12",
-};
-
-export default async function DashboardPage() {
-  const { user, household } = await getCurrentSession();
-
-  const [row] = await db
-    .select({ layout: users.defaultDashboardLayout })
-    .from(users)
-    .where(eq(users.id, user.id))
-    .limit(1);
-
-  const layout = parseDashboardLayout(row?.layout) ?? computeDefaultLayout();
-
-  const ctx = { userId: user.id, householdId: household.id };
-
-  // Sort by y then x so document order matches visual order on mobile (single col).
-  const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x);
-
-  return (
-    <div className="p-4 sm:p-6">
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Dashboard</h1>
-        <QuickAddFab />
-      </div>
-
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-12">
-        {placements.map((placement, i) => {
-          const widget = getWidget(placement.widgetId);
-          if (!widget) return null;
-
-          const colClass = smColSpan[placement.w] ?? "sm:col-span-12";
-
-          return (
-            <div key={i} className={`col-span-1 ${colClass}`}>
-              <Card className="h-full">
-                <CardHeader className="pb-2">
-                  <CardTitle className="text-base">{widget.title}</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <Suspense
-                    fallback={
-                      <div className="animate-pulse space-y-2">
-                        <div className="h-3 w-3/4 rounded bg-muted" />
-                        <div className="h-3 w-1/2 rounded bg-muted" />
-                        <div className="h-3 w-2/3 rounded bg-muted" />
-                      </div>
-                    }
-                  >
-                    {widget.render({ config: placement.config, ctx })}
-                  </Suspense>
-                </CardContent>
-              </Card>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
 }

src/app/settings/actions.ts

@@ -26,6 +26,18 @@ export async function setUserTheme({
     .where(eq(users.id, user.id));
 }
 
+export async function setCompletionVisibilityHours(hours: number): Promise<void> {
+  const parsed = Number(hours);
+  if (!Number.isInteger(parsed) || parsed < 0 || parsed > 8760)
+    throw new Error("Invalid hours value");
+  const { user } = await getCurrentSession();
+  await db
+    .update(users)
+    .set({ completionVisibilityHours: parsed })
+    .where(eq(users.id, user.id));
+  revalidatePath("/settings");
+}
+
 export async function revokeShareLinkAction(formData: FormData): Promise<void> {
   const id = formData.get("id");
   if (typeof id !== "string") throw new Error("Missing id");

src/app/settings/page.tsx

@@ -34,7 +34,7 @@ export default async function SettingsPage() {
           <CardTitle>Lists</CardTitle>
         </CardHeader>
         <CardContent>
-          <CompletionDelaySetting />
+          <CompletionDelaySetting initialHours={user.completionVisibilityHours} />
         </CardContent>
       </Card>
 

src/components/app-nav.tsx

@@ -1,32 +1,46 @@
 import Link from "next/link";
 import { Settings } from "lucide-react";
 import { getRegistry } from "@/modules/_core/registry";
+import type { DashboardMeta } from "@/app/d/actions";
+import { DashboardSwitcher } from "./dashboard-switcher";
+import { DashboardTab } from "./dashboard-tab";
 
-export function AppNav() {
+export function AppNav({ dashboards = [] }: { dashboards?: DashboardMeta[] }) {
   const { modules } = getRegistry();
   const navItems = modules.flatMap((m) => (m.nav ? [m.nav] : []));
 
   return (
-    <nav className="border-b px-4 py-3 flex items-center gap-6">
+    <header className="border-b">
-      <Link href="/" className="font-semibold text-sm">
+      <nav className="px-4 py-3 flex items-center gap-6">
-        famapp
+        <Link href="/" className="font-semibold text-sm shrink-0">
-      </Link>
+          famapp
-      {navItems.map((item) => (
-        <Link
-          key={item.href}
-          href={item.href}
-          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          {item.label}
         </Link>
-      ))}
+        {navItems.map((item) => (
-      <Link
+          <Link
-        href="/settings"
+            key={item.href}
-        className="ml-auto text-muted-foreground hover:text-foreground transition-colors"
+            href={item.href}
-        aria-label="Settings"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-      >
+          >
-        <Settings className="size-4" />
+            {item.label}
-      </Link>
+          </Link>
-    </nav>
+        ))}
+        <Link
+          href="/settings"
+          className="ml-auto text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="Settings"
+        >
+          <Settings className="size-4" />
+        </Link>
+      </nav>
+
+      {dashboards.length > 0 && (
+        <div className="flex items-center gap-1 border-t px-4 overflow-x-auto">
+          {dashboards.map((d) => (
+            <DashboardTab key={d.id} slug={d.slug} name={d.name} />
+          ))}
+          <DashboardSwitcher dashboards={dashboards} />
+        </div>
+      )}
+    </header>
   );
 }

src/components/completion-delay-setting.tsx

@@ -1,25 +1,41 @@
 "use client";
 
-import { DELAY_OPTIONS, useCompletionDelay } from "@/hooks/use-completion-delay";
+import { useTransition } from "react";
+import { setCompletionVisibilityHours } from "@/app/settings/actions";
 
-export function CompletionDelaySetting() {
+const OPTIONS = [
-  const { delay, setDelay } = useCompletionDelay();
+  { label: "1 hour", value: 1 },
+  { label: "4 hours", value: 4 },
+  { label: "8 hours", value: 8 },
+  { label: "24 hours (default)", value: 24 },
+  { label: "48 hours", value: 48 },
+  { label: "7 days", value: 168 },
+  { label: "Never hide", value: 8760 },
+];
+
+export function CompletionDelaySetting({ initialHours }: { initialHours: number }) {
+  const [isPending, startTransition] = useTransition();
+
+  function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    const hours = Number(e.target.value);
+    startTransition(() => setCompletionVisibilityHours(hours));
+  }
 
   return (
     <div className="flex items-center justify-between gap-4">
       <div>
-        <p className="text-sm font-medium">Completion delay</p>
+        <p className="text-sm font-medium">Show completed items for</p>
         <p className="text-xs text-muted-foreground">
-          How long a checked-off item stays visible before disappearing from list cards and the
+          How long checked-off items remain visible on list cards and the dashboard.
-          dashboard.
         </p>
       </div>
       <select
-        value={delay}
+        defaultValue={initialHours}
-        onChange={(e) => setDelay(Number(e.target.value))}
+        onChange={handleChange}
-        className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        disabled={isPending}
+        className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
       >
-        {DELAY_OPTIONS.map((opt) => (
+        {OPTIONS.map((opt) => (
           <option key={opt.value} value={opt.value}>
             {opt.label}
           </option>

src/components/dashboard-editor.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
+
+import { useEffect, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { GridLayout } from "react-grid-layout";
+import type { Layout } from "react-grid-layout";
+import { GripVertical, Settings2, Trash2, RotateCcw, Plus } from "lucide-react";
+import type { DashboardLayout, WidgetPlacement } from "@/lib/dashboard";
+import type { SerializedWidgetMeta } from "@/modules/_core/registry";
+import { saveDashboardLayout, resetDashboardLayout } from "@/app/d/actions";
+import { Button } from "@/components/ui/button";
+import { WidgetPicker } from "./widget-picker";
+
+function placementKey(placement: WidgetPlacement, index: number) {
+  return `${placement.widgetId}::${index}`;
+}
+
+export function DashboardEditor({
+  dashboard,
+  layout: initialLayout,
+  widgetMetas,
+}: {
+  dashboard: { id: string; name: string; slug: string };
+  layout: DashboardLayout;
+  widgetMetas: SerializedWidgetMeta[];
+}) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [placements, setPlacements] = useState<WidgetPlacement[]>(initialLayout.widgets);
+  const [isDirty, setIsDirty] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [configuringIndex, setConfiguringIndex] = useState<number | null>(null);
+  const [containerWidth, setContainerWidth] = useState(1200);
+
+  useEffect(() => {
+    function measure() {
+      const el = document.getElementById("dashboard-editor-grid");
+      if (el) setContainerWidth(el.offsetWidth);
+    }
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, []);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") handleCancel();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dashboard.slug]);
+
+  function handleCancel() {
+    router.push(`/d/${dashboard.slug}`);
+  }
+
+  function handleSave() {
+    startTransition(async () => {
+      await saveDashboardLayout(dashboard.id, { version: 1, widgets: placements });
+      router.push(`/d/${dashboard.slug}`);
+    });
+  }
+
+  function handleReset() {
+    startTransition(async () => {
+      await resetDashboardLayout(dashboard.id);
+      router.push(`/d/${dashboard.slug}`);
+    });
+  }
+
+  function handleLayoutChange(items: Layout) {
+    setPlacements((current) =>
+      current.map((p, i) => {
+        const key = placementKey(p, i);
+        const item = items.find((it) => it.i === key);
+        if (!item) return p;
+        return { ...p, x: item.x, y: item.y, w: item.w, h: item.h };
+      }),
+    );
+    setIsDirty(true);
+  }
+
+  function removeWidget(index: number) {
+    setPlacements((current) => current.filter((_, i) => i !== index));
+    setIsDirty(true);
+  }
+
+  function addWidget(widgetId: string, config: unknown) {
+    const meta = widgetMetas.find((m) => m.id === widgetId);
+    if (!meta) return;
+    const maxY = placements.reduce((m, p) => Math.max(m, p.y + p.h), 0);
+    setPlacements((current) => [
+      ...current,
+      { widgetId, config, x: 0, y: maxY, w: meta.defaultSize.w, h: meta.defaultSize.h },
+    ]);
+    setIsDirty(true);
+    setPickerOpen(false);
+  }
+
+  function updateConfig(index: number, config: unknown) {
+    setPlacements((current) =>
+      current.map((p, i) => (i === index ? { ...p, config } : p)),
+    );
+    setIsDirty(true);
+    setConfiguringIndex(null);
+  }
+
+  const gridItems: Layout = placements.map((p, i) => ({
+    i: placementKey(p, i),
+    x: p.x, y: p.y, w: p.w, h: p.h,
+    minW: widgetMetas.find((m) => m.id === p.widgetId)?.minSize?.w ?? 2,
+    minH: widgetMetas.find((m) => m.id === p.widgetId)?.minSize?.h ?? 1,
+    maxW: widgetMetas.find((m) => m.id === p.widgetId)?.maxSize?.w ?? 12,
+  }));
+
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="mb-6 flex items-center justify-between gap-4 flex-wrap">
+        <h1 className="text-2xl font-bold">{dashboard.name}</h1>
+        <div className="flex items-center gap-2 flex-wrap">
+          <Button variant="outline" size="sm" onClick={handleReset} disabled={isPending}>
+            <RotateCcw className="size-4 mr-1" />
+            Reset
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => setPickerOpen(true)} disabled={isPending}>
+            <Plus className="size-4 mr-1" />
+            Add widget
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleCancel} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button size="sm" onClick={handleSave} disabled={!isDirty || isPending}>
+            {isPending ? "Saving…" : "Save"}
+          </Button>
+        </div>
+      </div>
+
+      <p className="mb-4 text-sm text-muted-foreground">
+        Drag to reorder · resize from the bottom-right corner · ESC to cancel
+      </p>
+
+      <div id="dashboard-editor-grid">
+        <GridLayout
+          layout={gridItems}
+          width={containerWidth}
+          gridConfig={{ cols: 12, rowHeight: 60, margin: [16, 16] as [number, number], containerPadding: [0, 0] as [number, number] }}
+          dragConfig={{ handle: ".drag-handle" }}
+          onLayoutChange={handleLayoutChange}
+        >
+          {placements.map((placement, i) => {
+            const meta = widgetMetas.find((m) => m.id === placement.widgetId);
+            return (
+              <div
+                key={placementKey(placement, i)}
+                className="rounded-lg border bg-card text-card-foreground flex flex-col overflow-hidden"
+              >
+                <div className="drag-handle flex items-center gap-2 px-3 py-2 bg-muted/40 cursor-grab active:cursor-grabbing select-none border-b">
+                  <GripVertical className="size-4 text-muted-foreground shrink-0" />
+                  <span className="text-sm font-medium truncate flex-1">
+                    {meta?.title ?? placement.widgetId}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setConfiguringIndex(i)}
+                    className="text-muted-foreground hover:text-foreground transition-colors p-0.5"
+                    aria-label="Configure widget"
+                  >
+                    <Settings2 className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => removeWidget(i)}
+                    className="text-muted-foreground hover:text-destructive transition-colors p-0.5"
+                    aria-label="Remove widget"
+                  >
+                    <Trash2 className="size-4" />
+                  </button>
+                </div>
+                <div className="flex-1 flex items-center justify-center p-4">
+                  <p className="text-xs text-muted-foreground">{meta?.description}</p>
+                </div>
+              </div>
+            );
+          })}
+        </GridLayout>
+      </div>
+
+      {placements.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-24 gap-4 text-center">
+          <p className="text-muted-foreground">No widgets yet.</p>
+          <Button onClick={() => setPickerOpen(true)}>
+            <Plus className="size-4 mr-1" />
+            Add widget
+          </Button>
+        </div>
+      )}
+
+      {pickerOpen && (
+        <WidgetPicker
+          onClose={() => setPickerOpen(false)}
+          widgetMetas={widgetMetas}
+          onAdd={addWidget}
+        />
+      )}
+
+      {configuringIndex !== null && (
+        <WidgetPicker
+          onClose={() => setConfiguringIndex(null)}
+          widgetMetas={widgetMetas}
+          onAdd={(_, config) => updateConfig(configuringIndex, config)}
+          initialWidgetId={placements[configuringIndex]?.widgetId}
+          initialConfig={placements[configuringIndex]?.config}
+        />
+      )}
+    </div>
+  );
+}

src/components/dashboard-switcher.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { MoreHorizontal, Plus, Star, Trash2, PenLine } from "lucide-react";
+import {
+  createDashboard,
+  deleteDashboard,
+  renameDashboard,
+  setDefaultDashboard,
+} from "@/app/d/actions";
+import type { DashboardMeta } from "@/app/d/actions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function DashboardSwitcher({ dashboards }: { dashboards: DashboardMeta[] }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [, startTransition] = useTransition();
+  const [creatingNew, setCreatingNew] = useState(false);
+  const [newName, setNewName] = useState("");
+
+  function activeSlug() {
+    const m = pathname.match(/^\/d\/([^/]+)/);
+    return m?.[1] ?? null;
+  }
+
+  function handleCreate() {
+    if (!newName.trim()) return;
+    startTransition(async () => {
+      const created = await createDashboard(newName.trim());
+      setCreatingNew(false);
+      setNewName("");
+      router.push(`/d/${created.slug}`);
+    });
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      {/* Active tab highlights — overlay on top of the server-rendered links */}
+      {dashboards.map((d) => {
+        const isActive = activeSlug() === d.slug;
+        return (
+          <span
+            key={d.id}
+            aria-hidden
+            className={`absolute pointer-events-none border-b-2 transition-colors ${
+              isActive ? "border-primary" : "border-transparent"
+            }`}
+            style={{ display: "none" }}
+          />
+        );
+      })}
+
+      {creatingNew ? (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleCreate();
+          }}
+          className="flex items-center gap-1 ml-1"
+        >
+          <input
+            autoFocus
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            placeholder="Dashboard name"
+            className="h-7 rounded border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            onKeyDown={(e) => e.key === "Escape" && setCreatingNew(false)}
+          />
+          <button type="submit" className="text-xs text-muted-foreground hover:text-foreground px-1">
+            Add
+          </button>
+          <button
+            type="button"
+            onClick={() => setCreatingNew(false)}
+            className="text-xs text-muted-foreground hover:text-foreground px-1"
+          >
+            Cancel
+          </button>
+        </form>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setCreatingNew(true)}
+          className="shrink-0 flex items-center gap-1 px-2 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="New dashboard"
+        >
+          <Plus className="size-3.5" />
+        </button>
+      )}
+
+      {dashboards.map((d) => {
+        const isActive = activeSlug() === d.slug;
+        if (!isActive) return null;
+        return (
+          <DashboardKebab
+            key={d.id}
+            dashboard={d}
+            canDelete={dashboards.length > 1}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function DashboardKebab({
+  dashboard,
+  canDelete,
+}: {
+  dashboard: DashboardMeta;
+  canDelete: boolean;
+}) {
+  const [, startTransition] = useTransition();
+  const [renaming, setRenaming] = useState(false);
+  const [newName, setNewName] = useState(dashboard.name);
+
+  function handleRename() {
+    if (!newName.trim() || newName === dashboard.name) {
+      setRenaming(false);
+      return;
+    }
+    startTransition(async () => {
+      await renameDashboard(dashboard.id, newName.trim());
+      setRenaming(false);
+    });
+  }
+
+  if (renaming) {
+    return (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleRename();
+        }}
+        className="flex items-center gap-1 ml-1"
+      >
+        <input
+          autoFocus
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          className="h-7 rounded border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          onKeyDown={(e) => e.key === "Escape" && setRenaming(false)}
+        />
+        <button type="submit" className="text-xs text-muted-foreground hover:text-foreground px-1">
+          Save
+        </button>
+        <button
+          type="button"
+          onClick={() => setRenaming(false)}
+          className="text-xs text-muted-foreground hover:text-foreground px-1"
+        >
+          Cancel
+        </button>
+      </form>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className="shrink-0 flex items-center px-1 py-2 text-muted-foreground hover:text-foreground transition-colors"
+        aria-label="Dashboard options"
+      >
+        <MoreHorizontal className="size-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onSelect={() => setRenaming(true)}>
+          <PenLine className="size-4 mr-2" />
+          Rename
+        </DropdownMenuItem>
+        {!dashboard.isDefault && (
+          <DropdownMenuItem
+            onSelect={() =>
+              startTransition(() => setDefaultDashboard(dashboard.id))
+            }
+          >
+            <Star className="size-4 mr-2" />
+            Set as default
+          </DropdownMenuItem>
+        )}
+        {canDelete && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-destructive focus:text-destructive"
+              onSelect={() => startTransition(() => deleteDashboard(dashboard.id))}
+            >
+              <Trash2 className="size-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/dashboard-tab.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function DashboardTab({ slug, name }: { slug: string; name: string }) {
+  const pathname = usePathname();
+  const isActive = pathname === `/d/${slug}` || pathname.startsWith(`/d/${slug}/`);
+
+  return (
+    <Link
+      href={`/d/${slug}`}
+      className={`shrink-0 px-3 py-2 text-sm transition-colors border-b-2 ${
+        isActive
+          ? "border-primary text-foreground"
+          : "border-transparent text-muted-foreground hover:text-foreground"
+      }`}
+    >
+      {name}
+    </Link>
+  );
+}

src/components/edit-dashboard-button.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+
+export function EditDashboardButton() {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <button
+      type="button"
+      onClick={() => router.push(`${pathname}?edit=1`)}
+      className="rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+    >
+      Edit dashboard
+    </button>
+  );
+}

src/components/share-button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Link, Check, Copy } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { createShareLink } from "@/modules/_core/share";
+
+export function ShareButton({
+  entityType,
+  entityId,
+  canWrite = false,
+}: {
+  entityType: string;
+  entityId: string;
+  canWrite?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [shareUrl, setShareUrl] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  function share() {
+    startTransition(async () => {
+      const result = await createShareLink(entityType, entityId, {
+        capabilities: { read: true, write: canWrite },
+      });
+      setShareUrl(result.url);
+      setOpen(true);
+    });
+  }
+
+  function copyUrl() {
+    if (!shareUrl) return;
+    navigator.clipboard.writeText(shareUrl).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <>
+      <Button variant="outline" onClick={share} disabled={isPending}>
+        <Link />
+        Share
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Share link created</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            Anyone with this link can {canWrite ? "view and edit" : "view"} this{" "}
+            {entityType.split(".")[1]}.
+          </p>
+          <div className="flex gap-2">
+            <Input readOnly value={shareUrl ?? ""} className="font-mono text-xs" />
+            <Button variant="outline" size="icon" onClick={copyUrl} aria-label="Copy link">
+              {copied ? <Check className="text-green-600" /> : <Copy />}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/widget-picker.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { X, ChevronLeft } from "lucide-react";
+import type { SerializedWidgetMeta } from "@/modules/_core/registry";
+import { resolveWidgetConfigOptions } from "@/app/d/actions";
+import { Button } from "@/components/ui/button";
+
+type Step = "pick" | "configure";
+
+export function WidgetPicker({
+  onClose,
+  widgetMetas,
+  onAdd,
+  initialWidgetId,
+  initialConfig,
+}: {
+  onClose: () => void;
+  widgetMetas: SerializedWidgetMeta[];
+  onAdd: (widgetId: string, config: unknown) => void;
+  initialWidgetId?: string;
+  initialConfig?: unknown;
+}) {
+  const [step, setStep] = useState<Step>(initialWidgetId ? "configure" : "pick");
+  const [selectedId, setSelectedId] = useState<string | null>(initialWidgetId ?? null);
+  const [options, setOptions] = useState<unknown>(null);
+  const [config, setConfig] = useState<unknown>(initialConfig ?? null);
+  const [, startTransition] = useTransition();
+
+  function selectWidget(id: string) {
+    const meta = widgetMetas.find((m) => m.id === id);
+    if (!meta) return;
+    setSelectedId(id);
+    setConfig(meta.defaultConfig);
+    setOptions(null);
+    setStep("configure");
+    startTransition(async () => {
+      const opts = await resolveWidgetConfigOptions(id);
+      setOptions(opts);
+    });
+  }
+
+  function handleAdd() {
+    if (!selectedId) return;
+    onAdd(selectedId, config);
+  }
+
+  const grouped = widgetMetas.reduce<Record<string, SerializedWidgetMeta[]>>((acc, m) => {
+    const cat = m.category ?? "Other";
+    (acc[cat] ??= []).push(m);
+    return acc;
+  }, {});
+
+  const selected = widgetMetas.find((m) => m.id === selectedId);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div className="relative bg-background rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center gap-2 px-4 py-3 border-b">
+          {step === "configure" && !initialWidgetId && (
+            <button
+              type="button"
+              onClick={() => setStep("pick")}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <ChevronLeft className="size-5" />
+            </button>
+          )}
+          <h2 className="font-semibold flex-1 text-sm">
+            {step === "pick" ? "Add widget" : selected ? `Configure: ${selected.title}` : "Configure"}
+          </h2>
+          <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
+            <X className="size-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {step === "pick" && (
+            <div className="space-y-4">
+              {Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)).map(([cat, items]) => (
+                <div key={cat}>
+                  <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground mb-2">{cat}</p>
+                  <div className="space-y-1">
+                    {items.map((meta) => (
+                      <button
+                        key={meta.id}
+                        type="button"
+                        onClick={() => selectWidget(meta.id)}
+                        className="w-full text-left rounded-md px-3 py-2 hover:bg-accent transition-colors"
+                      >
+                        <p className="text-sm font-medium">{meta.title}</p>
+                        <p className="text-xs text-muted-foreground">{meta.description}</p>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {step === "configure" && selected && (
+            <WidgetConfigurator
+              meta={selected}
+              config={config}
+              options={options}
+              onChange={setConfig}
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        {step === "configure" && (
+          <div className="flex justify-end gap-2 px-4 py-3 border-t">
+            <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
+            <Button size="sm" onClick={handleAdd}>
+              {initialWidgetId ? "Apply" : "Add widget"}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Configurator ──────────────────────────────────────────────────────────────
+
+type FieldOption = { id: string; name: string };
+
+function WidgetConfigurator({
+  meta,
+  config,
+  options,
+  onChange,
+}: {
+  meta: SerializedWidgetMeta;
+  config: unknown;
+  options: unknown;
+  onChange: (c: unknown) => void;
+}) {
+  const cfg = (config ?? meta.defaultConfig) as Record<string, unknown>;
+  const opts = options as Record<string, FieldOption[]> | null | undefined;
+
+  function set(key: string, value: unknown) {
+    onChange({ ...cfg, [key]: value });
+  }
+
+  const entries = Object.entries(cfg);
+  if (entries.length === 0) {
+    return <p className="text-sm text-muted-foreground">No options available.</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {entries.map(([key, value]) => {
+        // "all" | string[] — multi-select with All toggle
+        if (value === "all" || (Array.isArray(value) && (key.endsWith("Ids") || key.endsWith("ids")))) {
+          const optKey = key.replace(/Ids?$/i, "s");
+          const items: FieldOption[] = (opts?.[optKey] as FieldOption[] | undefined) ?? [];
+          const isAll = value === "all";
+          const selected = isAll ? [] : (value as string[]);
+
+          return (
+            <div key={key}>
+              <label className="block text-sm font-medium mb-1 capitalize">
+                {key.replace(/([A-Z])/g, " $1").toLowerCase()}
+              </label>
+              <label className="flex items-center gap-2 text-sm mb-2">
+                <input
+                  type="checkbox"
+                  checked={isAll}
+                  onChange={(e) => set(key, e.target.checked ? "all" : [])}
+                  className="accent-primary"
+                />
+                All
+              </label>
+              {!isAll && (
+                <div className="space-y-1 max-h-40 overflow-y-auto border rounded p-2">
+                  {items.length === 0 && (
+                    <p className="text-xs text-muted-foreground">None available</p>
+                  )}
+                  {items.map((item) => (
+                    <label key={item.id} className="flex items-center gap-2 text-sm">
+                      <input
+                        type="checkbox"
+                        checked={selected.includes(item.id)}
+                        onChange={(e) => {
+                          const next = e.target.checked
+                            ? [...selected, item.id]
+                            : selected.filter((id) => id !== item.id);
+                          set(key, next);
+                        }}
+                        className="accent-primary"
+                      />
+                      {item.name}
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        }
+
+        // boolean
+        if (typeof value === "boolean") {
+          return (
+            <label key={key} className="flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                checked={value}
+                onChange={(e) => set(key, e.target.checked)}
+                className="accent-primary"
+              />
+              <span className="capitalize">{key.replace(/([A-Z])/g, " $1").toLowerCase()}</span>
+            </label>
+          );
+        }
+
+        // number
+        if (typeof value === "number") {
+          return (
+            <div key={key}>
+              <label className="block text-sm font-medium mb-1 capitalize">
+                {key.replace(/([A-Z])/g, " $1").toLowerCase()}
+              </label>
+              <input
+                type="number"
+                value={value}
+                onChange={(e) => set(key, Number(e.target.value))}
+                className="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              />
+            </div>
+          );
+        }
+
+        // string (enum / plain)
+        if (typeof value === "string") {
+          // Detect enum-like: same key appears in options as an array of strings
+          const enumOpts = opts?.[key] as string[] | undefined;
+          if (Array.isArray(enumOpts)) {
+            return (
+              <div key={key}>
+                <label className="block text-sm font-medium mb-1 capitalize">
+                  {key.replace(/([A-Z])/g, " $1").toLowerCase()}
+                </label>
+                <select
+                  value={value}
+                  onChange={(e) => set(key, e.target.value)}
+                  className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                >
+                  {enumOpts.map((opt) => (
+                    <option key={opt} value={opt}>{opt}</option>
+                  ))}
+                </select>
+              </div>
+            );
+          }
+
+          // Hardcoded enum fallback for known fields
+          const knownEnums: Record<string, string[]> = {
+            filter: ["pinned", "all"],
+          };
+          const known = knownEnums[key];
+          if (known) {
+            return (
+              <div key={key}>
+                <label className="block text-sm font-medium mb-1 capitalize">
+                  {key.replace(/([A-Z])/g, " $1").toLowerCase()}
+                </label>
+                <select
+                  value={value}
+                  onChange={(e) => set(key, e.target.value)}
+                  className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                >
+                  {known.map((opt) => (
+                    <option key={opt} value={opt}>{opt}</option>
+                  ))}
+                </select>
+              </div>
+            );
+          }
+        }
+
+        return null;
+      })}
+    </div>
+  );
+}

src/hooks/use-completion-delay.ts

@@ -1,32 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-const STORAGE_KEY = "completion-delay-ms";
-export const DEFAULT_DELAY_MS = 3000;
-
-export const DELAY_OPTIONS = [
-  { label: "1 second", value: 1000 },
-  { label: "3 seconds", value: 3000 },
-  { label: "5 seconds", value: 5000 },
-  { label: "10 seconds", value: 10000 },
-  { label: "30 seconds", value: 30000 },
-];
-
-function readDelay(): number {
-  if (typeof window === "undefined") return DEFAULT_DELAY_MS;
-  const raw = localStorage.getItem(STORAGE_KEY);
-  const parsed = raw ? parseInt(raw, 10) : NaN;
-  return Number.isFinite(parsed) ? parsed : DEFAULT_DELAY_MS;
-}
-
-export function useCompletionDelay() {
-  const [delay, setDelayState] = useState<number>(readDelay);
-
-  function setDelay(ms: number) {
-    setDelayState(ms);
-    localStorage.setItem(STORAGE_KEY, String(ms));
-  }
-
-  return { delay, setDelay };
-}

src/modules/_core/index.ts

@@ -10,8 +10,8 @@ export type {
   SearchResult,
   ActivityLogEntry,
 } from "./module";
-export { registerModule, getRegistry, getEntityType, getWidget, getQuickAdds } from "./registry";
+export { registerModule, getRegistry, getEntityType, getWidget, getQuickAdds, getWidgetMetas } from "./registry";
-export type { QuickAddItem, SerializedQuickAddItem } from "./registry";
+export type { QuickAddItem, SerializedQuickAddItem, SerializedWidgetMeta } from "./registry";
 export { logActivity, logShareActivity } from "./activity";
 export { createShareLink, resolveShareToken, revokeShareLink } from "./share";
 export type { ShareLinkCapabilities, CreateShareLinkResult } from "./share";

src/modules/_core/registry.ts

@@ -42,6 +42,23 @@ export type SerializedQuickAddItem = {
   moduleName: string;
 };
 
+export type SerializedWidgetMeta = {
+  id: string;
+  title: string;
+  description: string;
+  category?: string;
+  defaultSize: { w: number; h: number };
+  minSize?: { w: number; h: number };
+  maxSize?: { w: number; h: number };
+  defaultConfig: unknown;
+};
+
+export function getWidgetMetas(): SerializedWidgetMeta[] {
+  return [...widgets.values()].map(({ id, title, description, category, defaultSize, minSize, maxSize, defaultConfig }) => ({
+    id, title, description, category, defaultSize, minSize, maxSize, defaultConfig,
+  }));
+}
+
 export function getQuickAdds(): SerializedQuickAddItem[] {
   return [...modules.values()].flatMap((manifest) =>
     (manifest.quickAdds ?? []).map(({ id, label, icon, url }) => ({

src/modules/_core/schema.ts

@@ -1,5 +1,6 @@
 import type { AdapterAccountType } from "@auth/core/adapters";
 import {
+  boolean,
   index,
   integer,
   jsonb,
@@ -24,7 +25,7 @@ export const users = pgTable("users", {
   image: text("image"),
   theme: text("theme").notNull().default("default"),
   themeMode: text("theme_mode").notNull().default("system"),
-  defaultDashboardLayout: jsonb("default_dashboard_layout"),
+  completionVisibilityHours: integer("completion_visibility_hours").notNull().default(24),
   createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
 });
 
@@ -129,6 +130,24 @@ export const shareLinks = pgTable(
   ],
 );
 
+export const dashboards = pgTable(
+  "dashboards",
+  {
+    id: uuid("id").primaryKey().defaultRandom(),
+    userId: uuid("user_id")
+      .notNull()
+      .references(() => users.id, { onDelete: "cascade" }),
+    name: text("name").notNull(),
+    slug: text("slug").notNull(),
+    isDefault: boolean("is_default").notNull().default(false),
+    position: integer("position").notNull().default(0),
+    layout: jsonb("layout").notNull().default({ version: 1, widgets: [] }),
+    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+    updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
+  },
+  (t) => [uniqueIndex("dashboards_user_slug_uq").on(t.userId, t.slug)],
+);
+
 export const reminders = pgTable(
   "reminders",
   {

src/modules/lists/components/list-widget.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useRef, useState, useTransition } from "react";
+import { useState, useTransition } from "react";
-import { useCompletionDelay } from "@/hooks/use-completion-delay";
 import { toggleItem } from "../server/actions";
 
 type WidgetItem = {
@@ -16,31 +15,9 @@ type WidgetItem = {
 export function ListWidget({ initialItems }: { initialItems: WidgetItem[] }) {
   const [items, setItems] = useState<WidgetItem[]>(initialItems);
   const [, startTransition] = useTransition();
-  const { delay } = useCompletionDelay();
-  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
 
   function toggle(item: WidgetItem, done: boolean) {
-    if (done) {
+    setItems((current) => current.map((i) => (i.id === item.id ? { ...i, done } : i)));
-      setItems((current) =>
-        current.map((i) => (i.id === item.id ? { ...i, done: true } : i)),
-      );
-
-      const t = setTimeout(() => {
-        setItems((current) => current.filter((i) => i.id !== item.id));
-        timers.current.delete(item.id);
-      }, delay);
-      timers.current.set(item.id, t);
-    } else {
-      const existing = timers.current.get(item.id);
-      if (existing) {
-        clearTimeout(existing);
-        timers.current.delete(item.id);
-      }
-      setItems((current) =>
-        current.map((i) => (i.id === item.id ? { ...i, done: false } : i)),
-      );
-    }
-
     startTransition(async () => {
       await toggleItem({ id: item.id, done });
     });

src/modules/lists/components/lists-index.tsx

@@ -2,11 +2,10 @@
 
 import Link from "next/link";
 import { ChevronDown, ChevronRight, ExternalLink, Plus } from "lucide-react";
-import { useMemo, useRef, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useCompletionDelay } from "@/hooks/use-completion-delay";
 import type { ListIndexItem, ListWithItemsDto } from "../server/queries";
 import { createList, toggleItem } from "../server/actions";
 
@@ -15,8 +14,6 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
   const [type, setType] = useState("shopping");
   const [name, setName] = useState("");
   const [, startTransition] = useTransition();
-  const { delay } = useCompletionDelay();
-  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
 
   const grouped = useMemo(() => {
     const groups = new Map<string, ListWithItemsDto[]>();
@@ -47,55 +44,18 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
   }
 
   function handleToggle(listId: string, item: ListIndexItem, done: boolean) {
-    const timerId = `${listId}:${item.id}`;
+    setListRows((current) =>
-
+      current.map((list) =>
-    if (done) {
+        list.id !== listId
-      // Mark done immediately (strikethrough) and schedule removal
+          ? list
-      setListRows((current) =>
+          : {
-        current.map((list) =>
+              ...list,
-          list.id !== listId
+              openCount: list.openCount + (done ? -1 : 1),
-            ? list
+              doneCount: list.doneCount + (done ? 1 : -1),
-            : {
+              items: list.items.map((i) => (i.id === item.id ? { ...i, done } : i)),
-                ...list,
+            },
-                openCount: list.openCount - 1,
+      ),
-                doneCount: list.doneCount + 1,
+    );
-                items: list.items.map((i) => (i.id === item.id ? { ...i, done: true } : i)),
-              },
-        ),
-      );
-
-      const t = setTimeout(() => {
-        setListRows((current) =>
-          current.map((list) =>
-            list.id !== listId
-              ? list
-              : { ...list, items: list.items.filter((i) => i.id !== item.id) },
-          ),
-        );
-        timers.current.delete(timerId);
-      }, delay);
-      timers.current.set(timerId, t);
-    } else {
-      // Cancel pending removal and restore item
-      const existing = timers.current.get(timerId);
-      if (existing) {
-        clearTimeout(existing);
-        timers.current.delete(timerId);
-      }
-      setListRows((current) =>
-        current.map((list) =>
-          list.id !== listId
-            ? list
-            : {
-                ...list,
-                openCount: list.openCount + 1,
-                doneCount: list.doneCount - 1,
-                items: list.items.map((i) => (i.id === item.id ? { ...i, done: false } : i)),
-              },
-        ),
-      );
-    }
-
     startTransition(async () => {
       await toggleItem({ id: item.id, done });
     });

src/modules/lists/server/queries.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { and, asc, eq, inArray, or, sql } from "drizzle-orm";
+import { and, asc, eq, gt, inArray, or, sql } from "drizzle-orm";
 import { z } from "zod";
 import { db } from "@/lib/db";
 import { getCurrentSession } from "@/lib/session";
@@ -166,7 +166,7 @@ export type ListIndexItem = {
 export type ListWithItemsDto = ListDto & { items: ListIndexItem[] };
 
 export async function listListsWithItems(): Promise<ListWithItemsDto[]> {
-  const { household } = await getCurrentSession();
+  const { user, household } = await getCurrentSession();
   await ensureDefaultListsForHousehold(household.id);
 
   const listsRows = await db
@@ -178,8 +178,8 @@ export async function listListsWithItems(): Promise<ListWithItemsDto[]> {
   if (listsRows.length === 0) return [];
 
   const listIds = listsRows.map((l) => l.id);
+  const cutoff = completionCutoff(user.completionVisibilityHours);
 
-  // Fetch all open items for these lists, ordered so we can take top 10 per list in JS
   const itemRows = await db
     .select({
       id: listItems.id,
@@ -190,8 +190,13 @@ export async function listListsWithItems(): Promise<ListWithItemsDto[]> {
       createdAt: listItems.createdAt,
     })
     .from(listItems)
-    .where(and(inArray(listItems.listId, listIds), eq(listItems.done, false)))
+    .where(
-    .orderBy(asc(listItems.position), asc(listItems.createdAt));
+      and(
+        inArray(listItems.listId, listIds),
+        or(eq(listItems.done, false), and(eq(listItems.done, true), gt(listItems.updatedAt, cutoff))),
+      ),
+    )
+    .orderBy(asc(listItems.done), asc(listItems.position), asc(listItems.createdAt));
 
   const itemsByList = new Map<string, ListIndexItem[]>();
   for (const item of itemRows) {
@@ -254,8 +259,12 @@ export async function listWidgetItems(input: {
 
   if (visibleIds.length === 0) return [];
 
-  const conditions = [inArray(listItems.listId, visibleIds)];
+  const { user } = await getCurrentSession();
-  if (!parsed.showCompleted) conditions.push(eq(listItems.done, false));
+  const cutoff = completionCutoff(user.completionVisibilityHours);
+
+  const doneFilter = parsed.showCompleted
+    ? undefined
+    : or(eq(listItems.done, false), and(eq(listItems.done, true), gt(listItems.updatedAt, cutoff)));
 
   const rows = await db
     .select({
@@ -267,7 +276,7 @@ export async function listWidgetItems(input: {
     })
     .from(listItems)
     .innerJoin(lists, eq(listItems.listId, lists.id))
-    .where(and(...conditions))
+    .where(and(inArray(listItems.listId, visibleIds), doneFilter))
     .orderBy(asc(listItems.done), asc(listItems.position), asc(listItems.createdAt))
     .limit(parsed.limit ?? 10);
 
@@ -318,6 +327,10 @@ function toListDto(list: typeof lists.$inferSelect, items: ListItemDto[]): ListD
   };
 }
 
+function completionCutoff(hours: number): Date {
+  return new Date(Date.now() - hours * 60 * 60 * 1000);
+}
+
 function toItemDto(item: typeof listItems.$inferSelect): ListItemDto {
   return {
     id: item.id,