fix(SEC-WEB-32+34): Add input maxLength limits + API request timeout

SEC-WEB-32: Added maxLength to form inputs (names: 100, descriptions: 500,
emails: 254) in WorkspaceSettings, TeamSettings, InviteMember components.

SEC-WEB-34: Added AbortController timeout (30s default, configurable) to
apiRequest and apiPostFormData in API client.

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

apps/web/src/components/team/TeamSettings.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TeamSettings } from "./TeamSettings";
+
+const defaultTeam = {
+  id: "team-1",
+  name: "Test Team",
+  description: "A test team",
+  workspaceId: "ws-1",
+  metadata: {},
+  createdAt: new Date("2026-01-01"),
+  updatedAt: new Date("2026-01-01"),
+};
+
+describe("TeamSettings", (): void => {
+  const mockOnUpdate = vi.fn<(data: { name?: string; description?: string }) => Promise<void>>();
+  const mockOnDelete = vi.fn<() => Promise<void>>();
+
+  beforeEach((): void => {
+    mockOnUpdate.mockReset();
+    mockOnDelete.mockReset();
+    mockOnUpdate.mockResolvedValue(undefined);
+    mockOnDelete.mockResolvedValue(undefined);
+  });
+
+  describe("maxLength limits", (): void => {
+    it("should have maxLength of 100 on team name input", (): void => {
+      const team = defaultTeam;
+      render(<TeamSettings team={team} onUpdate={mockOnUpdate} onDelete={mockOnDelete} />);
+
+      const nameInput = screen.getByPlaceholderText("Enter team name");
+      expect(nameInput).toHaveAttribute("maxLength", "100");
+    });
+
+    it("should have maxLength of 500 on team description textarea", (): void => {
+      const team = defaultTeam;
+      render(<TeamSettings team={team} onUpdate={mockOnUpdate} onDelete={mockOnDelete} />);
+
+      const descriptionInput = screen.getByPlaceholderText("Enter team description (optional)");
+      expect(descriptionInput).toHaveAttribute("maxLength", "500");
+    });
+  });
+});

apps/web/src/components/team/TeamSettings.tsx

@@ -74,6 +74,7 @@ export function TeamSettings({ team, onUpdate, onDelete }: TeamSettingsProps): R
               setIsEditing(true);
             }}
             placeholder="Enter team name"
+            maxLength={100}
             fullWidth
             disabled={isSaving}
           />
@@ -85,6 +86,7 @@ export function TeamSettings({ team, onUpdate, onDelete }: TeamSettingsProps): R
               setIsEditing(true);
             }}
             placeholder="Enter team description (optional)"
+            maxLength={500}
             fullWidth
             disabled={isSaving}
           />

apps/web/src/components/workspace/InviteMember.test.tsx

@@ -96,6 +96,12 @@ describe("InviteMember", (): void => {
     expect(await screen.findByText("Invite failed")).toBeInTheDocument();
   });
 
+  it("should have maxLength of 254 on email input", (): void => {
+    render(<InviteMember onInvite={mockOnInvite} />);
+    const emailInput = screen.getByLabelText(/email address/i);
+    expect(emailInput).toHaveAttribute("maxLength", "254");
+  });
+
   it("should reset form after successful invite", async (): Promise<void> => {
     const user = userEvent.setup();
     render(<InviteMember onInvite={mockOnInvite} />);

apps/web/src/components/workspace/InviteMember.tsx

@@ -59,6 +59,7 @@ export function InviteMember({ onInvite }: InviteMemberProps): React.JSX.Element
             onChange={(e) => {
               setEmail(e.target.value);
             }}
+            maxLength={254}
             placeholder="colleague@example.com"
             disabled={isInviting}
             className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"

apps/web/src/components/workspace/WorkspaceSettings.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+import { WorkspaceSettings } from "./WorkspaceSettings";
+import userEvent from "@testing-library/user-event";
+
+const defaultWorkspace = {
+  id: "ws-1",
+  name: "Test Workspace",
+  createdAt: new Date("2026-01-01"),
+  updatedAt: new Date("2026-01-01"),
+  ownerId: "user-1",
+  settings: {},
+};
+
+describe("WorkspaceSettings", (): void => {
+  const mockOnUpdate = vi.fn<(name: string) => Promise<void>>();
+  const mockOnDelete = vi.fn<() => Promise<void>>();
+
+  beforeEach((): void => {
+    mockOnUpdate.mockReset();
+    mockOnDelete.mockReset();
+    mockOnUpdate.mockResolvedValue(undefined);
+    mockOnDelete.mockResolvedValue(undefined);
+  });
+
+  describe("maxLength limits", (): void => {
+    it("should have maxLength of 100 on workspace name input", async (): Promise<void> => {
+      const user = userEvent.setup();
+      render(
+        <WorkspaceSettings
+          workspace={defaultWorkspace}
+          userRole={WorkspaceMemberRole.OWNER}
+          onUpdate={mockOnUpdate}
+          onDelete={mockOnDelete}
+        />
+      );
+
+      // Click Edit to reveal the input
+      await user.click(screen.getByRole("button", { name: /edit/i }));
+
+      const nameInput = screen.getByLabelText(/workspace name/i);
+      expect(nameInput).toHaveAttribute("maxLength", "100");
+    });
+  });
+});

apps/web/src/components/workspace/WorkspaceSettings.tsx

@@ -75,6 +75,7 @@ export function WorkspaceSettings({
                 onChange={(e) => {
                   setName(e.target.value);
                 }}
+                maxLength={100}
                 disabled={isSaving}
                 className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
               />