feat(#82): implement Personality Module

- Add Personality model to Prisma schema with FormalityLevel enum
- Create migration and seed with 6 default personalities
- Implement CRUD API with TDD approach (97.67% coverage)
  * PersonalitiesService: findAll, findOne, findDefault, create, update, remove
  * PersonalitiesController: REST endpoints with auth guards
  * Comprehensive test coverage (21 passing tests)
- Add Personality types to shared package
- Create frontend components:
  * PersonalitySelector: dropdown for choosing personality
  * PersonalityPreview: preview personality style and system prompt
  * PersonalityForm: create/edit personalities with validation
  * Settings page: manage personalities with CRUD operations
- Integrate with Ollama API:
  * Support personalityId in chat endpoint
  * Auto-inject system prompt from personality
  * Fall back to default personality if not specified
- API client for frontend personality management

All tests passing with 97.67% backend coverage (exceeds 85% requirement)

apps/web/src/components/domains/DomainFilter.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DomainFilter } from "./DomainFilter";
+import type { Domain } from "@mosaic/shared";
+
+describe("DomainFilter", () => {
+  const mockDomains: Domain[] = [
+    {
+      id: "domain-1",
+      workspaceId: "workspace-1",
+      name: "Work",
+      slug: "work",
+      description: "Work-related tasks",
+      color: "#3B82F6",
+      icon: "💼",
+      sortOrder: 0,
+      metadata: {},
+      createdAt: new Date("2026-01-28"),
+      updatedAt: new Date("2026-01-28"),
+    },
+    {
+      id: "domain-2",
+      workspaceId: "workspace-1",
+      name: "Personal",
+      slug: "personal",
+      description: null,
+      color: "#10B981",
+      icon: "🏠",
+      sortOrder: 1,
+      metadata: {},
+      createdAt: new Date("2026-01-28"),
+      updatedAt: new Date("2026-01-28"),
+    },
+  ];
+
+  it("should render All button", () => {
+    const onFilterChange = vi.fn();
+    render(
+      <DomainFilter
+        domains={mockDomains}
+        selectedDomain={null}
+        onFilterChange={onFilterChange}
+      />
+    );
+    expect(screen.getByRole("button", { name: /all/i })).toBeInTheDocument();
+  });
+
+  it("should render domain filter buttons", () => {
+    const onFilterChange = vi.fn();
+    render(
+      <DomainFilter
+        domains={mockDomains}
+        selectedDomain={null}
+        onFilterChange={onFilterChange}
+      />
+    );
+    expect(screen.getByRole("button", { name: /filter by work/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /filter by personal/i })).toBeInTheDocument();
+  });
+
+  it("should highlight All when no domain selected", () => {
+    const onFilterChange = vi.fn();
+    render(
+      <DomainFilter
+        domains={mockDomains}
+        selectedDomain={null}
+        onFilterChange={onFilterChange}
+      />
+    );
+    const allButton = screen.getByRole("button", { name: /all/i });
+    expect(allButton.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("should highlight selected domain", () => {
+    const onFilterChange = vi.fn();
+    render(
+      <DomainFilter
+        domains={mockDomains}
+        selectedDomain="domain-1"
+        onFilterChange={onFilterChange}
+      />
+    );
+    const workButton = screen.getByRole("button", { name: /filter by work/i });
+    expect(workButton.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("should call onFilterChange when All clicked", async () => {
+    const user = userEvent.setup();
+    const onFilterChange = vi.fn();
+    
+    render(
+      <DomainFilter
+        domains={mockDomains}
+        selectedDomain="domain-1"
+        onFilterChange={onFilterChange}
+      />
+    );
+
+    const allButton = screen.getByRole("button", { name: /all/i });
+    await user.click(allButton);
+
+    expect(onFilterChange).toHaveBeenCalledWith(null);
+  });
+
+  it("should call onFilterChange when domain clicked", async () => {
+    const user = userEvent.setup();
+    const onFilterChange = vi.fn();
+    
+    render(
+      <DomainFilter
+        domains={mockDomains}
+        selectedDomain={null}
+        onFilterChange={onFilterChange}
+      />
+    );
+
+    const workButton = screen.getByRole("button", { name: /filter by work/i });
+    await user.click(workButton);
+
+    expect(onFilterChange).toHaveBeenCalledWith("domain-1");
+  });
+
+  it("should display domain icons", () => {
+    const onFilterChange = vi.fn();
+    render(
+      <DomainFilter
+        domains={mockDomains}
+        selectedDomain={null}
+        onFilterChange={onFilterChange}
+      />
+    );
+    expect(screen.getByText("💼")).toBeInTheDocument();
+    expect(screen.getByText("🏠")).toBeInTheDocument();
+  });
+});

apps/web/src/components/domains/DomainFilter.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import type { Domain } from "@mosaic/shared";
+
+interface DomainFilterProps {
+  domains: Domain[];
+  selectedDomain: string | null;
+  onFilterChange: (domainId: string | null) => void;
+}
+
+export function DomainFilter({
+  domains,
+  selectedDomain,
+  onFilterChange,
+}: DomainFilterProps): JSX.Element {
+  return (
+    <div className="flex gap-2 flex-wrap">
+      <button
+        onClick={() => onFilterChange(null)}
+        className={`px-3 py-1 rounded-full text-sm ${
+          selectedDomain === null
+            ? "bg-gray-900 text-white"
+            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+        }`}
+        aria-label="Show all domains"
+        aria-pressed={selectedDomain === null}
+      >
+        All
+      </button>
+      {domains.map((domain) => (
+        <button
+          key={domain.id}
+          onClick={() => onFilterChange(domain.id)}
+          className={`px-3 py-1 rounded-full text-sm flex items-center gap-1 ${
+            selectedDomain === domain.id
+              ? "text-white"
+              : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+          }`}
+          style={{
+            backgroundColor:
+              selectedDomain === domain.id ? domain.color || "#374151" : undefined,
+          }}
+          aria-label={`Filter by ${domain.name}`}
+          aria-pressed={selectedDomain === domain.id}
+        >
+          {domain.icon && <span>{domain.icon}</span>}
+          <span>{domain.name}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/domains/DomainItem.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import type { Domain } from "@mosaic/shared";
+
+interface DomainItemProps {
+  domain: Domain;
+  onEdit?: (domain: Domain) => void;
+  onDelete?: (domain: Domain) => void;
+}
+
+export function DomainItem({
+  domain,
+  onEdit,
+  onDelete,
+}: DomainItemProps): JSX.Element {
+  return (
+    <div className="border rounded-lg p-4 hover:shadow-md transition-shadow">
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <div className="flex items-center gap-2 mb-2">
+            {domain.icon && <span className="text-2xl">{domain.icon}</span>}
+            {domain.color && (
+              <div
+                className="w-4 h-4 rounded-full"
+                style={{ backgroundColor: domain.color }}
+              />
+            )}
+            <h3 className="font-semibold text-lg">{domain.name}</h3>
+          </div>
+          {domain.description && (
+            <p className="text-sm text-gray-600">{domain.description}</p>
+          )}
+          <div className="mt-2">
+            <span className="text-xs text-gray-500 font-mono">
+              {domain.slug}
+            </span>
+          </div>
+        </div>
+        <div className="flex gap-2 ml-4">
+          {onEdit && (
+            <button
+              onClick={() => onEdit(domain)}
+              className="text-sm px-3 py-1 border rounded hover:bg-gray-50"
+              aria-label={`Edit ${domain.name}`}
+            >
+              Edit
+            </button>
+          )}
+          {onDelete && (
+            <button
+              onClick={() => onDelete(domain)}
+              className="text-sm px-3 py-1 border border-red-300 text-red-600 rounded hover:bg-red-50"
+              aria-label={`Delete ${domain.name}`}
+            >
+              Delete
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/domains/DomainList.test.tsx

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DomainList } from "./DomainList";
+import type { Domain } from "@mosaic/shared";
+
+describe("DomainList", () => {
+  const mockDomains: Domain[] = [
+    {
+      id: "domain-1",
+      workspaceId: "workspace-1",
+      name: "Work",
+      slug: "work",
+      description: "Work-related tasks",
+      color: "#3B82F6",
+      icon: "💼",
+      sortOrder: 0,
+      metadata: {},
+      createdAt: new Date("2026-01-28"),
+      updatedAt: new Date("2026-01-28"),
+    },
+    {
+      id: "domain-2",
+      workspaceId: "workspace-1",
+      name: "Personal",
+      slug: "personal",
+      description: "Personal tasks and projects",
+      color: "#10B981",
+      icon: "🏠",
+      sortOrder: 1,
+      metadata: {},
+      createdAt: new Date("2026-01-28"),
+      updatedAt: new Date("2026-01-28"),
+    },
+  ];
+
+  it("should render empty state when no domains", () => {
+    render(<DomainList domains={[]} isLoading={false} />);
+    expect(screen.getByText(/no domains created yet/i)).toBeInTheDocument();
+  });
+
+  it("should render loading state", () => {
+    render(<DomainList domains={[]} isLoading={true} />);
+    expect(screen.getByText(/loading domains/i)).toBeInTheDocument();
+  });
+
+  it("should render domains list", () => {
+    render(<DomainList domains={mockDomains} isLoading={false} />);
+    expect(screen.getByText("Work")).toBeInTheDocument();
+    expect(screen.getByText("Personal")).toBeInTheDocument();
+  });
+
+  it("should call onEdit when edit button clicked", () => {
+    const onEdit = vi.fn();
+    render(
+      <DomainList
+        domains={mockDomains}
+        isLoading={false}
+        onEdit={onEdit}
+      />
+    );
+
+    const editButtons = screen.getAllByRole("button", { name: /edit/i });
+    editButtons[0].click();
+    expect(onEdit).toHaveBeenCalledWith(mockDomains[0]);
+  });
+
+  it("should call onDelete when delete button clicked", () => {
+    const onDelete = vi.fn();
+    render(
+      <DomainList
+        domains={mockDomains}
+        isLoading={false}
+        onDelete={onDelete}
+      />
+    );
+
+    const deleteButtons = screen.getAllByRole("button", { name: /delete/i });
+    deleteButtons[0].click();
+    expect(onDelete).toHaveBeenCalledWith(mockDomains[0]);
+  });
+
+  it("should handle undefined domains gracefully", () => {
+    // @ts-expect-error Testing error state
+    render(<DomainList domains={undefined} isLoading={false} />);
+    expect(screen.getByText(/no domains created yet/i)).toBeInTheDocument();
+  });
+
+  it("should handle null domains gracefully", () => {
+    // @ts-expect-error Testing error state
+    render(<DomainList domains={null} isLoading={false} />);
+    expect(screen.getByText(/no domains created yet/i)).toBeInTheDocument();
+  });
+});

apps/web/src/components/domains/DomainList.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import type { Domain } from "@mosaic/shared";
+import { DomainItem } from "./DomainItem";
+
+interface DomainListProps {
+  domains: Domain[];
+  isLoading: boolean;
+  onEdit?: (domain: Domain) => void;
+  onDelete?: (domain: Domain) => void;
+}
+
+export function DomainList({
+  domains,
+  isLoading,
+  onEdit,
+  onDelete,
+}: DomainListProps): JSX.Element {
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        <span className="ml-3 text-gray-600">Loading domains...</span>
+      </div>
+    );
+  }
+
+  if (!domains || domains.length === 0) {
+    return (
+      <div className="text-center p-8 text-gray-500">
+        <p className="text-lg">No domains created yet</p>
+        <p className="text-sm mt-2">
+          Create domains to organize your tasks and projects
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {domains.map((domain) => (
+        <DomainItem
+          key={domain.id}
+          domain={domain}
+          onEdit={onEdit}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
+}

apps/web/src/components/domains/DomainSelector.test.tsx

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DomainSelector } from "./DomainSelector";
+import type { Domain } from "@mosaic/shared";
+
+describe("DomainSelector", () => {
+  const mockDomains: Domain[] = [
+    {
+      id: "domain-1",
+      workspaceId: "workspace-1",
+      name: "Work",
+      slug: "work",
+      description: "Work-related tasks",
+      color: "#3B82F6",
+      icon: "💼",
+      sortOrder: 0,
+      metadata: {},
+      createdAt: new Date("2026-01-28"),
+      updatedAt: new Date("2026-01-28"),
+    },
+    {
+      id: "domain-2",
+      workspaceId: "workspace-1",
+      name: "Personal",
+      slug: "personal",
+      description: null,
+      color: "#10B981",
+      icon: null,
+      sortOrder: 1,
+      metadata: {},
+      createdAt: new Date("2026-01-28"),
+      updatedAt: new Date("2026-01-28"),
+    },
+  ];
+
+  it("should render with default placeholder", () => {
+    const onChange = vi.fn();
+    render(
+      <DomainSelector domains={mockDomains} value={null} onChange={onChange} />
+    );
+    expect(screen.getByText("Select a domain")).toBeInTheDocument();
+  });
+
+  it("should render with custom placeholder", () => {
+    const onChange = vi.fn();
+    render(
+      <DomainSelector
+        domains={mockDomains}
+        value={null}
+        onChange={onChange}
+        placeholder="Choose domain"
+      />
+    );
+    expect(screen.getByText("Choose domain")).toBeInTheDocument();
+  });
+
+  it("should render all domains as options", () => {
+    const onChange = vi.fn();
+    render(
+      <DomainSelector domains={mockDomains} value={null} onChange={onChange} />
+    );
+    expect(screen.getByText("💼 Work")).toBeInTheDocument();
+    expect(screen.getByText("Personal")).toBeInTheDocument();
+  });
+
+  it("should call onChange when selection changes", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    
+    render(
+      <DomainSelector domains={mockDomains} value={null} onChange={onChange} />
+    );
+
+    const select = screen.getByRole("combobox");
+    await user.selectOptions(select, "domain-1");
+
+    expect(onChange).toHaveBeenCalledWith("domain-1");
+  });
+
+  it("should call onChange with null when cleared", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    
+    render(
+      <DomainSelector
+        domains={mockDomains}
+        value="domain-1"
+        onChange={onChange}
+      />
+    );
+
+    const select = screen.getByRole("combobox");
+    await user.selectOptions(select, "");
+
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it("should show selected value", () => {
+    const onChange = vi.fn();
+    render(
+      <DomainSelector
+        domains={mockDomains}
+        value="domain-1"
+        onChange={onChange}
+      />
+    );
+
+    const select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("domain-1");
+  });
+
+  it("should apply custom className", () => {
+    const onChange = vi.fn();
+    render(
+      <DomainSelector
+        domains={mockDomains}
+        value={null}
+        onChange={onChange}
+        className="custom-class"
+      />
+    );
+
+    const select = screen.getByRole("combobox");
+    expect(select.className).toContain("custom-class");
+  });
+});

apps/web/src/components/domains/DomainSelector.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import type { Domain } from "@mosaic/shared";
+
+interface DomainSelectorProps {
+  domains: Domain[];
+  value: string | null;
+  onChange: (domainId: string | null) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function DomainSelector({
+  domains,
+  value,
+  onChange,
+  placeholder = "Select a domain",
+  className = "",
+}: DomainSelectorProps): JSX.Element {
+  return (
+    <select
+      value={value ?? ""}
+      onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+        onChange(e.target.value || null)
+      }
+      className={`border rounded px-3 py-2 ${className}`}
+      aria-label="Domain selector"
+    >
+      <option value="">{placeholder}</option>
+      {domains.map((domain) => (
+        <option key={domain.id} value={domain.id}>
+          {domain.icon ? `${domain.icon} ` : ""}
+          {domain.name}
+        </option>
+      ))}
+    </select>
+  );
+}