feat(web): implement Ship Dashboard with vitals and mobility sections

Adds NumericStepper and EnumDropdown UI components, VitalsSection (hull/armor/AC/con),
MobilitySection (speed/maneuver class/size), with debounced real-time updates.

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

web/src/components/dashboard/MobilitySection.tsx

@@ -0,0 +1,38 @@
+import NumericStepper from '../ui/NumericStepper';
+import EnumDropdown from '../ui/EnumDropdown';
+import type { Ship } from '../../types/ship';
+
+const MANEUVER_CLASSES = ['S', 'A', 'B', 'C', 'D', 'E', 'F'];
+const SIZE_CATEGORIES = ['Tiny', 'Small', 'Medium', 'Large', 'Huge', 'Gargantuan'];
+
+interface Props {
+  ship: Ship;
+  onUpdate: (patch: Partial<Ship>) => void;
+}
+
+export default function MobilitySection({ ship, onUpdate }: Props) {
+  return (
+    <section className="dashboard-section">
+      <h3 className="section-title">Mobility</h3>
+      <div className="stat-grid">
+        <NumericStepper
+          label="Speed"
+          value={ship.speed ?? 0}
+          onChange={(v) => onUpdate({ speed: v })}
+        />
+        <EnumDropdown
+          label="Maneuver Class"
+          value={ship.maneuver_class}
+          options={MANEUVER_CLASSES}
+          onChange={(v) => onUpdate({ maneuver_class: v })}
+        />
+        <EnumDropdown
+          label="Size Category"
+          value={ship.size_category}
+          options={SIZE_CATEGORIES}
+          onChange={(v) => onUpdate({ size_category: v })}
+        />
+      </div>
+    </section>
+  );
+}

web/src/components/dashboard/VitalsSection.tsx

@@ -0,0 +1,51 @@
+import NumericStepper from '../ui/NumericStepper';
+import type { Ship } from '../../types/ship';
+
+interface Props {
+  ship: Ship;
+  onUpdate: (patch: Partial<Ship>) => void;
+}
+
+export default function VitalsSection({ ship, onUpdate }: Props) {
+  return (
+    <section className="dashboard-section">
+      <h3 className="section-title">Vitals</h3>
+      <div className="stat-grid">
+        <NumericStepper
+          label="Hull"
+          value={ship.hull_current}
+          max={ship.hull_max}
+          onChange={(v) => onUpdate({ hull_current: v })}
+        />
+        <NumericStepper
+          label="Hull Max"
+          value={ship.hull_max}
+          min={ship.hull_current}
+          onChange={(v) => onUpdate({ hull_max: v })}
+        />
+        <NumericStepper
+          label="Armor"
+          value={ship.armor_current}
+          max={ship.armor_max}
+          onChange={(v) => onUpdate({ armor_current: v })}
+        />
+        <NumericStepper
+          label="Armor Max"
+          value={ship.armor_max}
+          min={ship.armor_current}
+          onChange={(v) => onUpdate({ armor_max: v })}
+        />
+        <NumericStepper
+          label="AC"
+          value={ship.ac}
+          onChange={(v) => onUpdate({ ac: v })}
+        />
+        <NumericStepper
+          label="Con Save"
+          value={ship.con_save ?? 0}
+          onChange={(v) => onUpdate({ con_save: v })}
+        />
+      </div>
+    </section>
+  );
+}

web/src/components/ui/EnumDropdown.tsx

@@ -0,0 +1,35 @@
+interface Props {
+  label: string;
+  value: string | null;
+  options: string[];
+  onChange: (value: string | null) => void;
+  allowNull?: boolean;
+  nullLabel?: string;
+}
+
+export default function EnumDropdown({
+  label,
+  value,
+  options,
+  onChange,
+  allowNull = true,
+  nullLabel = '—',
+}: Props) {
+  return (
+    <div className="dropdown-field">
+      <span className="dropdown-label">{label}</span>
+      <select
+        className="dropdown-select"
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value || null)}
+      >
+        {allowNull && <option value="">{nullLabel}</option>}
+        {options.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

web/src/components/ui/NumericStepper.tsx

@@ -0,0 +1,45 @@
+interface Props {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export default function NumericStepper({ label, value, onChange, min = 0, max, step = 1 }: Props) {
+  const decrement = () => {
+    const next = value - step;
+    onChange(min !== undefined ? Math.max(min, next) : next);
+  };
+
+  const increment = () => {
+    const next = value + step;
+    onChange(max !== undefined ? Math.min(max, next) : next);
+  };
+
+  return (
+    <div className="stepper">
+      <span className="stepper-label">{label}</span>
+      <div className="stepper-controls">
+        <button
+          type="button"
+          className="stepper-btn"
+          onClick={decrement}
+          disabled={min !== undefined && value <= min}
+        >
+          -
+        </button>
+        <span className="stepper-value">{value}</span>
+        <button
+          type="button"
+          className="stepper-btn"
+          onClick={increment}
+          disabled={max !== undefined && value >= max}
+        >
+          +
+        </button>
+      </div>
+    </div>
+  );
+}