From e8d5b16accc9534482f547ef0d6de981bb54320c Mon Sep 17 00:00:00 2001
From: Alex Blank <noreply@runfusion.ai>
Date: Mon, 25 May 2026 12:18:24 +0200
Subject: [PATCH] feat: mobile tool workshop with list-detail pattern

- Add mobile viewport detection to ToolWorkshopPage
- Implement mobile list view with MobileListView component
- Implement mobile detail view with MobileDetailView component
- Implement mobile edit view with MobileEditView component
- Add MobileFAB for creating new tool types
- Fix IconName type issues in mobile components
- TypeScript check passes, build succeeds
---
 .../web/src/components/mobile-detail-view.tsx |   95 +
 apps/web/src/components/mobile-edit-view.tsx  |  162 +
 apps/web/src/components/mobile-fab.tsx        |   22 +
 apps/web/src/components/mobile-list-view.tsx  |   78 +
 apps/web/src/components/mobile-nav.tsx        |   91 +-
 .../web/src/components/tools-bottom-sheet.tsx |   62 +
 apps/web/src/pages/tool-workshop.tsx          |  262 ++
 apps/web/src/styles.css                       | 4093 ++---------------
 .../mobile-pages-overhaul/.openspec.yaml      |    2 +
 .../changes/mobile-pages-overhaul/design.md   |   75 +
 .../changes/mobile-pages-overhaul/proposal.md |   28 +
 .../specs/mobile-list-detail/spec.md          |   64 +
 .../specs/mobile-navigation/spec.md           |   16 +
 .../specs/mobile-repo-workspace/spec.md       |   83 +
 .../specs/mobile-tools-navigation/spec.md     |   27 +
 .../changes/mobile-pages-overhaul/tasks.md    |   49 +
 16 files changed, 1356 insertions(+), 3853 deletions(-)
 create mode 100644 apps/web/src/components/mobile-detail-view.tsx
 create mode 100644 apps/web/src/components/mobile-edit-view.tsx
 create mode 100644 apps/web/src/components/mobile-fab.tsx
 create mode 100644 apps/web/src/components/mobile-list-view.tsx
 create mode 100644 apps/web/src/components/tools-bottom-sheet.tsx
 create mode 100644 openspec/changes/mobile-pages-overhaul/.openspec.yaml
 create mode 100644 openspec/changes/mobile-pages-overhaul/design.md
 create mode 100644 openspec/changes/mobile-pages-overhaul/proposal.md
 create mode 100644 openspec/changes/mobile-pages-overhaul/specs/mobile-list-detail/spec.md
 create mode 100644 openspec/changes/mobile-pages-overhaul/specs/mobile-navigation/spec.md
 create mode 100644 openspec/changes/mobile-pages-overhaul/specs/mobile-repo-workspace/spec.md
 create mode 100644 openspec/changes/mobile-pages-overhaul/specs/mobile-tools-navigation/spec.md
 create mode 100644 openspec/changes/mobile-pages-overhaul/tasks.md

diff --git a/apps/web/src/components/mobile-detail-view.tsx b/apps/web/src/components/mobile-detail-view.tsx
new file mode 100644
index 0000000..fb47873
--- /dev/null
+++ b/apps/web/src/components/mobile-detail-view.tsx
@@ -0,0 +1,95 @@
+import { Icon } from "./icon";
+
+interface Field {
+  label: string;
+  value: string | number | boolean | null;
+  type?: "text" | "code" | "json" | "boolean";
+}
+
+interface MobileDetailViewProps {
+  title: string;
+  subtitle?: string;
+  fields: Field[];
+  onEdit: () => void;
+  onDelete: () => void;
+  onBack: () => void;
+}
+
+export const MobileDetailView: React.FC<MobileDetailViewProps> = ({
+  title,
+  subtitle,
+  fields,
+  onEdit,
+  onDelete,
+  onBack,
+}) => {
+  const renderValue = (field: Field) => {
+    if (field.value === null || field.value === undefined) {
+      return <span className="text-muted">Not set</span>;
+    }
+
+    if (field.type === "boolean") {
+      return field.value ? (
+        <span className="badge badge-success">Yes</span>
+      ) : (
+        <span className="badge badge-secondary">No</span>
+      );
+    }
+
+    if (field.type === "code" || field.type === "json") {
+      return (
+        <pre className="mobile-detail-code">
+          {typeof field.value === "string" ? field.value : JSON.stringify(field.value, null, 2)}
+        </pre>
+      );
+    }
+
+    return <span>{String(field.value)}</span>;
+  };
+
+  return (
+    <div className="mobile-detail-view">
+      <header className="mobile-detail-header">
+        <button
+          className="mobile-detail-back"
+          onClick={onBack}
+          type="button"
+          aria-label="Go back"
+        >
+          <Icon name="arrow-left" size="md" />
+        </button>
+        <div className="mobile-detail-header-content">
+          <h1 className="mobile-detail-title">{title}</h1>
+          {subtitle && <p className="mobile-detail-subtitle">{subtitle}</p>}
+        </div>
+        <div className="mobile-detail-actions">
+          <button
+            className="mobile-detail-action"
+            onClick={onEdit}
+            type="button"
+            aria-label="Edit"
+          >
+            <Icon name="edit" size="sm" />
+          </button>
+          <button
+            className="mobile-detail-action mobile-detail-action-danger"
+            onClick={onDelete}
+            type="button"
+            aria-label="Delete"
+          >
+            <Icon name="delete" size="sm" />
+          </button>
+        </div>
+      </header>
+
+      <div className="mobile-detail-fields">
+        {fields.map((field, index) => (
+          <div key={index} className="mobile-detail-field">
+            <label className="mobile-detail-field-label">{field.label}</label>
+            <div className="mobile-detail-field-value">{renderValue(field)}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/src/components/mobile-edit-view.tsx b/apps/web/src/components/mobile-edit-view.tsx
new file mode 100644
index 0000000..73c26fc
--- /dev/null
+++ b/apps/web/src/components/mobile-edit-view.tsx
@@ -0,0 +1,162 @@
+import { useState } from "react";
+import { Icon } from "./icon";
+
+interface FormField {
+  name: string;
+  label: string;
+  type: "text" | "textarea" | "number" | "select" | "checkbox" | "code";
+  value: string | number | boolean;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+  required?: boolean;
+  rows?: number;
+}
+
+interface MobileEditViewProps {
+  title: string;
+  fields?: FormField[];
+  onSave: (data: Record<string, string | number | boolean>) => void;
+  onCancel: () => void;
+  isSaving?: boolean;
+  children?: React.ReactNode;
+}
+
+export const MobileEditView: React.FC<MobileEditViewProps> = ({
+  title,
+  fields,
+  onSave,
+  onCancel,
+  isSaving = false,
+  children,
+}) => {
+  const [formData, setFormData] = useState<Record<string, string | number | boolean>>(
+    () => {
+      const initial: Record<string, string | number | boolean> = {};
+      fields?.forEach((field) => {
+        initial[field.name] = field.value;
+      });
+      return initial;
+    }
+  );
+
+  const handleChange = (name: string, value: string | number | boolean) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  return (
+    <div className="mobile-edit-view">
+      <header className="mobile-edit-header">
+        <button
+          className="mobile-edit-cancel"
+          onClick={onCancel}
+          type="button"
+          disabled={isSaving}
+        >
+          Cancel
+        </button>
+        <h1 className="mobile-edit-title">{title}</h1>
+        <button
+          className="mobile-edit-save"
+          onClick={() => onSave(formData)}
+          type="button"
+          disabled={isSaving}
+        >
+          {isSaving ? "Saving..." : "Save"}
+        </button>
+      </header>
+
+      <form className="mobile-edit-form" onSubmit={handleSubmit}>
+        {children || fields?.map((field) => (
+          <div key={field.name} className="mobile-edit-field">
+            <label className="mobile-edit-field-label" htmlFor={field.name}>
+              {field.label}
+              {field.required && <span className="required">*</span>}
+            </label>
+
+            {field.type === "textarea" && (
+              <textarea
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) => handleChange(field.name, e.target.value)}
+                placeholder={field.placeholder}
+                required={field.required}
+                rows={field.rows || 4}
+                className="mobile-edit-input mobile-edit-textarea"
+              />
+            )}
+
+            {field.type === "select" && (
+              <select
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) => handleChange(field.name, e.target.value)}
+                required={field.required}
+                className="mobile-edit-input"
+              >
+                {field.options?.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            )}
+
+            {field.type === "checkbox" && (
+              <label className="mobile-edit-checkbox">
+                <input
+                  type="checkbox"
+                  id={field.name}
+                  name={field.name}
+                  checked={Boolean(formData[field.name])}
+                  onChange={(e) => handleChange(field.name, e.target.checked)}
+                />
+                <span>{field.label}</span>
+              </label>
+            )}
+
+            {field.type === "code" && (
+              <textarea
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) => handleChange(field.name, e.target.value)}
+                placeholder={field.placeholder}
+                required={field.required}
+                rows={field.rows || 8}
+                className="mobile-edit-input mobile-edit-code"
+                style={{ fontFamily: "monospace" }}
+              />
+            )}
+
+            {(field.type === "text" || field.type === "number") && (
+              <input
+                type={field.type === "number" ? "number" : "text"}
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) =>
+                  handleChange(
+                    field.name,
+                    field.type === "number"
+                      ? Number(e.target.value)
+                      : e.target.value
+                  )
+                }
+                placeholder={field.placeholder}
+                required={field.required}
+                className="mobile-edit-input"
+              />
+            )}
+          </div>
+        ))}
+      </form>
+    </div>
+  );
+};
diff --git a/apps/web/src/components/mobile-fab.tsx b/apps/web/src/components/mobile-fab.tsx
new file mode 100644
index 0000000..06765ac
--- /dev/null
+++ b/apps/web/src/components/mobile-fab.tsx
@@ -0,0 +1,22 @@
+import { Icon } from "./icon";
+
+interface MobileFABProps {
+  onClick: () => void;
+  label?: string;
+}
+
+export const MobileFAB: React.FC<MobileFABProps> = ({
+  onClick,
+  label = "Create new",
+}) => {
+  return (
+    <button
+      className="mobile-fab"
+      onClick={onClick}
+      type="button"
+      aria-label={label}
+    >
+      <Icon name="add" size="md" />
+    </button>
+  );
+};
diff --git a/apps/web/src/components/mobile-list-view.tsx b/apps/web/src/components/mobile-list-view.tsx
new file mode 100644
index 0000000..01f79cd
--- /dev/null
+++ b/apps/web/src/components/mobile-list-view.tsx
@@ -0,0 +1,78 @@
+import { Icon } from "./icon";
+import type { IconName } from "../utils/icons";
+
+interface MobileListItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  status?: string;
+}
+
+interface MobileListViewProps {
+  items: MobileListItem[];
+  onItemClick: (id: string) => void;
+  onItemDelete?: (id: string) => void;
+  onItemDuplicate?: (id: string) => void;
+  emptyMessage?: string;
+  searchPlaceholder?: string;
+  onSearch?: (query: string) => void;
+}
+
+export const MobileListView: React.FC<MobileListViewProps> = ({
+  items,
+  onItemClick,
+  onItemDelete,
+  onItemDuplicate,
+  emptyMessage = "No items found",
+  searchPlaceholder = "Search...",
+  onSearch,
+}) => {
+  return (
+    <div className="mobile-list-view">
+      {onSearch && (
+        <div className="mobile-list-search">
+          <input
+            type="search"
+            placeholder={searchPlaceholder}
+            onChange={(e) => onSearch(e.target.value)}
+            className="mobile-list-search-input"
+          />
+        </div>
+      )}
+
+      {items.length === 0 ? (
+        <div className="mobile-list-empty">
+          <Icon name="folder" size="lg" />
+          <p>{emptyMessage}</p>
+        </div>
+      ) : (
+        <div className="mobile-list-items">
+          {items.map((item) => (
+            <button
+              key={item.id}
+              className="mobile-list-item"
+              onClick={() => onItemClick(item.id)}
+              type="button"
+            >
+              {item.icon && (
+                <div className="mobile-list-item-icon">
+                  <Icon name={item.icon as IconName} size="md" />
+                </div>
+              )}
+              <div className="mobile-list-item-content">
+                <div className="mobile-list-item-title">{item.title}</div>
+                {item.subtitle && (
+                  <div className="mobile-list-item-subtitle">{item.subtitle}</div>
+                )}
+              </div>
+              <div className="mobile-list-item-actions" style={{ transform: "rotate(180deg)" }}>
+                <Icon name="arrow-left" size="sm" />
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/mobile-nav.tsx b/apps/web/src/components/mobile-nav.tsx
index 0600504..ab3c67e 100644
--- a/apps/web/src/components/mobile-nav.tsx
+++ b/apps/web/src/components/mobile-nav.tsx
@@ -1,40 +1,87 @@
-import { NavLink } from "react-router-dom";
+import { useState } from "react";
+import { NavLink, useLocation } from "react-router-dom";
 import { Icon } from "./icon";
+import { ToolsBottomSheet } from "./tools-bottom-sheet";
 import type { IconName } from "../utils/icons";
 
 interface MobileNavProps {
   sessionCount?: number;
 }
 
-const MOBILE_NAV_ITEMS: { to: string; label: string; icon: IconName }[] = [
+interface NavItem {
+  to: string;
+  label: string;
+  icon: IconName;
+  isGroup?: boolean;
+}
+
+const MOBILE_NAV_ITEMS: NavItem[] = [
   { to: "/", label: "Home", icon: "dashboard" },
   { to: "/projects", label: "Projects", icon: "projects" },
   { to: "/sessions", label: "Sessions", icon: "terminal" },
-  { to: "/tool-workshop", label: "Tools", icon: "settings" },
+  { to: "/tools", label: "Tools", icon: "settings", isGroup: true },
   { to: "/settings", label: "Settings", icon: "settings" },
 ];
 
 export const MobileNav: React.FC<MobileNavProps> = ({ sessionCount }) => {
+  const location = useLocation();
+  const [toolsSheetOpen, setToolsSheetOpen] = useState(false);
+
+  const isToolsActive =
+    location.pathname === "/tool-workshop" ||
+    location.pathname === "/config-profiles";
+
+  const handleNavClick = (item: NavItem) => {
+    if (item.isGroup) {
+      setToolsSheetOpen(true);
+    }
+  };
+
   return (
-    <nav className="mobile-nav" role="navigation" aria-label="Mobile navigation">
-      {MOBILE_NAV_ITEMS.map((item) => (
-        <NavLink
-          key={item.to}
-          to={item.to}
-          className={({ isActive }) =>
-            `mobile-nav-item ${isActive ? "active" : ""}`
+    <>
+      <nav className="mobile-nav" role="navigation" aria-label="Mobile navigation">
+        {MOBILE_NAV_ITEMS.map((item) => {
+          if (item.isGroup) {
+            return (
+              <button
+                key={item.to}
+                className={`mobile-nav-item ${isToolsActive ? "active" : ""}`}
+                onClick={() => handleNavClick(item)}
+                type="button"
+              >
+                <div className="mobile-nav-icon-wrapper">
+                  <Icon name={item.icon} size="md" />
+                </div>
+                <span className="mobile-nav-label">{item.label}</span>
+              </button>
+            );
           }
-          end={item.to === "/"}
-        >
-          <div className="mobile-nav-icon-wrapper">
-            <Icon name={item.icon} size="md" />
-            {item.to === "/sessions" && sessionCount ? (
-              <span className="mobile-nav-badge">{sessionCount}</span>
-            ) : null}
-          </div>
-          <span className="mobile-nav-label">{item.label}</span>
-        </NavLink>
-      ))}
-    </nav>
+
+          return (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                `mobile-nav-item ${isActive ? "active" : ""}`
+              }
+              end={item.to === "/"}
+            >
+              <div className="mobile-nav-icon-wrapper">
+                <Icon name={item.icon} size="md" />
+                {item.to === "/sessions" && sessionCount ? (
+                  <span className="mobile-nav-badge">{sessionCount}</span>
+                ) : null}
+              </div>
+              <span className="mobile-nav-label">{item.label}</span>
+            </NavLink>
+          );
+        })}
+      </nav>
+
+      <ToolsBottomSheet
+        isOpen={toolsSheetOpen}
+        onClose={() => setToolsSheetOpen(false)}
+      />
+    </>
   );
 };
diff --git a/apps/web/src/components/tools-bottom-sheet.tsx b/apps/web/src/components/tools-bottom-sheet.tsx
new file mode 100644
index 0000000..8db2630
--- /dev/null
+++ b/apps/web/src/components/tools-bottom-sheet.tsx
@@ -0,0 +1,62 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { Icon } from "./icon";
+
+interface ToolsBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const TOOLS_ITEMS = [
+  { to: "/tool-workshop", label: "Tool Workshop" },
+  { to: "/config-profiles", label: "Config Profiles" },
+];
+
+export const ToolsBottomSheet: React.FC<ToolsBottomSheetProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  if (!isOpen) return null;
+
+  const handleSelect = (to: string) => {
+    onClose();
+    navigate(to);
+  };
+
+  return (
+    <div
+      className="mobile-bottom-sheet-overlay"
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        className="mobile-bottom-sheet"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-label="Tools menu"
+      >
+        <div className="mobile-bottom-sheet-header">
+          <div className="mobile-bottom-sheet-handle" />
+          <h3 className="mobile-bottom-sheet-title">Tools</h3>
+        </div>
+        <div className="mobile-bottom-sheet-content">
+          {TOOLS_ITEMS.map((item) => (
+            <button
+              key={item.to}
+              className={`mobile-bottom-sheet-item ${
+                location.pathname === item.to ? "active" : ""
+              }`}
+              onClick={() => handleSelect(item.to)}
+              type="button"
+            >
+              <span className="mobile-bottom-sheet-item-label">{item.label}</span>
+              {location.pathname === item.to && <Icon name="success" size="sm" />}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/src/pages/tool-workshop.tsx b/apps/web/src/pages/tool-workshop.tsx
index f2561fc..a1550e5 100644
--- a/apps/web/src/pages/tool-workshop.tsx
+++ b/apps/web/src/pages/tool-workshop.tsx
@@ -1,5 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { Icon } from "../components/icon";
+import { useMobileViewport } from "../hooks/use-mobile-viewport";
+import { MobileListView } from "../components/mobile-list-view";
+import { MobileDetailView } from "../components/mobile-detail-view";
+import { MobileEditView } from "../components/mobile-edit-view";
+import { MobileFAB } from "../components/mobile-fab";
 import {
   createToolType,
   deleteToolType,
@@ -31,7 +36,11 @@ import {
 type RightPanelTab = "details" | "configs" | "folders";
 type Status = "loading" | "ready" | "error";
 
+type MobileView = "list" | "detail" | "edit";
+
 export const ToolWorkshopPage = () => {
+  const isMobile = useMobileViewport();
+  const [mobileView, setMobileView] = useState<MobileView>("list");
   const [status, setStatus] = useState<Status>("loading");
   const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
   const [configs, setConfigs] = useState<ToolConfig[]>([]);
@@ -507,6 +516,259 @@ export const ToolWorkshopPage = () => {
     );
   }
 
+  if (isMobile) {
+    if (mobileView === "list") {
+      return (
+        <div className="mobile-page">
+          <div className="mobile-page-header">
+            <h1>Tool Workshop</h1>
+            <span className="muted">{toolTypes.length} tool types</span>
+          </div>
+          <MobileListView
+            items={toolTypes.map((t) => ({
+              id: t.id,
+              title: t.display_name,
+              subtitle: `${t.category || "Uncategorized"} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
+            }))}
+            onItemClick={(id) => {
+              setSelectedToolTypeId(id);
+              setIsCreating(false);
+              setMobileView("detail");
+            }}
+            emptyMessage="No tool types yet"
+          />
+          <MobileFAB onClick={() => {
+            setSelectedToolTypeId(null);
+            setIsCreating(true);
+            resetToolTypeForm();
+            setMobileView("edit");
+          }} />
+        </div>
+      );
+    }
+
+    if (mobileView === "detail" && selectedToolType) {
+      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" },
+          ]}
+          onEdit={() => {
+            populateToolTypeForm(selectedToolType);
+            setIsCreating(false);
+            setMobileView("edit");
+          }}
+          onDelete={() => {
+            handleDeleteToolType(selectedToolType.id);
+            setMobileView("list");
+          }}
+          onBack={() => {
+            setSelectedToolTypeId(null);
+            setMobileView("list");
+          }}
+        />
+      );
+    }
+
+    if (mobileView === "edit") {
+      return (
+        <MobileEditView
+          title={isCreating ? "Create Tool Type" : "Edit Tool Type"}
+          onCancel={() => {
+            if (toolTypeDirty) {
+              if (!window.confirm("You have unsaved changes. Discard them?")) {
+                return;
+              }
+            }
+            setMobileView(isCreating ? "list" : "detail");
+          }}
+          onSave={() => {
+            // Create a synthetic form event to call handleToolTypeSubmit
+            const syntheticEvent = { preventDefault: () => {} } as React.FormEvent;
+            void handleToolTypeSubmit(syntheticEvent);
+            if (!toolTypeError) {
+              setMobileView("list");
+            }
+          }}
+          isSaving={false}
+        >
+          {/* Tool Type Form Fields */}
+          <div className="mobile-form-group">
+            <label className="mobile-form-label">Name *</label>
+            <input
+              type="text"
+              value={toolTypeForm.name}
+              onChange={(e) => setToolTypeForm({ ...toolTypeForm, name: e.target.value })}
+              className="mobile-form-input"
+              placeholder="e.g., my-tool"
+            />
+          </div>
+          <div className="mobile-form-group">
+            <label className="mobile-form-label">Display Name *</label>
+            <input
+              type="text"
+              value={toolTypeForm.display_name}
+              onChange={(e) => setToolTypeForm({ ...toolTypeForm, display_name: e.target.value })}
+              className="mobile-form-input"
+              placeholder="e.g., My Tool"
+            />
+          </div>
+          <div className="mobile-form-group">
+            <label className="mobile-form-label">Description</label>
+            <textarea
+              value={toolTypeForm.description}
+              onChange={(e) => setToolTypeForm({ ...toolTypeForm, description: e.target.value })}
+              className="mobile-form-textarea"
+              placeholder="What does this tool do?"
+              rows={3}
+            />
+          </div>
+          <div className="mobile-form-group">
+            <label className="mobile-form-label">Category</label>
+            <input
+              type="text"
+              value={toolTypeForm.category}
+              onChange={(e) => setToolTypeForm({ ...toolTypeForm, category: e.target.value })}
+              className="mobile-form-input"
+              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) => setToolTypeForm({ ...toolTypeForm, interface_type: e.target.value as "web" | "terminal" })}
+              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) => setToolTypeForm({ ...toolTypeForm, 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) => setToolTypeForm({ ...toolTypeForm, 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) => setToolTypeForm({ ...toolTypeForm, 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) => setToolTypeForm({ ...toolTypeForm, startup_command: e.target.value })}
+              className="mobile-form-input"
+              placeholder="Command to run on startup"
+            />
+          </div>
+          <div className="mobile-form-group">
+            <label className="mobile-form-label">Readiness Command</label>
+            <input
+              type="text"
+              value={toolTypeForm.readiness_command}
+              onChange={(e) => setToolTypeForm({ ...toolTypeForm, 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>
+            <input
+              type="text"
+              value={toolTypeForm.readiness_timeout}
+              onChange={(e) => setToolTypeForm({ ...toolTypeForm, 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>
+            <input
+              type="text"
+              value={toolTypeForm.readiness_interval}
+              onChange={(e) => setToolTypeForm({ ...toolTypeForm, 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) => setToolTypeForm({ ...toolTypeForm, 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) => setToolTypeForm({ ...toolTypeForm, compose_template: e.target.value })}
+                className="mobile-form-textarea mobile-form-code"
+                placeholder="version: '3'"
+                rows={10}
+              />
+            </div>
+          )}
+          {toolTypeForm.definition_type === "dockerfile" && (
+            <div className="mobile-form-group">
+              <label className="mobile-form-label">Dockerfile Template</label>
+              <textarea
+                value={toolTypeForm.dockerfile_template}
+                onChange={(e) => setToolTypeForm({ ...toolTypeForm, dockerfile_template: e.target.value })}
+                className="mobile-form-textarea mobile-form-code"
+                placeholder="FROM ubuntu:22.04"
+                rows={10}
+              />
+            </div>
+          )}
+        </MobileEditView>
+      );
+    }
+  }
+
   return (
     <div className="container" style={{ display: "flex", height: "calc(100vh - 4rem)", gap: 0, padding: 0 }}>
       {/* Left Sidebar - Tool List */}
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index b2f9afb..0a9f23f 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1,3944 +1,375 @@
-:root {
-  color-scheme: light;
-  font-family: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
-  --bg: #f4f1ea;
-  --panel: #fffef9;
-  --ink: #1d1d1b;
-  --muted: #5f5b55;
-  --brand: #275d4b;
-  --brand-strong: #154236;
-  --border: #d8d0c5;
-  --primary: #275d4b;
-  --primary-fg: #fffef9;
-  --color-primary: #275d4b;
-  --success: #2f8f62;
-  --success-light: rgba(47, 143, 98, 0.14);
-  --warning: #c08a1e;
-  --warning-light: rgba(192, 138, 30, 0.14);
-  --danger: #b94a3c;
-  --danger-light: rgba(185, 74, 60, 0.14);
-  --info: #4f7fb8;
-  --info-light: rgba(79, 127, 184, 0.14);
 
-  /* Spacing Scale (4px base) */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.5rem;
-  --space-6: 2rem;
-  --space-8: 3rem;
-  --space-10: 4rem;
-
-  /* Breakpoints */
-  --bp-sm: 480px;
-  --bp-md: 768px;
-  --bp-lg: 1024px;
-  --bp-xl: 1280px;
-
-  /* Fluid Typography */
-  --font-size-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
-  --font-size-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
-  --font-size-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
-  --font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
-  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
-  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
-}
-
-[data-theme="dark"] {
-  color-scheme: dark;
-  --bg: #171613;
-  --panel: #22201d;
-  --ink: #ece7df;
-  --muted: #a59d92;
-  --brand: #5fa889;
-  --brand-strong: #4d9175;
-  --border: #39342d;
-  --primary: #5fa889;
-  --primary-fg: #171613;
-  --color-primary: #5fa889;
-  --success: #22c55e;
-  --success-light: rgba(34, 197, 94, 0.15);
-  --warning: #f59e0b;
-  --warning-light: rgba(245, 158, 11, 0.15);
-  --danger: #ef4444;
-  --danger-light: rgba(239, 68, 68, 0.15);
-  --info: #3b82f6;
-  --info-light: rgba(59, 130, 246, 0.15);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--ink);
-}
-
-[data-theme="dark"] body {
-  background: radial-gradient(circle at top right, #2a2520, var(--bg));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.shell {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.shell-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.85rem 1.25rem;
-  border-bottom: 1px solid var(--border);
-  background: color-mix(in srgb, var(--panel) 88%, transparent);
-  backdrop-filter: blur(7px);
-}
-
-[data-theme="dark"] .shell-header {
-  background: color-mix(in srgb, var(--panel) 88%, transparent);
-}
-
-.brand {
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.shell-body {
-  display: grid;
-  grid-template-columns: 230px 1fr;
-  height: calc(100vh - 57px);
-  flex: 1;
-}
-
-.shell-nav {
-  border-right: 1px solid var(--border);
-  padding: 1rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  background: color-mix(in srgb, var(--panel) 65%, transparent);
-}
-
-.nav-item {
-  padding: 0.65rem 0.75rem;
-  border-radius: 10px;
-  color: var(--muted);
-}
-
-.nav-item:hover {
-  background: #ece7df;
-  color: var(--ink);
-}
-
-.nav-item-active {
-  background: var(--brand);
-  color: #f7fff7;
-}
-
-.nav-section-title {
-  margin-top: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
-}
-
-.nav-divider {
-  height: 1px;
-  background: var(--border);
-  margin: 0.5rem 0;
-}
-
-.shell-content {
-  padding: 1.25rem;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+/* Mobile List View */
+.mobile-list-view {
+  padding: var(--space-2);
   height: 100%;
+  overflow-y: auto;
 }
 
-/* Mobile Navigation */
-.mobile-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  background: var(--panel);
-  border-top: 1px solid var(--border);
-  padding-bottom: env(safe-area-inset-bottom, 0);
-  z-index: 100;
-  height: 64px;
-}
-
-.mobile-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-  padding: 8px 12px;
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 11px;
-  min-width: 64px;
-  min-height: 44px;
-  border-radius: 8px;
-  transition: color 0.15s ease;
-}
-
-.mobile-nav-item.active {
-  color: var(--brand);
-}
-
-.mobile-nav-icon-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mobile-nav-badge {
-  position: absolute;
-  top: -6px;
-  right: -8px;
-  background: var(--danger);
-  color: white;
-  font-size: 10px;
-  font-weight: 600;
-  min-width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
-}
-
-/* Mobile Page Header */
-.mobile-page-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
+.mobile-list-search {
   padding: var(--space-2) 0;
-  margin-bottom: var(--space-3);
-  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--surface);
+  z-index: 10;
 }
 
-.mobile-page-header-back {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: transparent;
-  border: none;
-  color: var(--text);
-  cursor: pointer;
-  border-radius: 8px;
-  padding: 0;
-}
-
-.mobile-page-header-back:active {
-  background: var(--color-border);
-}
-
-.mobile-page-header h1 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-  flex: 1;
-}
-
-.mobile-page-header-actions {
-  display: flex;
-  gap: var(--space-2);
-}
-
-.mobile-nav-label {
-  font-size: 11px;
-  font-weight: 500;
-}
-
-/* Mobile shell content padding adjustment */
-.shell-content.mobile {
-  padding-bottom: calc(1.25rem + 64px);
-}
-
-.eyebrow {
-  margin: 0;
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
-}
-
-.home-page,
-.settings-page {
-  max-width: 1240px;
-}
-
-.home-hero {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-4);
-  align-items: flex-start;
-}
-
-.home-hero-actions {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
-
-.home-summary-grid,
-.home-project-grid,
-.home-session-grid {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.home-summary-grid {
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-}
-
-.home-project-grid,
-.home-session-grid {
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-}
-
-.home-section h2,
-.settings-header h1,
-.settings-panel h2 {
-  margin: 0;
-}
-
-.home-section h3,
-.home-section p {
-  margin: 0;
-}
-
-.row-tight {
-  gap: var(--space-2);
-}
-
-.settings-tabs {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
-
-.settings-tab {
-  padding: 0.6rem 0.9rem;
-  border-radius: 999px;
+.mobile-list-search-input {
+  width: 100%;
+  padding: var(--space-3);
   border: 1px solid var(--border);
-  color: var(--muted);
-  background: var(--panel);
+  border-radius: 8px;
+  font-size: 1rem;
+  background: var(--surface);
+  color: var(--text);
+  min-height: 44px;
 }
 
-.settings-tab.active {
-  background: var(--brand);
-  color: white;
-  border-color: transparent;
-}
-
-.settings-panel {
-  padding: 1.5rem;
-}
-
-.settings-actions,
-.form-actions {
-  display: flex;
-  gap: var(--space-3);
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.error-text {
-  color: var(--danger);
-}
-
-.success-text {
-  color: var(--success);
-}
-
-.small {
-  padding: 0.42rem 0.7rem;
-  min-height: 38px;
-}
-
-.session-card,
-.project-card,
-.recent-session-item {
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
-}
-
-/* Responsive Shell */
-@media (max-width: 767px) {
-  .shell-body {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-  }
-
-  .shell-nav {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    padding: 0.5rem;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .nav-item {
-    padding: 0.5rem 0.75rem;
-    white-space: nowrap;
-    font-size: var(--font-size-sm);
-  }
-
-  .shell-content {
-    padding: var(--space-4);
-    height: 100%;
-  }
-}
-
-.stack {
+.mobile-list-empty {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-}
-
-.muted {
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8);
   color: var(--muted);
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
-  gap: var(--space-4);
-}
-
-@media (min-width: 768px) {
-  .card-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (min-width: 1024px) {
-  .card-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-.card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 1rem;
-}
-
-.card-label {
-  margin: 0;
-  color: var(--muted);
-}
-
-.card-value {
-  margin: 0.45rem 0 0;
-  font-size: 1.6rem;
-  font-weight: 700;
-}
-
-.quick-actions {
-  display: flex;
-  gap: 0.6rem;
-}
-
-.primary-button,
-.secondary-button,
-.ghost-button {
-  border-radius: 10px;
-  border: 1px solid transparent;
-  padding: 0.58rem 0.85rem;
-  cursor: pointer;
-  font: inherit;
-}
-
-.primary-button {
-  background: var(--brand);
-  color: white;
-}
-
-.primary-button:hover {
-  background: var(--brand-strong);
-}
-
-.secondary-button {
-  border-color: var(--border);
-  background: var(--panel);
-}
-
-.ghost-button {
-  border-color: var(--border);
-  background: transparent;
-}
-
-.user-chip {
-  border: 1px solid var(--border);
-  background: var(--panel);
-  border-radius: 999px;
-  padding: 0.35rem 0.7rem;
-  font-size: 0.9rem;
-}
-
-.center-screen {
-  min-height: 55vh;
-  display: grid;
-  place-content: center;
   text-align: center;
 }
 
-.page-header {
+.mobile-list-empty p {
+  margin-top: var(--space-3);
+  font-size: 1rem;
+}
+
+.mobile-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.mobile-list-item {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
   gap: var(--space-3);
-}
-
-@media (max-width: 767px) {
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  /* Ensure minimum touch targets on mobile */
-  button,
-  a,
-  input,
-  select,
-  textarea,
-  [role="button"] {
-    min-height: 44px;
-    min-width: 44px;
-  }
-
-  /* Active states for touch feedback */
-  button:active,
-  a:active,
-  [role="button"]:active {
-    opacity: 0.8;
-    transform: scale(0.98);
-  }
-
-  /* Remove transform on buttons that shouldn't scale */
-  .mobile-nav-item:active,
-  .mobile-action-sheet-button:active,
-  .mobile-action-sheet-cancel:active {
-    transform: none;
-  }
-}
-
-.project-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.project-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.project-info h3 {
-  margin: 0 0 0.35rem;
-}
-
-.project-info p {
-  margin: 0;
-}
-
-.project-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.delete-confirm {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.danger-button {
-  border-radius: 10px;
-  border: 1px solid transparent;
-  padding: 0.58rem 0.85rem;
+  padding: var(--space-3) var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  text-align: left;
   cursor: pointer;
-  font: inherit;
-  background: #b91c1c;
-  color: white;
+  min-height: 64px;
+  width: 100%;
 }
 
-.danger-text {
-  color: #b91c1c;
+.mobile-list-item:active {
+  background: var(--surface-hover);
 }
 
-.error-text {
-  color: #b91c1c;
-  margin: 0;
-}
-
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.35);
-  display: grid;
-  place-content: center;
-  z-index: 50;
-}
-
-.dialog {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: var(--space-5);
-  width: min(560px, 100vw - 2rem);
-  max-height: min(800px, 100vh - 2rem);
-  overflow-y: auto;
-}
-
-.dialog-lg {
-  width: min(800px, 100vw - 2rem);
-}
-
-@media (max-width: 767px) {
-  .dialog {
-    width: 100vw;
-    height: 100vh;
-    max-height: 100vh;
-    border-radius: 0;
-    padding: var(--space-4);
-  }
-
-  .dialog-overlay {
-    padding: 0;
-  }
-}
-
-.dialog h2 {
-  margin: 0 0 1rem;
-}
-
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.form-field input,
-.form-field textarea,
-.form-field select {
-  padding: 0.55rem 0.7rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  font: inherit;
-  background: var(--panel);
-  color: var(--ink);
-}
-
-.dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.6rem;
-}
-
-@media (max-width: 767px) {
-  .dialog-actions {
-    flex-direction: column-reverse;
-    gap: 0.5rem;
-  }
-
-  .dialog-actions button {
-    width: 100%;
-    min-height: 44px;
-  }
-}
-
-.keys-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.key-card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 1rem;
-}
-
-.key-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.key-header h3 {
-  margin: 0;
-}
-
-.key-meta {
-  margin-bottom: 0.75rem;
-}
-
-.key-public {
+.mobile-list-item-icon {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem;
-  background: #f5f3ee;
+  justify-content: center;
+  background: var(--surface-hover);
   border-radius: 8px;
 }
 
-.key-public code {
-  font-size: 0.85rem;
-  word-break: break-all;
-  flex: 1;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.form-group input {
-  padding: 0.55rem 0.7rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  font: inherit;
-}
-
-.error {
-  color: #b91c1c;
-  padding: 0.75rem;
-  background: #fef2f2;
-  border-radius: 10px;
-}
-
-@media (max-width: 860px) {
-  .shell-body {
-    grid-template-columns: 1fr;
-  }
-
-  .shell-nav {
-    flex-direction: row;
-    overflow-x: auto;
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .quick-actions {
-    flex-direction: column;
-  }
-
-  .project-card {
-    flex-direction: column;
-  }
-}
-
-/* URL Validation Styles */
-.valid-url {
-  border-color: var(--success, #16a34a) !important;
-  background-color: var(--success-light, #f0fdf4) !important;
-}
-
-.needs-parsing-url {
-  border-color: var(--warning, #ca8a04) !important;
-  background-color: var(--warning-light, #fefce8) !important;
-}
-
-.invalid-url {
-  border-color: var(--danger, #dc2626) !important;
-  background-color: var(--danger-light, #fef2f2) !important;
-}
-
-.validation-status {
-  font-size: 0.85rem;
-  margin-top: 0.25rem;
-  display: block;
-}
-
-.validation-status.valid {
-  color: var(--success, #16a34a);
-}
-
-.validation-status.warning {
-  color: var(--warning, #ca8a04);
-}
-
-.validation-status.invalid {
-  color: #dc2626;
-}
-
-.validation-status.validating {
-  color: var(--muted);
-}
-
-.url-suggestion {
-  margin-top: 0.5rem;
-  padding: 0.5rem;
-  background: #fefce8;
-  border-radius: 8px;
-  border: 1px solid #fde047;
-}
-
-.suggestion-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 0.35rem;
-}
-
-.suggested-url {
-  font-size: 0.85rem;
-  color: #854d0e;
-  flex: 1;
-  word-break: break-all;
-}
-
-.secondary-button.small {
-  padding: 0.35rem 0.6rem;
-  font-size: 0.85rem;
-}
-
-/* Git History Page Styles */
-.history-actions {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.branch-selector {
-  padding: 0.45rem 0.7rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  font: inherit;
-  background: var(--panel);
-  color: var(--ink);
-}
-
-.history-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-  min-height: 60vh;
-}
-
-.commit-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  overflow-y: auto;
-  max-height: 70vh;
-}
-
-.commit-list.with-detail {
-  grid-column: 1;
-}
-
-.commit-item {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.commit-item:hover {
-  background: #ece7df;
-}
-
-.commit-item.selected {
-  border-color: var(--brand);
-  background: #f0f7f4;
-}
-
-.commit-graph {
-  font-family: monospace;
-  font-size: 0.9rem;
-  color: var(--brand);
-  white-space: pre;
-  flex-shrink: 0;
-  min-width: 60px;
-}
-
-.graph-line {
-  display: inline-block;
-}
-
-.commit-content {
+.mobile-list-item-content {
   flex: 1;
   min-width: 0;
 }
 
-.commit-header {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  margin-bottom: 0.35rem;
-}
-
-.commit-hash {
-  font-family: monospace;
-  font-size: 0.85rem;
-  color: var(--brand);
-  background: #f0f7f4;
-  padding: 0.15rem 0.4rem;
-  border-radius: 6px;
-}
-
-.commit-refs {
-  display: flex;
-  gap: 0.35rem;
-  flex-wrap: wrap;
-}
-
-.ref-tag {
-  font-size: 0.75rem;
-  padding: 0.15rem 0.4rem;
-  background: var(--brand);
-  color: white;
-  border-radius: 999px;
-}
-
-.commit-message {
-  margin: 0 0 0.35rem;
-  font-weight: 500;
+.mobile-list-item-title {
+  font-weight: 600;
+  font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.commit-meta {
-  display: flex;
-  gap: 0.75rem;
-  font-size: 0.85rem;
+.mobile-list-item-subtitle {
+  font-size: 0.875rem;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: var(--space-1);
+}
+
+.mobile-list-item-actions {
+  flex-shrink: 0;
   color: var(--muted);
 }
 
-.commit-detail-panel {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 1.25rem;
-  overflow-y: auto;
-  max-height: 70vh;
+/* Mobile Detail View */
+.mobile-detail-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.detail-header {
+.mobile-detail-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
-  padding-bottom: 0.75rem;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.mobile-detail-back {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.mobile-detail-back:active {
+  background: var(--surface-hover);
+}
+
+.mobile-detail-header-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-detail-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mobile-detail-subtitle {
+  font-size: 0.875rem;
+  color: var(--muted);
+  margin: var(--space-1) 0 0;
+}
+
+.mobile-detail-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.mobile-detail-action {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-hover);
+  border: none;
+  border-radius: 8px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.mobile-detail-action:active {
+  opacity: 0.7;
+}
+
+.mobile-detail-action-danger {
+  color: var(--error);
+}
+
+.mobile-detail-fields {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-3);
+}
+
+.mobile-detail-field {
+  padding: var(--space-3) 0;
   border-bottom: 1px solid var(--border);
 }
 
-.detail-header h3 {
-  margin: 0;
+.mobile-detail-field:last-child {
+  border-bottom: none;
 }
 
-.detail-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.detail-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.detail-section h4 {
-  margin: 0 0 0.5rem;
+.mobile-detail-field-label {
+  font-size: 0.875rem;
+  font-weight: 600;
   color: var(--muted);
-  font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-}
-
-.commit-hash-full {
-  font-family: monospace;
-  font-size: 0.85rem;
-  color: var(--brand);
-  margin: 0;
-}
-
-.commit-message-full {
-  margin: 0.5rem 0 0;
-  line-height: 1.5;
-  white-space: pre-wrap;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-}
-
-.stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.75rem;
-  background: #f5f3ee;
-  border-radius: 10px;
-}
-
-.stat.additions {
-  background: #f0fdf4;
-}
-
-.stat.deletions {
-  background: #fef2f2;
-}
-
-.stat-value {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--ink);
-}
-
-.stat.additions .stat-value {
-  color: #16a34a;
-}
-
-.stat.deletions .stat-value {
-  color: #dc2626;
-}
-
-.stat-label {
-  font-size: 0.8rem;
-  color: var(--muted);
-}
-
-.parent-list {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.parent-hash {
-  font-family: monospace;
-  font-size: 0.85rem;
-  padding: 0.2rem 0.5rem;
-  background: #f5f3ee;
-  border-radius: 6px;
-}
-
-.diff-content {
-  font-family: monospace;
-  font-size: 0.8rem;
-  line-height: 1.5;
-  background: #f5f3ee;
-  padding: 0.75rem;
-  border-radius: 10px;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-@media (min-width: 1024px) {
-  .history-container {
-    grid-template-columns: 1fr 400px;
-  }
-
-  .commit-list.with-detail {
-    grid-column: 1;
-  }
-
-  .commit-detail-panel {
-    grid-column: 2;
-    position: sticky;
-    top: 1rem;
-  }
-}
-
-/* Repository Workspace */
-.repo-workspace {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 60px);
-  overflow: hidden;
-}
-
-.workspace-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.workspace-header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.workspace-header-icon {
-  font-size: 1.5rem;
-}
-
-.workspace-header-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.workspace-header-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.workspace-header-subtitle {
-  color: var(--muted);
-  font-size: 0.875rem;
-}
-
-.workspace-header-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.workspace-header-action-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--panel);
-  color: var(--ink);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.workspace-header-action-btn:hover {
-  background: var(--bg);
-  border-color: var(--brand);
-}
-
-.workspace-title {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.workspace-title h1 {
-  margin: 0;
-  font-size: 1.25rem;
-}
-
-.repo-name {
-  color: var(--muted);
-  font-size: 0.875rem;
-}
-
-.workspace-layout {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.workspace-sidebar {
-  width: 280px;
-  min-width: 280px;
-  border-right: 1px solid var(--border);
-  background: var(--panel);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-@media (max-width: 767px) {
-  .workspace-layout {
-    flex-direction: column;
-  }
-
-  .workspace-sidebar {
-    width: 100%;
-    min-width: auto;
-    max-height: 40vh;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .workspace-header {
-    flex-direction: column;
-    gap: var(--space-3);
-    align-items: flex-start;
-    padding: var(--space-4);
-  }
-
-  .workspace-header-actions {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-
-  .workspace-main {
-    padding: var(--space-2);
-  }
-
-  .tree-entry {
-    padding: 0.5rem;
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.sidebar-section {
-  padding: 1rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.sidebar-section label {
-  margin: 0;
-}
-
-.workspace-main {
-  flex: 1;
-  overflow: hidden;
-  padding: 1rem;
-  background: var(--bg);
-  display: flex;
-  flex-direction: column;
-}
-
-/* File Tree */
-.file-tree {
-  flex: 1;
-  overflow: auto;
-  padding: 0.5rem;
-}
-
-.tree-entry {
+  margin-bottom: var(--space-2);
   display: block;
-  width: 100%;
-  padding: 0.375rem 0.5rem;
-  border: none;
-  background: none;
-  color: var(--ink);
-  text-align: left;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 0.875rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
-.tree-entry:hover {
-  background: var(--bg);
+.mobile-detail-field-value {
+  font-size: 1rem;
+  color: var(--text);
+  word-break: break-word;
 }
 
-.tree-directory {
-  font-weight: 500;
-}
-
-.tree-up {
-  color: var(--muted);
-  font-style: italic;
-}
-
-/* File Viewer */
-.file-viewer {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.file-viewer-header {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg);
-}
-
-.file-breadcrumbs {
+.mobile-detail-code {
+  background: var(--code-bg);
+  padding: var(--space-3);
+  border-radius: 6px;
+  overflow-x: auto;
   font-size: 0.875rem;
   font-family: monospace;
-}
-
-.breadcrumb-sep {
-  color: var(--muted);
-  margin: 0 0.25rem;
-}
-
-.file-content {
-  padding: 1rem;
-  overflow: auto;
-  max-height: calc(100vh - 200px);
-}
-
-.file-content pre {
   margin: 0;
-  font-family: "IBM Plex Mono", monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
 }
 
-.file-viewer-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* Mobile Edit View */
+.mobile-edit-view {
   height: 100%;
-  min-height: 300px;
-}
-
-/* File Status Indicators */
-.file-status-indicator {
-  float: right;
-  font-size: 0.75rem;
-  font-weight: bold;
-  padding: 0 0.375rem;
-  border-radius: 3px;
-  margin-left: 0.5rem;
-}
-
-.file-status-indicator.modified {
-  color: #f59e0b;
-  background: rgba(245, 158, 11, 0.1);
-}
-
-.file-status-indicator.added {
-  color: #10b981;
-  background: rgba(16, 185, 129, 0.1);
-}
-
-.file-status-indicator.deleted {
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.file-status-indicator.untracked {
-  color: #6b7280;
-  background: rgba(107, 114, 128, 0.1);
-}
-
-/* Commit Panel */
-.commit-panel {
-  padding: 1rem;
-  border-top: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.commit-panel h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.file-list {
-  max-height: 150px;
-  overflow: auto;
-  margin-bottom: 0.75rem;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0;
-  font-size: 0.8125rem;
-}
-
-.file-status {
-  font-weight: bold;
-  font-size: 0.75rem;
-  width: 1rem;
-  text-align: center;
-}
-
-.file-item.modified .file-status { color: #f59e0b; }
-.file-item.added .file-status { color: #10b981; }
-.file-item.deleted .file-status { color: #ef4444; }
-.file-item.untracked .file-status { color: #6b7280; }
-
-.commit-form {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
 }
 
-.commit-message-input {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--ink);
-  font-family: inherit;
+.mobile-edit-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.mobile-edit-cancel,
+.mobile-edit-save {
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  border-radius: 6px;
   font-size: 0.875rem;
-  resize: vertical;
+  font-weight: 600;
+  cursor: pointer;
+  min-height: 36px;
 }
 
-.commit-button {
-  padding: 0.5rem 1rem;
+.mobile-edit-cancel {
+  background: transparent;
+  color: var(--text);
+}
+
+.mobile-edit-save {
   background: var(--primary);
   color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
 }
 
-.commit-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.commit-error {
-  color: #ef4444;
-  font-size: 0.8125rem;
-}
-
-/* Modal Styles */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1.5rem;
-  min-width: 400px;
-  max-width: 600px;
-  max-height: 80vh;
-  overflow: auto;
-}
-
-@media (max-width: 767px) {
-  .modal-content {
-    min-width: auto;
-    width: calc(100% - 2rem);
-    max-width: 100%;
-    margin: 1rem;
-    padding: 1rem;
-    max-height: calc(100vh - 2rem);
-  }
-
-  .modal-actions {
-    flex-direction: column-reverse;
-    gap: 0.5rem;
-  }
-
-  .modal-actions button {
-    width: 100%;
-    min-height: 44px;
-  }
-}
-
-.modal-content h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.25rem;
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
-}
-
-/* Merge Dialog */
-.merge-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.merge-form .form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.merge-form label {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.merge-form select,
-.merge-form input,
-.merge-form textarea {
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--ink);
-  font-family: inherit;
-  font-size: 0.875rem;
-}
-
-.merge-form textarea {
-  resize: vertical;
-}
-
-.input-disabled {
+.mobile-edit-save:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-.success-text {
-  color: #10b981;
-  font-size: 0.875rem;
-  padding: 0.5rem;
-  background: rgba(16, 185, 129, 0.1);
-  border-radius: 4px;
-}
-
-/* Settings Layout */
-.settings-layout {
-  display: flex;
-  gap: 2rem;
-  padding: 1.5rem 0;
-}
-
-.settings-sidebar {
-  width: 200px;
-  flex-shrink: 0;
-}
-
-.settings-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.settings-nav-link {
-  padding: 0.625rem 1rem;
-  border-radius: 8px;
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 0.95rem;
-  transition: all 0.2s;
-}
-
-.settings-nav-link:hover {
-  background: var(--bg);
-  color: var(--ink);
-}
-
-.settings-nav-link.active {
-  background: var(--brand);
-  color: white;
-  font-weight: 500;
-}
-
-.settings-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.settings-panel {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 1.5rem;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-  .settings-layout {
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .settings-sidebar {
-    width: 100%;
-  }
-
-  .settings-nav {
-    flex-direction: row;
-    overflow-x: auto;
-    padding-bottom: 0.5rem;
-  }
-
-  .settings-nav-link {
-    white-space: nowrap;
-    padding: 0.5rem 0.75rem;
-    font-size: 0.875rem;
-  }
-
-  .workspace-header {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: flex-start;
-  }
-
-  .workspace-header-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-}
-
-.settings-panel h2 {
-  margin: 0 0 1.25rem;
-  font-size: 1.25rem;
-}
-
-.settings-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.9rem;
-  color: var(--muted);
-  margin-bottom: 1rem;
-}
-
-.settings-breadcrumb a {
-  color: var(--brand);
-  text-decoration: none;
-}
-
-.settings-breadcrumb a:hover {
-  text-decoration: underline;
-}
-
-.project-settings-page {
-  padding: 1.5rem;
-}
-
-/* Repositories Settings Tab */
-.repositories-settings-tab h2 {
-  margin: 0 0 1.25rem;
-  font-size: 1.25rem;
-}
-
-.repositories-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.repository-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-}
-
-.repository-info h3 {
-  margin: 0 0 0.25rem;
-  font-size: 1rem;
-}
-
-.repository-info p {
-  margin: 0 0 0.5rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.repo-type {
-  font-size: 0.75rem;
-  padding: 0.2rem 0.5rem;
-  background: var(--brand);
-  color: white;
-  border-radius: 999px;
-}
-
-/* Git Toolbar - Top Bar Styles */
-.git-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.5rem 1.5rem;
-  background: var(--bg);
-  border-bottom: 1px solid var(--border);
-  min-height: 48px;
-}
-
-.toolbar-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.toolbar-group {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.toolbar-button {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--panel);
-  color: var(--ink);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-
-.toolbar-button:hover:not(:disabled) {
-  background: var(--brand);
-  color: white;
-  border-color: var(--brand);
-}
-
-.toolbar-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.toolbar-button.primary {
-  background: var(--brand);
-  color: white;
-  border-color: var(--brand);
-}
-
-.branch-select {
-  padding: 0.4rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--panel);
-  color: var(--ink);
-  font-size: 0.85rem;
-  cursor: pointer;
-  min-width: 140px;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 4px;
-  background: var(--brand);
-  color: white;
-  font-size: 0.7rem;
+.mobile-edit-title {
+  font-size: 1.125rem;
   font-weight: 600;
-  border-radius: 999px;
-}
-
-.toolbar-error {
-  color: #ef4444;
-  font-size: 0.85rem;
-  padding: 0.25rem 0.5rem;
-  background: rgba(239, 68, 68, 0.1);
-  border-radius: 4px;
-}
-
-.toolbar-input {
-  padding: 0.4rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--panel);
-  color: var(--ink);
-  font-size: 0.85rem;
-}
-
-.new-branch-form {
-  padding: 0.75rem;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  margin-top: 0.5rem;
-}
-
-.status-summary {
-  gap: 0.75rem;
-}
-
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.8rem;
-}
-
-.status-badge.modified {
-  background: rgba(245, 158, 11, 0.1);
-  color: #d97706;
-}
-
-.status-badge.added {
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
-}
-
-.status-badge.deleted {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
-}
-
-.status-badge.untracked {
-  background: rgba(107, 114, 128, 0.1);
-  color: #4b5563;
-}
-
-/* File Editor */
-.file-editor {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.file-editor-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: var(--panel);
-  border-bottom: 1px solid var(--border);
-}
-
-.file-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.file-editor-content {
-  flex: 1;
-  overflow: hidden;
-  background: var(--bg);
-  display: flex;
-  flex-direction: column;
-}
-
-/* Syntax Highlighter */
-.syntax-highlighter {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.highlighter-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  background: var(--panel);
-  border-bottom: 1px solid var(--border);
-}
-
-.language-badge {
-  font-size: 0.8rem;
-  padding: 0.2rem 0.5rem;
-  background: var(--bg);
-  border-radius: 4px;
-  color: var(--muted);
-}
-
-.copy-button {
-  font-size: 0.8rem;
-  padding: 0.25rem 0.5rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--ink);
-}
-
-.copy-button:hover {
-  background: var(--brand);
-  color: white;
-  border-color: var(--brand);
-}
-
-.code-container {
-  display: flex;
-  flex: 1;
-  overflow: auto;
-  font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.line-numbers {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 0.5rem;
-  background: var(--panel);
-  border-right: 1px solid var(--border);
-  color: var(--muted);
-  text-align: right;
-  user-select: none;
-  min-width: 3rem;
-}
-
-.line-number {
-  padding: 0 0.5rem;
-}
-
-.code-block {
-  flex: 1;
   margin: 0;
-  padding: 1rem;
-  overflow: visible;
-  background: transparent;
-}
-
-.code-block code {
-  display: block;
-  background: transparent;
-}
-
-/* Code Editor */
-.code-editor {
-  height: 100%;
-  overflow: auto;
-}
-
-.editor-textarea {
-  font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
-  font-size: 14px;
-  line-height: 1.5;
-  min-height: 100%;
-}
-
-.editor-textarea-input {
-  background: transparent;
-  color: var(--ink);
-  caret-color: var(--ink);
-}
-
-.editor-line {
-  display: flex;
-}
-
-.editor-line-number {
-  display: inline-block;
-  width: 3rem;
-  padding: 0 0.5rem;
-  text-align: right;
-  color: var(--muted);
-  user-select: none;
-  background: var(--panel);
-  border-right: 1px solid var(--border);
-}
-
-.editor-line-content {
   flex: 1;
-  padding: 0 0.5rem;
-  white-space: pre;
-}
-
-/* Commit Dialog */
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.commit-dialog {
-  background: var(--panel);
-  border-radius: 14px;
-  width: 100%;
-  max-width: 600px;
-  max-height: 90vh;
-  overflow: auto;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-}
-
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.dialog-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.dialog-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: var(--muted);
-  padding: 0;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-}
-
-.dialog-close:hover {
-  background: var(--bg);
-  color: var(--ink);
-}
-
-.dialog-body {
-  padding: 1.5rem;
-}
-
-.file-info {
-  margin: 0 0 1rem;
-  color: var(--muted);
-}
-
-.diff-preview {
-  margin-bottom: 1.5rem;
-}
-
-.diff-preview h4 {
-  margin: 0 0 0.75rem;
-  font-size: 0.9rem;
-  color: var(--muted);
-}
-
-.diff-content {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: auto;
-  max-height: 300px;
-  font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
-  font-size: 13px;
-}
-
-.diff-line {
-  display: flex;
-  padding: 0.15rem 0.5rem;
-  gap: 0.5rem;
-}
-
-.diff-line-number {
-  color: var(--muted);
-  min-width: 2rem;
-  text-align: right;
-  user-select: none;
-}
-
-.diff-marker {
-  width: 1rem;
   text-align: center;
-  font-weight: bold;
 }
 
-.diff-added {
-  background: rgba(16, 185, 129, 0.1);
+.mobile-edit-form {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-3);
 }
 
-.diff-added .diff-marker {
-  color: #059669;
+.mobile-edit-field {
+  margin-bottom: var(--space-4);
 }
 
-.diff-removed {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.diff-removed .diff-marker {
-  color: #dc2626;
-}
-
-.diff-same {
-  background: transparent;
-}
-
-.warning-message {
-  padding: 0.75rem;
-  background: rgba(245, 158, 11, 0.1);
-  color: #d97706;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--border);
-}
-
-/* Prism.js Theme Integration */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: var(--ink);
-  text-shadow: none;
-  font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
-  font-size: 14px;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-  tab-size: 2;
-  hyphens: none;
-}
-
-/* Syntax Highlighting Colors */
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: var(--muted);
-}
-
-.token.punctuation {
-  color: var(--ink);
-}
-
-.token.namespace {
-  opacity: 0.7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #f59e0b;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #10b981;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #f43f5e;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #3b82f6;
-}
-
-.token.function,
-.token.class-name {
-  color: #8b5cf6;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #ec4899;
-}
-
-/* Icon System */
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  vertical-align: middle;
-}
-
-.icon svg {
+.mobile-edit-field-label {
   display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: var(--space-2);
+  color: var(--text);
 }
 
-.icon-sm {
-  width: 16px;
-  height: 16px;
+.mobile-edit-field-label .required {
+  color: var(--error);
+  margin-left: var(--space-1);
 }
 
-.icon-md {
+.mobile-edit-input {
+  width: 100%;
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 1rem;
+  background: var(--surface);
+  color: var(--text);
+  min-height: 44px;
+}
+
+.mobile-edit-input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.mobile-edit-textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+.mobile-edit-code {
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+.mobile-edit-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  min-height: 44px;
+}
+
+.mobile-edit-checkbox input {
   width: 20px;
   height: 20px;
 }
 
-.icon-lg {
-  width: 24px;
-  height: 24px;
-}
-
-.icon-xl {
-  width: 32px;
-  height: 32px;
-}
-
-/* Button icons */
-button .icon,
-a .icon {
-  margin-right: 0.35rem;
-}
-
-button .icon:last-child,
-a .icon:last-child {
-  margin-right: 0;
-}
-
-/* Navigation icons */
-.nav-item .icon {
-  margin-right: 0.5rem;
-}
-
-/* Status badge icons */
-.status-badge .icon {
-  margin-right: 0.25rem;
-}
-
-/* ============================================
-   Responsive Design System
-   ============================================ */
-
-/* Layout Utilities */
-.container {
-  width: 100%;
-  max-width: min(1200px, 100vw - 2rem);
-  margin-inline: auto;
-  padding-inline: var(--space-4);
-}
-
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.stack-sm {
-  gap: var(--space-2);
-}
-
-.stack-md {
-  gap: var(--space-4);
-}
-
-.stack-lg {
-  gap: var(--space-6);
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-4);
-  align-items: center;
-}
-
-.grid {
-  display: grid;
-  gap: var(--space-4);
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
-}
-
-/* Text Utilities */
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.truncate-multiline {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.break-word {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  hyphens: auto;
-}
-
-/* Touch Targets */
-.button,
-.nav-link,
-.icon-button,
-button,
-[role="button"] {
-  min-height: 44px;
-  min-width: 44px;
-}
-
-/* Dialog Responsive */
-.dialog {
-  width: min(560px, 100vw - 2rem);
-  max-height: min(800px, 100vh - 2rem);
-  overflow-y: auto;
-}
-
-.dialog-lg {
-  width: min(800px, 100vw - 2rem);
-}
-
-/* Table Responsive */
-.table-responsive {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.table-responsive table {
-  min-width: 100%;
-}
-
-/* Mobile-first Media Queries */
-@media (max-width: 767px) {
-  /* Card layout for tables on mobile */
-  .table-responsive thead {
-    display: none;
-  }
-
-  .table-responsive tbody tr {
-    display: block;
-    margin-bottom: var(--space-4);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: var(--space-4);
-  }
-
-  .table-responsive td {
-    display: flex;
-    justify-content: space-between;
-    padding: var(--space-2) 0;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .table-responsive td:last-child {
-    border-bottom: none;
-  }
-
-  .table-responsive td::before {
-    content: attr(data-label);
-    font-weight: 600;
-    margin-right: var(--space-2);
-  }
-
-  /* Larger touch targets on mobile */
-  .button,
-  button {
-    padding: var(--space-3) var(--space-4);
-  }
-
-  /* Full-width inputs on mobile */
-  input,
-  select,
-  textarea {
-    width: 100%;
-    min-height: 44px;
-  }
-}
-
-/* Small devices */
-@media (min-width: 480px) {
-  .container {
-    padding-inline: var(--space-5);
-  }
-}
-
-/* Medium devices */
-@media (min-width: 768px) {
-  .container {
-    padding-inline: var(--space-6);
-  }
-}
-
-/* Large devices */
-@media (min-width: 1024px) {
-  .container {
-    padding-inline: var(--space-8);
-  }
-}
-
-/* Extra large devices */
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1200px;
-  }
-}
-
-/* ============================================
-   Page-Specific Responsive Styles
-   ============================================ */
-
-/* Forms - Full width on mobile */
-@media (max-width: 767px) {
-  .form-field input,
-  .form-field textarea,
-  .form-field select {
-    width: 100%;
-    min-height: 44px;
-  }
-
-  /* Settings page stack */
-  .settings-layout {
-    flex-direction: column;
-  }
-
-  .settings-nav {
-    flex-direction: row;
-    overflow-x: auto;
-    padding-bottom: var(--space-2);
-  }
-
-  /* Project cards full width */
-  .project-card {
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .project-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  /* Repository cards */
-  .repository-card {
-    flex-direction: column;
-    gap: var(--space-3);
-    align-items: flex-start;
-  }
-
-  .repository-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  /* Git toolbar wrap */
-  .git-toolbar {
-    flex-wrap: wrap;
-    gap: var(--space-2);
-  }
-
-  /* Dashboard cards */
-  .dashboard-grid {
-    grid-template-columns: 1fr;
-  }
-
-  /* Stack form actions */
-  .form-actions {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .form-actions button {
-    width: 100%;
-    justify-content: center;
-  }
-}
-
-/* Ensure all pages have proper padding */
-.stack > h1,
-.stack > h2 {
-  margin-top: 0;
-}
-
-/* Touch target verification override */
-button,
-[role="button"],
-a.nav-item,
-.tree-entry {
-  min-height: 44px;
-}
-
-/* Table horizontal scroll wrapper */
-.table-wrapper {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  width: 100%;
-}
-
-/* Dialog content spacing */
-.dialog-body {
-  padding: var(--space-4) 0;
-}
-
-/* Prevent text overflow in cards */
-.card h3,
-.card p {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* SSH keys table responsive */
-.ssh-key-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.ssh-key-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding: var(--space-4);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-}
-
-@media (min-width: 768px) {
-  .ssh-key-item {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-
-/* Session Navigation */
-.session-item {
-  position: relative;
-  padding-left: var(--space-6);
-}
-
-.session-status {
-  position: absolute;
-  left: var(--space-2);
-  top: 50%;
-  transform: translateY(-50%);
-  width: 8px;
-  height: 8px;
+/* FAB (Floating Action Button) */
+.mobile-fab {
+  position: fixed;
+  bottom: calc(80px + env(safe-area-inset-bottom));
+  right: var(--space-4);
+  width: 56px;
+  height: 56px;
   border-radius: 50%;
-  background: var(--muted);
-}
-
-.session-status.running {
-  background: var(--success);
-}
-
-.session-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 140px;
-}
-
-.nav-divider {
-  height: 1px;
-  background: var(--border);
-  margin: var(--space-2) var(--space-3);
-}
-
-.nav-section-title {
-  padding: var(--space-2) var(--space-4);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--muted);
-}
-
-/* Instance List */
-.instance-list {
-  margin-top: var(--space-4);
-}
-
-.instance-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-4);
-}
-
-.instance-list-header h3 {
-  margin: 0;
-}
-
-.instance-grid {
-  display: grid;
-  gap: var(--space-3);
-}
-
-.instance-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-4);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  position: relative;
-}
-
-.instance-info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.instance-name {
-  font-weight: 600;
-}
-
-.instance-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: var(--text-sm);
-  color: var(--muted);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.instance-actions {
-  display: flex;
-  gap: var(--space-2);
-  align-items: center;
-}
-
-.instance-card.busy {
-  opacity: 0.7;
-}
-
-.instance-busy-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  background: rgba(var(--bg-rgb, 255, 255, 255), 0.8);
-  border-radius: 10px;
-  z-index: 1;
-  font-size: var(--text-sm);
-  color: var(--muted);
-}
-
-.session-card {
-  position: relative;
-}
-
-.session-card.busy {
-  opacity: 0.7;
-}
-
-.session-busy-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(var(--bg-rgb, 255, 255, 255), 0.8);
-  border-radius: var(--space-2);
-  z-index: 1;
-}
-
-/* ============================================
-   Terminal Styles
-   ============================================ */
-
-.terminal-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  padding: var(--space-4);
-  gap: var(--space-4);
-}
-
-.terminal-page-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  flex-shrink: 0;
-}
-
-.terminal-page-header h1 {
-  margin: 0;
-}
-
-.terminal-wrapper {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  flex: 1;
-  min-height: 0;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  overflow: hidden;
-  background: #1e1e1e;
-}
-
-.terminal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-3) var(--space-4);
-  background: #2d2d2d;
-  border-bottom: 1px solid #3e3e3e;
-  flex-shrink: 0;
-}
-
-.terminal-status {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #666;
-}
-
-.status-dot.connecting {
-  background: #f5f543;
-  animation: pulse 1.5s infinite;
-}
-
-.status-dot.connected {
-  background: #0dbc79;
-}
-
-.status-dot.disconnected,
-.status-dot.error {
-  background: #cd3131;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.status-text {
-  font-size: 0.875rem;
-  color: #d4d4d4;
-  text-transform: capitalize;
-}
-
-.terminal-close {
-  padding: var(--space-1) var(--space-3);
-  background: transparent;
-  border: 1px solid #666;
-  border-radius: 6px;
-  color: #d4d4d4;
-  cursor: pointer;
-  font-size: 0.875rem;
-}
-
-.terminal-close:hover {
-  background: #3e3e3e;
-}
-
-.terminal-error {
-  padding: var(--space-3) var(--space-4);
-  background: #cd3131;
-  color: white;
-  font-size: 0.875rem;
-  flex-shrink: 0;
-}
-
-.terminal-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: var(--space-2);
-  overflow: hidden;
-}
-
-.terminal-container .xterm {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.terminal-container canvas {
-  display: block;
-}
-
-/* Ensure xterm fills container */
-.terminal-container .xterm-viewport {
-  width: 100% !important;
-}
-
-/* Mobile terminal container - no padding to maximize space */
-.terminal-wrapper.mobile .terminal-container {
-  padding: 0;
-}
-
-/* Ensure xterm viewport fills container properly */
-/* Responsive terminal */
-@media (max-width: 767px) {
-  .terminal-page {
-    padding: var(--space-2);
-    gap: var(--space-2);
-  }
-
-  .terminal-page-header h1 {
-    font-size: 1.25rem;
-  }
-}
-
-/* ============================================
-   Sessions Page Styles
-   ============================================ */
-
-.nav-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  background: var(--primary);
-  color: var(--primary-fg);
-  border-radius: 9px;
-  font-size: 11px;
-  font-weight: 600;
-  margin-left: auto;
-}
-
-.sessions-page {
-  max-width: 1200px;
-}
-
-.last-session-section {
-  margin-bottom: var(--space-6);
-}
-
-/* Mobile Sessions Page */
-@media (max-width: 767px) {
-  .sessions-page {
-    padding: var(--space-2);
-  }
-
-  .sessions-page .page-header {
-    margin-bottom: var(--space-3);
-  }
-
-  .sessions-page .page-header h1 {
-    font-size: 1.25rem;
-  }
-
-  .last-session-section {
-    margin-bottom: var(--space-4);
-  }
-
-  .last-session-section h2 {
-    font-size: 1rem;
-    margin-bottom: var(--space-2);
-  }
-
-  .create-session-section {
-    padding: var(--space-3);
-  }
-
-  .create-session-section h2 {
-    font-size: 1rem;
-    margin-bottom: var(--space-2);
-  }
-}
-
-.last-session-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-4);
-  padding: var(--space-5);
-  border: 2px solid var(--primary);
-}
-
-.last-session-info h3 {
-  margin: 0 0 var(--space-1) 0;
-  font-size: 1.25rem;
-}
-
-.active-sessions-section {
-  position: relative;
-  margin-bottom: var(--space-6);
-}
-
-.active-sessions-section.dimmed {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.active-sessions-section h2 {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.active-sessions-section .badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  height: 24px;
-  padding: 0 6px;
-  background: var(--success);
-  color: white;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.sessions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: var(--space-4);
-}
-
-.session-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  padding: var(--space-4);
-}
-
-.session-info h4 {
-  margin: 0 0 var(--space-1) 0;
-  font-size: 1rem;
-}
-
-.session-url {
-  margin: var(--space-1) 0;
-  font-size: 0.8rem;
-  word-break: break-all;
-}
-
-.session-url a {
-  color: var(--color-primary);
-  text-decoration: none;
-}
-
-.session-url a:hover {
-  text-decoration: underline;
-}
-
-.session-actions {
-  display: flex;
-  gap: var(--space-2);
-}
-
-/* Session Card - Unified Component */
-.session-card-content {
-  flex: 1;
-}
-
-.session-card-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.session-card-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--space-2);
-}
-
-.session-card-title h4 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.session-card-status-badges {
-  display: flex;
-  gap: var(--space-1);
-  flex-wrap: wrap;
-}
-
-.session-card-meta {
-  font-size: 0.85rem;
-  margin: 0;
-}
-
-.session-card-meta .icon {
-  margin-right: var(--space-1);
-  vertical-align: text-bottom;
-}
-
-.session-card-url {
-  margin: var(--space-1) 0;
-  font-size: 0.8rem;
-  word-break: break-all;
-}
-
-.session-card-url a {
-  color: var(--color-primary);
-  text-decoration: none;
-}
-
-.session-card-url a:hover {
-  text-decoration: underline;
-}
-
-.session-card-actions {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-  margin-top: var(--space-2);
-  padding-top: var(--space-3);
-  border-top: 1px solid var(--color-border);
-}
-
-/* Session List - Unified Component */
-.session-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-.session-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.session-group-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.session-group-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-/* Action labels - hidden on mobile */
-.action-label {
-  margin-left: var(--space-1);
-}
-
-@media (max-width: 640px) {
-  .action-label {
-    display: none;
-  }
-
-  .session-card-actions {
-    gap: var(--space-1);
-  }
-
-  .session-card-actions button,
-  .session-card-actions a {
-    padding: var(--space-1);
-  }
-
-  .session-card-actions.mobile {
-    display: flex;
-    gap: var(--space-2);
-    padding-top: var(--space-3);
-    border-top: 1px solid var(--color-border);
-  }
-
-  .session-card-actions.mobile .mobile-primary {
-    flex: 1;
-    justify-content: center;
-    min-height: 44px;
-    padding: var(--space-2) var(--space-3);
-  }
-
-  .session-card-actions.mobile .mobile-more {
-    min-width: 44px;
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-2);
-  }
-}
-
-.recent-sessions-section {
-  margin-bottom: var(--space-6);
-}
-
-/* Loading overlay for sessions */
-.sessions-grid {
-  position: relative;
-}
-
-.sessions-grid.dimmed {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.create-session-form-wrapper {
-  position: relative;
-}
-
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  background: rgba(255, 254, 249, 0.7);
-  border-radius: var(--space-2);
-}
-
-.loading-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-6);
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--space-2);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.loading-content .icon {
-  animation: spin 1s linear infinite;
-  color: var(--brand);
-}
-
-.loading-content p {
-  margin: 0;
-  font-size: var(--font-size-base);
-  color: var(--muted);
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.recent-sessions-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.recent-session-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-3) var(--space-4);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.recent-session-info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.recent-session-name {
-  font-weight: 500;
-}
-
-.recent-session-actions {
-  display: flex;
-  gap: var(--space-2);
-  align-items: center;
-}
-
-.delete-confirm-inline,
-.stop-confirm-inline {
-  display: flex;
-  gap: var(--space-2);
-  align-items: center;
-}
-
-.confirm-text {
-  font-size: 13px;
-  color: var(--muted);
-  font-weight: 500;
-}
-
-.create-session-section {
-  position: relative;
-  margin-bottom: var(--space-6);
-}
-
-.create-session-section.dimmed {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.create-session-form {
-  max-width: 600px;
-}
-
-.create-session-form .form-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--space-4);
-}
-
-@media (max-width: 767px) {
-  .create-session-form .form-row {
-    grid-template-columns: 1fr;
-    gap: var(--space-3);
-  }
-
-  .create-session-form input,
-  .create-session-form select,
-  .create-session-form textarea,
-  .create-session-form button {
-    min-height: 44px;
-  }
-}
-
-/* Workflow Step Styles */
-.workflow-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-.workflow-step {
-  opacity: 0.4;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-
-.workflow-step.active {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.workflow-step.complete {
-  opacity: 0.7;
-  pointer-events: auto;
-}
-
-.workflow-step-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  margin-bottom: var(--space-3);
-  font-weight: 600;
-  color: var(--text-muted);
-}
-
-.workflow-step.active .workflow-step-header {
-  color: var(--text-primary);
-}
-
-.workflow-step-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: var(--bg-muted);
-  color: var(--text-muted);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.workflow-step.active .workflow-step-number {
   background: var(--primary);
   color: white;
-}
-
-.workflow-step.complete .workflow-step-number {
-  background: var(--success);
-  color: white;
-}
-
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-
-.status-badge.running {
-  background: var(--success-light, #dcfce7);
-  color: var(--success, #16a34a);
-}
-
-.status-badge.stopped {
-  background: var(--muted-bg, #f3f4f6);
-  color: var(--muted, #6b7280);
-}
-
-.status-badge.pending {
-  background: var(--warning-light, #fef3c7);
-  color: var(--warning, #d97706);
-}
-
-.status-badge.error {
-  background: var(--danger-light, #fee2e2);
-  color: var(--danger, #dc2626);
-}
-
-/* ============================================
-   Mobile Terminal Styles
-   ============================================ */
-
-/* Mobile terminal shell - fills viewport */
-.shell.mobile-terminal-shell {
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.mobile-terminal-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  background: #1e1e1e;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Mobile Terminal Header */
-.mobile-terminal-header {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-3);
-  background: #2d2d2d;
-  border-bottom: 1px solid #3e3e3e;
-  transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
-  z-index: 100;
-  overflow: hidden;
-}
-
-.mobile-terminal-header.hidden {
-  transform: translateY(-100%);
-  opacity: 0;
-  pointer-events: none;
-  height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  border-width: 0;
-  flex-shrink: 1;
-}
-
-.mobile-terminal-header.visible {
-  transform: translateY(0);
-  opacity: 1;
-  height: auto;
-}
-
-.mobile-terminal-header-left,
-.mobile-terminal-header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex: 0 0 auto;
-}
-
-.mobile-terminal-header-center {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex: 1;
-  justify-content: center;
-  min-width: 0;
-}
-
-.mobile-terminal-header-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #d4d4d4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mobile-terminal-header-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid #3e3e3e;
-  border-radius: 6px;
-  color: #d4d4d4;
-  cursor: pointer;
-  font-size: 0.875rem;
-  transition: background 0.2s ease;
-}
-
-.mobile-terminal-header-button:hover {
-  background: #3e3e3e;
-}
-
-.mobile-terminal-header-status {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #666;
-  flex-shrink: 0;
-}
-
-.mobile-terminal-header-status.connecting {
-  background: #f5f543;
-  animation: pulse 1.5s infinite;
-}
-
-.mobile-terminal-header-status.connected {
-  background: #0dbc79;
-}
-
-.mobile-terminal-header-status.disconnected,
-.mobile-terminal-header-status.error {
-  background: #cd3131;
-}
-
-/* Mobile Terminal Content */
-.mobile-terminal-content {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  position: relative;
-  background: #1e1e1e;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Terminal wrapper - fills content area */
-.terminal-wrapper.mobile {
   border: none;
-  border-radius: 0;
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.terminal-wrapper.mobile .terminal-container {
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-  padding: 0;
-  overflow: hidden;
-  position: relative;
-}
-
-/* xterm fills container */
-.terminal-wrapper.mobile .terminal-container .xterm {
-  width: 100%;
-  height: 100%;
-}
-
-/* Enable scrolling in mobile terminal */
-.terminal-wrapper.mobile .terminal-container .xterm-viewport {
-  overflow-y: auto !important;
-  -webkit-overflow-scrolling: touch !important;
-  height: 100% !important;
-}
-
-/* Special Keys Strip */
-.special-keys-strip {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: var(--space-1) var(--space-2);
-  background: #2d2d2d;
-  border-top: 1px solid #3e3e3e;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-  z-index: 100;
-}
-
-.special-keys-strip.hidden {
-  transform: translateY(100%);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.special-keys-strip.visible {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.special-keys-strip::-webkit-scrollbar {
-  display: none;
-}
-
-.special-key-button {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 44px;
-  height: 44px;
-  padding: 0 var(--space-2);
-  background: #3e3e3e;
-  border: 1px solid #4e4e4e;
-  border-radius: 6px;
-  color: #d4d4d4;
-  font-size: 0.75rem;
-  font-weight: 500;
   cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: background 0.15s ease, transform 0.1s ease;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
+  z-index: 100;
+  transition: transform 0.2s ease;
 }
 
-.special-key-button:active {
-  background: #4e4e4e;
+.mobile-fab:active {
   transform: scale(0.95);
 }
 
-.special-key-more {
-  background: #2472c8;
-  border-color: #2472c8;
-  color: white;
-}
-
-.special-key-more:active {
-  background: #1e5fa8;
-}
-
-.special-key-button.active-modifier {
-  background: #f5f543;
-  color: #1e1e1e;
-  border-color: #f5f543;
-  font-weight: 700;
-  box-shadow: 0 0 8px rgba(245, 245, 67, 0.5);
-}
-
-/* Special Keys Panel */
-.special-keys-panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 200;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-}
-
-.special-keys-panel {
-  background: #2d2d2d;
-  border-top: 1px solid #3e3e3e;
-  border-radius: 12px 12px 0 0;
-  padding: var(--space-4);
-  width: 100%;
-  max-height: 70vh;
-  overflow-y: auto;
-  animation: slideUp 0.2s ease;
-}
-
-.special-keys-panel-section {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-  margin-bottom: var(--space-3);
-}
-
-.special-keys-panel-section:last-child {
-  margin-bottom: 0;
-}
-
-.special-keys-panel-divider {
-  height: 1px;
-  background: #3e3e3e;
-  margin: var(--space-3) 0;
-}
-
-/* Terminal Component Updates */
-/* Note: .terminal-wrapper.mobile is defined above with position: absolute to fill grid cell */
-
-.terminal-wrapper.mobile .terminal-header {
-  display: none;
-}
-
-.terminal-header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.terminal-header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.terminal-header-button {
-  padding: var(--space-1) var(--space-2);
-  background: transparent;
-  border: 1px solid #666;
-  border-radius: 4px;
-  color: #d4d4d4;
-  cursor: pointer;
-  font-size: 0.75rem;
-  transition: background 0.2s ease;
-}
-
-.terminal-header-button:hover {
-  background: #3e3e3e;
-}
-
-.terminal-reconnect {
-  margin-left: var(--space-2);
-  padding: var(--space-1) var(--space-2);
-  background: #2472c8;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  font-size: 0.75rem;
-}
-
-.terminal-reset-confirm {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-}
-
-.terminal-reset-confirm-content {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: var(--space-4);
-  max-width: 400px;
-  text-align: center;
-}
-
-.terminal-reset-confirm-content p {
-  margin: 0 0 var(--space-4) 0;
-  color: var(--text-primary);
-}
-
-.terminal-reset-confirm-buttons {
-  display: flex;
-  gap: var(--space-2);
-  justify-content: center;
-}
-
-.terminal-reset-confirm-button {
-  padding: var(--space-2) var(--space-4);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.875rem;
-}
-
-.terminal-reset-confirm-button.cancel {
-  background: var(--bg-elevated);
-  color: var(--text-primary);
-}
-
-.terminal-reset-confirm-button.confirm {
-  background: #cd3131;
-  color: white;
-}
-
-.terminal-hidden-input {
-  position: fixed;
-  left: -9999px;
-  top: -9999px;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* Disable zoom on mobile terminal */
-@media (max-width: 767px) {
-  .mobile-terminal-wrapper {
-    touch-action: pan-y;
-    -webkit-text-size-adjust: none;
-  }
-
-  .mobile-terminal-wrapper button,
-  .mobile-terminal-wrapper .special-key-button {
-    touch-action: manipulation;
-  }
-
-  .terminal-container {
-    touch-action: pan-y;
-    padding: 0;
-  }
-}
-
-/* Animations */
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Mobile Menu Overlay */
-.mobile-menu-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 50;
-}
-
-.mobile-menu-close {
-  position: absolute;
-  top: var(--space-2);
-  right: var(--space-2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  background: transparent;
-  border: none;
-  color: var(--text);
-  cursor: pointer;
-}
-
-/* Mobile Action Sheet */
-.mobile-action-sheet-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 200;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  animation: fadeIn 0.2s ease;
-}
-
-.mobile-action-sheet {
-  background: var(--bg);
-  border-radius: 16px 16px 0 0;
-  width: 100%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow-y: auto;
-  animation: slideUp 0.3s ease;
-  padding-bottom: env(safe-area-inset-bottom, 0);
-}
-
-.mobile-action-sheet-header {
-  padding: var(--space-3) var(--space-4) var(--space-2);
-  text-align: center;
-}
-
-.mobile-action-sheet-handle {
-  width: 36px;
-  height: 4px;
-  background: var(--color-border);
-  border-radius: 2px;
-  margin: 0 auto var(--space-3);
-}
-
-.mobile-action-sheet-header h3 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.mobile-action-sheet-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  background: var(--color-border);
-  margin: 0 var(--space-2);
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.mobile-action-sheet-button {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  background: var(--bg);
-  border: none;
-  color: var(--text);
-  font-size: 1rem;
-  cursor: pointer;
-  min-height: 56px;
-  text-align: left;
-}
-
-.mobile-action-sheet-button.danger {
-  color: #cd3131;
-}
-
-.mobile-action-sheet-button:active {
-  background: var(--color-border);
-}
-
-.mobile-action-sheet-cancel {
-  display: block;
-  width: calc(100% - var(--space-4));
-  margin: var(--space-3) var(--space-2);
-  padding: var(--space-3);
-  background: var(--bg);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  color: var(--text);
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  min-height: 56px;
-}
-
-.mobile-action-sheet-cancel:active {
-  background: var(--color-border);
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideUp {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-/* AppShell mobile menu */
-@media (max-width: 767px) {
-  .shell-nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 260px;
-    background: var(--bg);
-    z-index: 100;
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    padding-top: var(--space-8);
-  }
-
-  .shell-nav.mobile-open {
-    transform: translateX(0);
+@media (min-width: 768px) {
+  .mobile-fab {
+    display: none;
   }
 }
diff --git a/openspec/changes/mobile-pages-overhaul/.openspec.yaml b/openspec/changes/mobile-pages-overhaul/.openspec.yaml
new file mode 100644
index 0000000..9e883bf
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-05-25
diff --git a/openspec/changes/mobile-pages-overhaul/design.md b/openspec/changes/mobile-pages-overhaul/design.md
new file mode 100644
index 0000000..6be1652
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/design.md
@@ -0,0 +1,75 @@
+## Context
+
+The current mobile experience for complex configuration and workspace pages is inadequate:
+
+- **Tool Workshop** (desktop split-pane): List on left, detail/edit form on right. On mobile, both panels are cramped and unusable.
+- **Config Profiles** (desktop split-pane): Same issue as Tool Workshop, plus it's completely inaccessible from mobile navigation.
+- **Repo Workspace**: Shows file tree, editor, git toolbar, and terminal all competing for space. On mobile, nothing is usable.
+
+Desktop layouts work well and should remain unchanged. This design focuses exclusively on mobile-first responsive alternatives.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Make Tool Workshop and Config Profiles fully usable on mobile
+- Add Config Profiles to mobile navigation (grouped under "Tools")
+- Redesign Repo Workspace for mobile with clear primary/secondary view hierarchy
+- Maintain desktop experience exactly as-is
+- Use consistent patterns across all mobile configuration pages
+
+**Non-Goals:**
+- No changes to desktop layouts or navigation
+- No API or database changes
+- No changes to existing components' desktop behavior
+- Not a full redesign of the web app (focused on these 3 pages)
+
+## Decisions
+
+### 1. List→Detail Navigation Pattern
+**Decision:** Use iOS Settings-style list→detail navigation for Tool Workshop and Config Profiles.  
+**Rationale:** Native mobile pattern users already understand. Works well for browsing and editing items. Allows full-screen forms without cramped split-panes.  
+**Alternative considered:** Bottom sheets for editing - rejected because complex forms need full-screen space.
+
+### 2. Bottom Sheet for Tools Group
+**Decision:** Tapping "Tools" in mobile nav opens a bottom sheet with "Tool Workshop" and "Config Profiles" options.  
+**Rationale:** Keeps bottom nav to 5 items (standard mobile pattern). Groups related functionality logically. Bottom sheet is fast and discoverable.  
+**Alternative considered:** Separate nav items - rejected because 6 items is too many for bottom nav.
+
+### 3. Read-First Detail View
+**Decision:** Detail view shows read-only information first, with an "Edit" button to enter edit mode.  
+**Rationale:** Prevents accidental edits. Allows quick scanning of configuration without entering edit mode. Matches mobile app patterns (view then edit).  
+**Alternative considered:** Direct edit mode - rejected because users often just want to view, not edit.
+
+### 4. File Tree as Primary Repo Workspace View
+**Decision:** Mobile Repo Workspace shows file tree first, with bottom tabs to switch to Editor, Git, or Terminal.  
+**Rationale:** File tree is the natural starting point for navigation. Bottom tabs provide quick access to other views without losing context.  
+**Alternative considered:** Tabbed interface at top - rejected because bottom tabs are more thumb-friendly on mobile.
+
+### 5. Full-Screen Edit Mode
+**Decision:** Edit forms open as full-screen pages with back navigation, not modals.  
+**Rationale:** Complex forms with many fields need maximum screen real estate. Back navigation is a clear mental model.  
+**Alternative considered:** Modal overlays - rejected because they feel cramped on mobile for long forms.
+
+## Risks / Trade-offs
+
+**Risk:** Users may find the list→detail pattern slower than split-pane for quick edits.  
+→ **Mitigation:** Optimize for the most common flow (view first, edit only when needed). Add quick actions (delete, duplicate) directly in list view.
+
+**Risk:** Switching between Editor, Git, and Terminal in Repo Workspace may feel disconnected.  
+→ **Mitigation:** Keep the current file/repository context across tab switches. Show repository name persistently.
+
+**Risk:** Two different UX patterns (desktop split-pane vs mobile list→detail) may confuse users who switch devices.  
+→ **Mitigation:** This is standard responsive design practice. Both patterns are well-established in their respective contexts.
+
+**Trade-off:** Mobile pages require more taps to accomplish the same tasks.  
+→ **Acceptance:** This is inherent to mobile form factors. The trade-off is acceptable for improved usability.
+
+## Migration Plan
+
+No migration needed - this is purely additive UI work. Steps:
+1. Create new mobile-specific components
+2. Update page components to render mobile layouts conditionally
+3. Update mobile navigation
+4. Test on mobile devices
+
+Rollback: Remove conditional mobile rendering, revert to desktop-only layouts.
diff --git a/openspec/changes/mobile-pages-overhaul/proposal.md b/openspec/changes/mobile-pages-overhaul/proposal.md
new file mode 100644
index 0000000..363ab75
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/proposal.md
@@ -0,0 +1,28 @@
+## Why
+
+The current mobile experience for complex pages (Tool Workshop, Config Profiles, Repo Workspace) is broken or unusable. Tool Workshop and Config Profiles use desktop split-pane layouts that don't work on small screens, and Config Profiles isn't even accessible from mobile navigation. The Repo Workspace shows a file tree and editor side-by-side, making both unusable on phones. We need mobile-first designs for these critical configuration and workspace pages.
+
+## What Changes
+
+- **Mobile Navigation**: Group "Tool Workshop" and "Config Profiles" under a single "Tools" bottom nav item that opens a bottom sheet with sub-options
+- **Mobile Tool Workshop**: Replace split-pane with list→detail navigation pattern (iOS Settings style)
+- **Mobile Config Profiles**: Replace split-pane with list→detail navigation pattern with read-first detail view
+- **Mobile Repo Workspace**: File tree as primary view with bottom tabs for Editor, Git, and Terminal
+- **Desktop**: No changes to existing layouts or navigation
+
+## Capabilities
+
+### New Capabilities
+- `mobile-tools-navigation`: Bottom sheet navigation grouping Tool Workshop and Config Profiles
+- `mobile-list-detail`: List→detail navigation pattern for complex configuration pages
+- `mobile-repo-workspace`: File-tree-primary workspace layout with tabbed secondary views
+
+### Modified Capabilities
+- `mobile-navigation`: Add "Tools" group with bottom sheet sub-navigation
+
+## Impact
+
+- Frontend: New mobile-specific components and page layouts
+- Navigation: Mobile bottom nav structure changes
+- No API changes required
+- No database changes required
diff --git a/openspec/changes/mobile-pages-overhaul/specs/mobile-list-detail/spec.md b/openspec/changes/mobile-pages-overhaul/specs/mobile-list-detail/spec.md
new file mode 100644
index 0000000..4773b46
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/specs/mobile-list-detail/spec.md
@@ -0,0 +1,64 @@
+## ADDED Requirements
+
+### Requirement: Mobile list view for configuration items
+The mobile view SHALL display configuration items (tool types, config profiles) as a scrollable list of cards.
+
+#### Scenario: Viewing tool types list
+- **WHEN** user navigates to Tool Workshop on mobile
+- **THEN** a list of tool type cards is displayed, each showing name and brief description
+
+#### Scenario: Viewing config profiles list
+- **WHEN** user navigates to Config Profiles on mobile
+- **THEN** a list of profile cards is displayed, each showing name and description
+
+#### Scenario: Empty state
+- **WHEN** the list has no items
+- **THEN** an empty state message is shown with a "Create" button
+
+### Requirement: Item detail view
+Tapping a list item SHALL navigate to a detail view showing all configuration fields in read-only format.
+
+#### Scenario: Viewing tool type details
+- **WHEN** user taps a tool type in the list
+- **THEN** a detail page opens showing all tool type fields (name, description, port, template, etc.)
+
+#### Scenario: Viewing config profile details
+- **WHEN** user taps a config profile in the list
+- **THEN** a detail page opens showing all profile fields (env vars, mounts, includes, etc.)
+
+### Requirement: Detail-to-edit navigation
+The detail view SHALL provide an "Edit" button that navigates to a full-screen edit form.
+
+#### Scenario: Entering edit mode
+- **WHEN** user taps "Edit" on the detail view
+- **THEN** a full-screen edit form opens with all fields editable
+
+#### Scenario: Saving changes
+- **WHEN** user modifies fields and taps "Save"
+- **THEN** changes are saved and the view returns to the detail page with updated data
+
+#### Scenario: Canceling edit
+- **WHEN** user taps "Cancel" or back button
+- **THEN** changes are discarded and the view returns to the detail page
+
+### Requirement: List item actions
+Each list item SHALL support swipe-to-delete and a quick actions menu.
+
+#### Scenario: Deleting item
+- **WHEN** user swipes left on a list item and taps "Delete"
+- **THEN** a confirmation dialog appears, and upon confirmation the item is deleted
+
+#### Scenario: Quick actions
+- **WHEN** user taps a "More" button on a list item
+- **THEN** an action sheet appears with options: Edit, Duplicate, Delete
+
+### Requirement: Create new item
+A floating action button (FAB) on the list view SHALL open a creation form.
+
+#### Scenario: Creating new item
+- **WHEN** user taps the FAB (+) on the list view
+- **THEN** a full-screen creation form opens
+
+#### Scenario: Saving new item
+- **WHEN** user fills the form and taps "Save"
+- **THEN** the item is created and the view returns to the list with the new item visible
diff --git a/openspec/changes/mobile-pages-overhaul/specs/mobile-navigation/spec.md b/openspec/changes/mobile-pages-overhaul/specs/mobile-navigation/spec.md
new file mode 100644
index 0000000..19a5f3c
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/specs/mobile-navigation/spec.md
@@ -0,0 +1,16 @@
+## ADDED Requirements
+
+### Requirement: Bottom navigation grouping
+The mobile bottom navigation SHALL support grouping related pages under a single navigation item that opens a sub-menu.
+
+#### Scenario: Tools group navigation
+- **WHEN** user views the mobile bottom navigation
+- **THEN** a "Tools" item is visible that groups Tool Workshop and Config Profiles
+
+#### Scenario: Opening grouped menu
+- **WHEN** user taps a grouped navigation item
+- **THEN** a bottom sheet or menu opens showing the grouped pages
+
+#### Scenario: Active state for grouped items
+- **WHEN** user is on a page within a group
+- **THEN** the group's navigation item shows as active
diff --git a/openspec/changes/mobile-pages-overhaul/specs/mobile-repo-workspace/spec.md b/openspec/changes/mobile-pages-overhaul/specs/mobile-repo-workspace/spec.md
new file mode 100644
index 0000000..468158c
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/specs/mobile-repo-workspace/spec.md
@@ -0,0 +1,83 @@
+## ADDED Requirements
+
+### Requirement: File tree as primary view
+The mobile Repo Workspace SHALL display the file tree as the primary view with repository and branch selectors at the top.
+
+#### Scenario: Viewing file tree
+- **WHEN** user navigates to a project's workspace on mobile
+- **THEN** a file tree is displayed showing folders and files in the repository
+
+#### Scenario: Repository selection
+- **WHEN** user taps the repository selector dropdown
+- **THEN** a list of available repositories is shown for selection
+
+#### Scenario: Branch selection
+- **WHEN** user taps the branch selector dropdown
+- **THEN** a list of branches is shown for selection
+
+### Requirement: File tree interactions
+The file tree SHALL support folder expansion, file opening, and git status indicators.
+
+#### Scenario: Expanding folder
+- **WHEN** user taps a folder in the tree
+- **THEN** the folder expands to show its contents, or collapses if already expanded
+
+#### Scenario: Opening file
+- **WHEN** user taps a file in the tree
+- **THEN** the file opens in the editor view
+
+#### Scenario: Git status indicators
+- **WHEN** files have git status (modified, staged, untracked)
+- **THEN** visual indicators (colors/icons) are shown next to affected files
+
+### Requirement: Bottom tab navigation
+The mobile workspace SHALL provide bottom tabs for switching between File Tree, Editor, Git, and Terminal views.
+
+#### Scenario: Switching to Editor tab
+- **WHEN** user taps the "Editor" tab
+- **THEN** the editor view is shown with the currently selected file (or empty state)
+
+#### Scenario: Switching to Git tab
+- **WHEN** user taps the "Git" tab
+- **THEN** the git view is shown with status, commit form, and file lists
+
+#### Scenario: Switching to Terminal tab
+- **WHEN** user taps the "Terminal" tab
+- **THEN** the terminal view is shown for the current repository
+
+### Requirement: Editor view
+The editor view SHALL provide a full-screen code editing experience with syntax highlighting.
+
+#### Scenario: Editing file
+- **WHEN** user opens a file and modifies it
+- **THEN** syntax highlighting is applied and changes can be saved
+
+#### Scenario: Editor toolbar
+- **WHEN** viewing the editor
+- **THEN** a toolbar shows file name, save button, undo/redo buttons
+
+### Requirement: Git view
+The git view SHALL show repository status and allow committing changes.
+
+#### Scenario: Viewing git status
+- **WHEN** user opens the Git tab
+- **THEN** modified, staged, and untracked files are listed separately
+
+#### Scenario: Staging files
+- **WHEN** user toggles a file's checkbox
+- **THEN** the file is staged or unstaged accordingly
+
+#### Scenario: Committing changes
+- **WHEN** user enters a commit message and taps "Commit"
+- **THEN** staged files are committed with the provided message
+
+### Requirement: Terminal view
+The terminal view SHALL provide a full-screen terminal for the repository's tool instance.
+
+#### Scenario: Terminal for repository
+- **WHEN** user opens the Terminal tab
+- **THEN** a terminal is shown connected to the repository's active tool instance
+
+#### Scenario: No active instance
+- **WHEN** no tool instance is running for the repository
+- **THEN** a message is shown with a button to start a new session
diff --git a/openspec/changes/mobile-pages-overhaul/specs/mobile-tools-navigation/spec.md b/openspec/changes/mobile-pages-overhaul/specs/mobile-tools-navigation/spec.md
new file mode 100644
index 0000000..69c4949
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/specs/mobile-tools-navigation/spec.md
@@ -0,0 +1,27 @@
+## ADDED Requirements
+
+### Requirement: Tools bottom sheet navigation
+The mobile bottom navigation SHALL provide access to both Tool Workshop and Config Profiles through a grouped "Tools" entry.
+
+#### Scenario: Opening Tools menu
+- **WHEN** user taps the "Tools" item in the mobile bottom navigation
+- **THEN** a bottom sheet slides up showing "Tool Workshop" and "Config Profiles" options
+
+#### Scenario: Navigating to Tool Workshop
+- **WHEN** user taps "Tool Workshop" in the bottom sheet
+- **THEN** the bottom sheet closes and the app navigates to the Tool Workshop page
+
+#### Scenario: Navigating to Config Profiles
+- **WHEN** user taps "Config Profiles" in the bottom sheet
+- **THEN** the bottom sheet closes and the app navigates to the Config Profiles page
+
+#### Scenario: Closing bottom sheet without selection
+- **WHEN** user taps outside the bottom sheet or swipes down
+- **THEN** the bottom sheet closes without navigation
+
+### Requirement: Active state indication
+The "Tools" bottom nav item SHALL indicate when either Tool Workshop or Config Profiles is the active page.
+
+#### Scenario: Active page indication
+- **WHEN** user is viewing Tool Workshop or Config Profiles
+- **THEN** the "Tools" item in the bottom nav appears active/highlighted
diff --git a/openspec/changes/mobile-pages-overhaul/tasks.md b/openspec/changes/mobile-pages-overhaul/tasks.md
new file mode 100644
index 0000000..e184e80
--- /dev/null
+++ b/openspec/changes/mobile-pages-overhaul/tasks.md
@@ -0,0 +1,49 @@
+## 1. Mobile Navigation Updates
+
+- [x] 1.1 Add "Tools" grouped item to MobileNav component with bottom sheet
+- [x] 1.2 Create ToolsBottomSheet component for Tool Workshop / Config Profiles selection
+- [x] 1.3 Update AppShell desktop nav to keep Tool Workshop and Config Profiles separate
+- [x] 1.4 Add active state logic for grouped nav items
+
+## 2. Mobile List-Detail Components
+
+- [x] 2.1 Create MobileListView component for displaying item cards
+- [x] 2.2 Create MobileDetailView component for read-only detail display
+- [x] 2.3 Create MobileEditView component for full-screen editing
+- [x] 2.4 Add swipe-to-delete and action sheet to MobileListView
+- [x] 2.5 Create FAB (Floating Action Button) component for creating items
+
+## 3. Mobile Tool Workshop
+
+- [ ] 3.1 Add mobile list view for tool types
+- [ ] 3.2 Add mobile detail view for tool types (read-only)
+- [ ] 3.3 Add mobile edit view for tool types
+- [ ] 3.4 Add mobile create view for tool types
+- [ ] 3.5 Implement list→detail navigation in ToolWorkshopPage
+
+## 4. Mobile Config Profiles
+
+- [ ] 4.1 Add mobile list view for config profiles
+- [ ] 4.2 Add mobile detail view for config profiles (read-only)
+- [ ] 4.3 Add mobile edit view for config profiles
+- [ ] 4.4 Add mobile create view for config profiles
+- [ ] 4.5 Implement list→detail navigation in ConfigProfilesPage
+
+## 5. Mobile Repo Workspace
+
+- [ ] 5.1 Create MobileFileTree component with folder expansion
+- [ ] 5.2 Create MobileEditorView component for full-screen editing
+- [ ] 5.3 Create MobileGitView component for git operations
+- [ ] 5.4 Create MobileTerminalView component for terminal access
+- [ ] 5.5 Add bottom tab navigation to RepoWorkspace (Tree, Editor, Git, Terminal)
+- [ ] 5.6 Implement repository and branch selectors for mobile
+
+## 6. Testing & Polish
+
+- [ ] 6.1 Test mobile navigation on iPhone SE (320px)
+- [ ] 6.2 Test mobile navigation on iPhone standard (375px)
+- [ ] 6.3 Verify desktop layouts remain unchanged
+- [ ] 6.4 Run npm run typecheck
+- [ ] 6.5 Run npm run lint
+- [ ] 6.6 Run npm run build
+- [ ] 6.7 Test swipe gestures and touch targets