feat: rework mobile UI for Tool Workshop and Profile pages

- Rework ToolWorkshopMobileView to support full desktop functionality:
  definition type selection (Compose/Dockerfile/Manifest), manifest editor,
  conditional port, startup command, readiness probe, required variables,
  and validation feedback.
- Add ProfileMobileView and wire ProfilePage to render it on mobile.
- Update useToolWorkshop hook to return boolean success from submit.
- Add responsive CSS for mobile forms, edit views, and manifest editor.
- Update project maps.

Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed)

Refs: openspec/changes/mobile-tool-profile-ui

apps/web/src/components/features/tool-workshop/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: apps/web/src/components/features/tool-workshop
 
 ## role
-Provides a complete UI for managing custom tool types in a "Tool Workshop" interface with list, edit, and mobile-responsive views.
+Provides a complete CRUD interface for managing reusable tool type definitions (Docker Compose, Dockerfile, Manifest) in a workshop-style admin panel with responsive desktop and mobile layouts.
 ## parent
 index: apps/web/src/components/features/.pi-map.index.md
 map: apps/web/src/components/features/.pi-map.md

apps/web/src/components/features/tool-workshop/.pi-map.md

@@ -4,15 +4,15 @@ dir: apps/web/src/components/features/tool-workshop
 index: apps/web/src/components/features/tool-workshop/.pi-map.index.md
 
 ## role
-Provides a complete UI for managing custom tool types in a "Tool Workshop" interface with list, edit, and mobile-responsive views.
+Provides a complete CRUD interface for managing reusable tool type definitions (Docker Compose, Dockerfile, Manifest) in a workshop-style admin panel with responsive desktop and mobile layouts.
 ## files
 - ToolTypeEditorPanel.tsx | Renders a form panel for creating or editing tool types with support for compose, dockerfile, and manifest definition types | exp: ToolTypeFormState, ToolTypeEditorPanel | dep: ../../icon, ../tool/manifest-editor, ../../../api/tool-types, ../../../api/tool-definitions, React, Icon, ManifestEditor
 - ToolTypeListSidebar.tsx | Renders a sidebar component for listing, selecting, creating, and deleting tool types in a "Tool Workshop" interface. | exp: ToolTypeListSidebar | dep: ../../icon, ../../../api/tool-types, React, Icon component, ToolType type
-- ToolWorkshopMobileView.tsx | Renders a mobile-responsive view for managing tool types with list, detail, and edit modes | exp: MobileView, ToolWorkshopMobileView | dep: ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../../../api/tool-types, ./ToolTypeEditorPanel, MobileListView, MobileDetailView, MobileEditView, MobileFAB, ToolType, ToolTypeFormState
+- ToolWorkshopMobileView.tsx | Renders a mobile-responsive three-view (list/detail/edit) interface for managing tool types in a tool workshop, with form handling for creating and editing tool configurations including Docker Compose, Dockerfile, or Manifest definitions. | exp: MobileView, ToolWorkshopMobileView | dep: react, ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../tool/manifest-editor, ../../icon, ../../../api/tool-types, ./ToolTypeEditorPanel, ../../../api/tool-definitions, mobile-list-view, mobile-detail-view, mobile-edit-view, mobile-fab, manifest-editor, icon, tool-types, ToolTypeEditorPanel, tool-definitions
 ## arch
-Uses a split-pane sidebar/detail panel pattern with dedicated mobile breakpoint handling, separating list navigation from form editing concerns across three specialized view components.
+Compound component pattern with split-pane desktop layout (sidebar list + editor panel) and state-driven mobile view with three-view routing (list/detail/edit), using React state for form management and optimistic UI updates.
 ## tags
-tool, mobile, type, view, types, list, panel, editor
+tool, mobile, view, type, types, editor, list, workshop
 ## symbols
 - ToolTypeFormState
 - ToolTypeEditorPanel

apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx

@@ -1,9 +1,14 @@
+import { useState } from "react";
+
 import { MobileListView } from "../mobile/mobile-list-view";
 import { MobileDetailView } from "../mobile/mobile-detail-view";
 import { MobileEditView } from "../mobile/mobile-edit-view";
 import { MobileFAB } from "../mobile/mobile-fab";
+import { ManifestEditor } from "../tool/manifest-editor";
+import { Icon } from "../../icon";
 import type { ToolType } from "../../../api/tool-types";
 import type { ToolTypeFormState } from "./ToolTypeEditorPanel";
+import type { ToolDefinitionManifest } from "../../../api/tool-definitions";
 
 export type MobileView = "list" | "detail" | "edit";
 
@@ -13,13 +18,18 @@ interface ToolWorkshopMobileViewProps {
 	mobileView: MobileView;
 	isCreating: boolean;
 	toolTypeForm: ToolTypeFormState;
+	manifestData: Record<string, unknown> | null;
+	manifestDefinitionId: string | null;
+	baseDefinitions: ToolDefinitionManifest[];
 	toolTypeError: string | null;
+	toolTypeDirty: boolean;
 	onViewChange: (view: MobileView) => void;
 	onSelect: (toolType: ToolType) => void;
 	onCreate: () => void;
 	onDelete: (id: string) => void;
 	onFormChange: (changes: Partial<ToolTypeFormState>) => void;
-	onSubmit: () => void;
+	onManifestChange: (manifest: Record<string, unknown> | null) => void;
+	onSubmit: (e?: React.FormEvent) => Promise<boolean>;
 	onCancel: () => void;
 }
 
@@ -29,15 +39,41 @@ export const ToolWorkshopMobileView = ({
 	mobileView,
 	isCreating,
 	toolTypeForm,
+	manifestData,
+	manifestDefinitionId,
+	baseDefinitions,
 	toolTypeError,
+	toolTypeDirty,
 	onViewChange,
 	onSelect,
 	onCreate,
 	onDelete,
 	onFormChange,
+	onManifestChange,
 	onSubmit,
 	onCancel,
 }: ToolWorkshopMobileViewProps) => {
+	const [isSaving, setIsSaving] = useState(false);
+
+	const handleSave = async () => {
+		setIsSaving(true);
+		try {
+			const ok = await onSubmit();
+			if (ok) {
+				onViewChange("list");
+			}
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	const handleDelete = () => {
+		if (selectedToolType) {
+			void onDelete(selectedToolType.id);
+			onViewChange("list");
+		}
+	};
+
 	if (mobileView === "list") {
 		return (
 			<div className="mobile-page">
@@ -49,7 +85,7 @@ export const ToolWorkshopMobileView = ({
 					items={toolTypes.map((t) => ({
 						id: t.id,
 						title: t.display_name,
-						subtitle: `${t.category || "Uncategorized"} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
+						subtitle: `${t.category || "Uncategorized"} · ${t.definition_type} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
 					}))}
 					onItemClick={(id) => {
 						const toolType = toolTypes.find((t) => t.id === id);
@@ -71,64 +107,70 @@ export const ToolWorkshopMobileView = ({
 	}
 
 	if (mobileView === "detail" && selectedToolType) {
+		const fields = [
+			{ label: "Name", value: selectedToolType.name },
+			{ label: "Display Name", value: selectedToolType.display_name },
+			{ label: "Description", value: selectedToolType.description },
+			{ label: "Category", value: selectedToolType.category },
+			{ label: "Interface Type", value: selectedToolType.interface_type },
+			{
+				label: "Requires Port",
+				value: selectedToolType.requires_port,
+				type: "boolean" as const,
+			},
+			...(selectedToolType.requires_port
+				? [{ label: "Default Port", value: selectedToolType.default_port }]
+				: []),
+			{
+				label: "Definition Type",
+				value: selectedToolType.definition_type,
+			},
+			{
+				label: "Startup Command",
+				value: selectedToolType.startup_command,
+			},
+			{
+				label: "Readiness Command",
+				value: selectedToolType.readiness_probe?.command ?? null,
+			},
+			{
+				label: "Readiness Timeout",
+				value: selectedToolType.readiness_probe?.timeout ?? null,
+			},
+			{
+				label: "Readiness Interval",
+				value: selectedToolType.readiness_probe?.interval ?? null,
+			},
+			{
+				label: "Required Variables",
+				value: selectedToolType.required_variables?.join(", ") ?? null,
+			},
+			...(selectedToolType.definition_type !== "manifest"
+				? [
+						{
+							label:
+								selectedToolType.definition_type === "compose"
+									? "Compose Template"
+									: "Dockerfile Template",
+							value:
+								selectedToolType.definition_type === "compose"
+									? selectedToolType.compose_template
+									: selectedToolType.dockerfile_template,
+							type: "code" as const,
+						},
+					]
+				: []),
+		];
+
 		return (
 			<MobileDetailView
 				title={selectedToolType.display_name}
-				subtitle={`${selectedToolType.name} · ${selectedToolType.definition_type} · ${selectedToolType.interface_type === "web" ? `Port ${selectedToolType.default_port}` : "Terminal"}`}
-				fields={[
-					{ label: "Name", value: selectedToolType.name },
-					{ label: "Display Name", value: selectedToolType.display_name },
-					{ label: "Description", value: selectedToolType.description },
-					{ label: "Category", value: selectedToolType.category },
-					{ label: "Interface Type", value: selectedToolType.interface_type },
-					{
-						label: "Requires Port",
-						value: selectedToolType.requires_port,
-						type: "boolean",
-					},
-					{ label: "Default Port", value: selectedToolType.default_port },
-					{
-						label: "Definition Type",
-						value: selectedToolType.definition_type,
-					},
-					{
-						label: "Startup Command",
-						value: selectedToolType.startup_command,
-					},
-					{
-						label: "Readiness Command",
-						value: selectedToolType.readiness_probe?.command ?? null,
-					},
-					{
-						label: "Readiness Timeout",
-						value: selectedToolType.readiness_probe?.timeout ?? null,
-					},
-					{
-						label: "Readiness Interval",
-						value: selectedToolType.readiness_probe?.interval ?? null,
-					},
-					{
-						label: "Required Variables",
-						value: selectedToolType.required_variables?.join(", ") ?? null,
-					},
-					{
-						label: "Compose Template",
-						value: selectedToolType.compose_template,
-						type: "code",
-					},
-					{
-						label: "Dockerfile Template",
-						value: selectedToolType.dockerfile_template,
-						type: "code",
-					},
-				]}
+				subtitle={`${selectedToolType.name} · ${selectedToolType.definition_type}`}
+				fields={fields}
 				onEdit={() => {
 					onViewChange("edit");
 				}}
-				onDelete={() => {
-					void onDelete(selectedToolType.id);
-					onViewChange("list");
-				}}
+				onDelete={handleDelete}
 				onBack={() => {
 					onViewChange("list");
 				}}
@@ -137,18 +179,39 @@ export const ToolWorkshopMobileView = ({
 	}
 
 	if (mobileView === "edit") {
+		const templateValue =
+			toolTypeForm.definition_type === "compose"
+				? toolTypeForm.compose_template
+				: toolTypeForm.dockerfile_template;
+
 		return (
 			<MobileEditView
 				title={isCreating ? "Create Tool Type" : "Edit Tool Type"}
 				onCancel={onCancel}
-				onSave={() => {
-					onSubmit();
-					if (!toolTypeError) {
-						onViewChange("list");
-					}
-				}}
-				isSaving={false}
+				onSave={handleSave}
+				isSaving={isSaving}
 			>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Definition Type</label>
+					<select
+						value={toolTypeForm.definition_type}
+						onChange={(e) =>
+							onFormChange({
+								definition_type: e.target.value as
+									| "compose"
+									| "dockerfile"
+									| "manifest",
+							})
+						}
+						className="mobile-form-select"
+						disabled={!isCreating}
+					>
+						<option value="compose">Docker Compose</option>
+						<option value="dockerfile">Dockerfile</option>
+						<option value="manifest">Manifest (Declarative)</option>
+					</select>
+				</div>
+
 				<div className="mobile-form-group">
 					<label className="mobile-form-label">Name *</label>
 					<input
@@ -157,8 +220,11 @@ export const ToolWorkshopMobileView = ({
 						onChange={(e) => onFormChange({ name: e.target.value })}
 						className="mobile-form-input"
 						placeholder="e.g., my-tool"
+						disabled={!isCreating}
+						required
 					/>
 				</div>
+
 				<div className="mobile-form-group">
 					<label className="mobile-form-label">Display Name *</label>
 					<input
@@ -167,8 +233,10 @@ export const ToolWorkshopMobileView = ({
 						onChange={(e) => onFormChange({ display_name: e.target.value })}
 						className="mobile-form-input"
 						placeholder="e.g., My Tool"
+						required
 					/>
 				</div>
+
 				<div className="mobile-form-group">
 					<label className="mobile-form-label">Description</label>
 					<textarea
@@ -179,6 +247,7 @@ export const ToolWorkshopMobileView = ({
 						rows={3}
 					/>
 				</div>
+
 				<div className="mobile-form-group">
 					<label className="mobile-form-label">Category</label>
 					<input
@@ -189,130 +258,179 @@ export const ToolWorkshopMobileView = ({
 						placeholder="e.g., development"
 					/>
 				</div>
+
 				<div className="mobile-form-group">
 					<label className="mobile-form-label">Interface Type</label>
 					<select
 						value={toolTypeForm.interface_type}
-						onChange={(e) =>
+						onChange={(e) => {
+							const value = e.target.value as "web" | "terminal";
 							onFormChange({
-								interface_type: e.target.value as "web" | "terminal",
-							})
-						}
+								interface_type: value,
+								requires_port: value === "web",
+								default_port: value === "web" ? toolTypeForm.default_port : "",
+							});
+						}}
 						className="mobile-form-select"
 					>
 						<option value="web">Web</option>
 						<option value="terminal">Terminal</option>
 					</select>
 				</div>
-				<div className="mobile-form-group">
-					<label className="mobile-form-label">Requires Port</label>
-					<input
-						type="checkbox"
-						checked={toolTypeForm.requires_port}
-						onChange={(e) => onFormChange({ requires_port: e.target.checked })}
-						className="mobile-form-checkbox"
-					/>
-				</div>
-				<div className="mobile-form-group">
-					<label className="mobile-form-label">Default Port</label>
-					<input
-						type="text"
-						value={toolTypeForm.default_port}
-						onChange={(e) => onFormChange({ default_port: e.target.value })}
-						className="mobile-form-input"
-						placeholder="e.g., 8080"
-					/>
-				</div>
-				<div className="mobile-form-group">
-					<label className="mobile-form-label">Definition Type</label>
-					<select
-						value={toolTypeForm.definition_type}
-						onChange={(e) =>
-							onFormChange({
-								definition_type: e.target.value as "compose" | "dockerfile",
-							})
-						}
-						className="mobile-form-select"
-					>
-						<option value="compose">Compose</option>
-						<option value="dockerfile">Dockerfile</option>
-					</select>
-				</div>
-				<div className="mobile-form-group">
-					<label className="mobile-form-label">Startup Command</label>
-					<input
-						type="text"
-						value={toolTypeForm.startup_command}
-						onChange={(e) => onFormChange({ startup_command: e.target.value })}
-						className="mobile-form-input"
-						placeholder="Command to run on startup"
-					/>
+
+				<div className="mobile-form-group mobile-form-row">
+					<label className="mobile-form-label mobile-form-checkbox-label">
+						<input
+							type="checkbox"
+							checked={toolTypeForm.requires_port}
+							onChange={(e) =>
+								onFormChange({ requires_port: e.target.checked })
+							}
+							className="mobile-form-checkbox"
+						/>
+						Requires Port
+					</label>
 				</div>
+
+				{toolTypeForm.requires_port && (
+					<div className="mobile-form-group">
+						<label className="mobile-form-label">Default Port *</label>
+						<input
+							type="number"
+							value={toolTypeForm.default_port}
+							onChange={(e) =>
+								onFormChange({ default_port: e.target.value })
+							}
+							className="mobile-form-input"
+							placeholder="e.g., 8080"
+							required
+						/>
+					</div>
+				)}
+
+				{toolTypeForm.interface_type === "terminal" && (
+					<div className="mobile-form-group">
+						<label className="mobile-form-label">Startup Command</label>
+						<input
+							type="text"
+							value={toolTypeForm.startup_command}
+							onChange={(e) =>
+								onFormChange({ startup_command: e.target.value })
+							}
+							className="mobile-form-input"
+							placeholder="Command to run on startup"
+						/>
+						<small className="mobile-form-help">
+							Command to run before the interactive shell for each new
+							terminal session.
+						</small>
+					</div>
+				)}
+
+				{toolTypeForm.definition_type === "manifest" ? (
+					<div className="mobile-manifest-editor-wrapper">
+						<ManifestEditor
+							manifest={manifestData}
+							baseDefinitions={baseDefinitions}
+							onChange={(m) => onManifestChange(m)}
+							definitionId={manifestDefinitionId}
+						/>
+					</div>
+				) : (
+					<div className="mobile-form-group">
+						<label className="mobile-form-label">
+							{toolTypeForm.definition_type === "compose"
+								? "Compose Template *"
+								: "Dockerfile Template *"}
+						</label>
+						<textarea
+							value={templateValue}
+							onChange={(e) => {
+								if (toolTypeForm.definition_type === "compose") {
+									onFormChange({ compose_template: e.target.value });
+								} else {
+									onFormChange({ dockerfile_template: e.target.value });
+								}
+							}}
+							className="mobile-form-textarea mobile-form-code"
+							placeholder={
+								toolTypeForm.definition_type === "compose"
+									? "version: '3'"
+									: "FROM ubuntu:22.04"
+							}
+							rows={10}
+							required
+						/>
+					</div>
+				)}
+
 				<div className="mobile-form-group">
 					<label className="mobile-form-label">Readiness Command</label>
 					<input
 						type="text"
 						value={toolTypeForm.readiness_command}
-						onChange={(e) => onFormChange({ readiness_command: e.target.value })}
+						onChange={(e) =>
+							onFormChange({ readiness_command: e.target.value })
+						}
 						className="mobile-form-input"
 						placeholder="e.g., curl -f http://localhost:8080/health"
 					/>
 				</div>
+
 				<div className="mobile-form-group">
-					<label className="mobile-form-label">Readiness Timeout</label>
+					<label className="mobile-form-label">Readiness Timeout (seconds)</label>
 					<input
-						type="text"
+						type="number"
 						value={toolTypeForm.readiness_timeout}
-						onChange={(e) => onFormChange({ readiness_timeout: e.target.value })}
+						onChange={(e) =>
+							onFormChange({ readiness_timeout: e.target.value })
+						}
 						className="mobile-form-input"
 						placeholder="30"
 					/>
 				</div>
+
 				<div className="mobile-form-group">
-					<label className="mobile-form-label">Readiness Interval</label>
+					<label className="mobile-form-label">Readiness Interval (seconds)</label>
 					<input
-						type="text"
+						type="number"
 						value={toolTypeForm.readiness_interval}
-						onChange={(e) => onFormChange({ readiness_interval: e.target.value })}
+						onChange={(e) =>
+							onFormChange({ readiness_interval: e.target.value })
+						}
 						className="mobile-form-input"
 						placeholder="2"
 					/>
 				</div>
+
 				<div className="mobile-form-group">
 					<label className="mobile-form-label">Required Variables</label>
 					<input
 						type="text"
 						value={toolTypeForm.required_variables}
-						onChange={(e) => onFormChange({ required_variables: e.target.value })}
+						onChange={(e) =>
+							onFormChange({ required_variables: e.target.value })
+						}
 						className="mobile-form-input"
 						placeholder="VAR1, VAR2, VAR3"
 					/>
 				</div>
-				{toolTypeForm.definition_type === "compose" && (
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Compose Template</label>
-						<textarea
-							value={toolTypeForm.compose_template}
-							onChange={(e) => onFormChange({ compose_template: e.target.value })}
-							className="mobile-form-textarea mobile-form-code"
-							placeholder="version: '3'"
-							rows={10}
-						/>
-					</div>
+
+				{toolTypeError && (
+					<p className="mobile-form-error">
+						<Icon name="warning" size="sm" /> {toolTypeError}
+					</p>
 				)}
-				{toolTypeForm.definition_type === "dockerfile" && (
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Dockerfile Template</label>
-						<textarea
-							value={toolTypeForm.dockerfile_template}
-							onChange={(e) =>
-								onFormChange({ dockerfile_template: e.target.value })
-							}
-							className="mobile-form-textarea mobile-form-code"
-							placeholder="FROM ubuntu:22.04"
-							rows={10}
-						/>
-					</div>
+
+				{toolTypeDirty && (
+					<button
+						type="button"
+						className="secondary-button mobile-discard-button"
+						onClick={onCancel}
+						disabled={isSaving}
+					>
+						Discard Changes
+					</button>
 				)}
 			</MobileEditView>
 		);
@@ -328,7 +446,7 @@ export const ToolWorkshopMobileView = ({
 				items={toolTypes.map((t) => ({
 					id: t.id,
 					title: t.display_name,
-					subtitle: `${t.category || "Uncategorized"} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
+					subtitle: `${t.category || "Uncategorized"} · ${t.definition_type} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
 				}))}
 				onItemClick={(id) => {
 					const toolType = toolTypes.find((t) => t.id === id);