From d2f1a76cd2e421904918aa23f48ad088cecef072 Mon Sep 17 00:00:00 2001
From: mHost Developer <mhost@dev.local>
Date: Tue, 29 Sep 2026 13:35:11 +0800
Subject: [PATCH] chore(frontend): remove 6 unmounted components + 3 orphaned
 CSS modules
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deleting -1309 lines of code that no route or component can reach.

#230 item 7 (P-F6, ApplyStatus) already proposed this. Items 4 and the
underlying finding are broader than that, and both need reclassifying:

- Item 4 (P-F7) claimed ProfileEdit "silently discards unsaved
  name/description edits" and asked for it to outrank the rest of the
  perf batch. ProfileEdit has had zero importers since 1bfe932 (the #55
  sidebar/drawer redesign) — no route, no import, no test, no dynamic
  import. The live editing components are not affected: HostsProfileView
  already seeds draft rules on `[profile?.id]` (not `[profile]`) and
  seeds draftInfo on-demand in handleEditInfo rather than in an effect,
  and DnsProfileView has no useEffect at all. There was no user-facing
  data loss to fix.

The underlying cause is an audit-process gap, not a code defect: both
the #90 review and the 2026-09-28 review scanned files rather than
reachability, so each produced findings against code that never runs.
Deleting the code removes the false positives rather than patching them.

Removed:
  pages/ProfileEdit.tsx          orphaned by 1bfe932 (#55 redesign)
  components/BasicInfoForm.tsx   only importer was ProfileEdit
  components/RuleList.tsx        existed only to import ProfileEdit's CSS
  components/ProfileCard.tsx     superseded by DrawerProfileCard
  components/CreateProfileForm.tsx
  components/ApplyStatus.tsx     unmounted; see #230 item 7
  __tests__/ApplyStatus.test.tsx 283 lines covering a never-rendered
                                 component, which is why the dead
                                 component kept looking maintained

CSS modules orphaned by the above:
  pages/ProfileEdit.module.css   only ProfileEdit + RuleList
  pages/ProfileList.module.css   only ProfileCard + CreateProfileForm
  components/ApplyStatus.module.css

Not removed: the global `.toggle` / `.toggle-slider` classes. The comment
credited ProfileCard, but AdBlock is the live consumer (pages/AdBlock.tsx
:326, :597, :790), so only the comment is corrected.

Verification: pnpm test 353 passed / 26 files, pnpm build (tsc + vite)
clean. No Rust touched.
---
 src/components/ApplyStatus.module.css         | 122 --------
 src/components/ApplyStatus.tsx                | 141 ---------
 src/components/BasicInfoForm.tsx              |  58 ----
 src/components/CreateProfileForm.tsx          |  53 ----
 src/components/ProfileCard.tsx                | 120 --------
 src/components/RuleList.tsx                   |  56 ----
 src/components/__tests__/ApplyStatus.test.tsx | 283 ------------------
 src/pages/ProfileEdit.module.css              | 103 -------
 src/pages/ProfileEdit.tsx                     | 153 ----------
 src/pages/ProfileList.module.css              | 218 --------------
 src/stores/profiles/actions.ts                |   2 +-
 src/styles/global.css                         |   2 +-
 12 files changed, 2 insertions(+), 1309 deletions(-)
 delete mode 100644 src/components/ApplyStatus.module.css
 delete mode 100644 src/components/ApplyStatus.tsx
 delete mode 100644 src/components/BasicInfoForm.tsx
 delete mode 100644 src/components/CreateProfileForm.tsx
 delete mode 100644 src/components/ProfileCard.tsx
 delete mode 100644 src/components/RuleList.tsx
 delete mode 100644 src/components/__tests__/ApplyStatus.test.tsx
 delete mode 100644 src/pages/ProfileEdit.module.css
 delete mode 100644 src/pages/ProfileEdit.tsx
 delete mode 100644 src/pages/ProfileList.module.css

diff --git a/src/components/ApplyStatus.module.css b/src/components/ApplyStatus.module.css
deleted file mode 100644
index 42bee85..0000000
--- a/src/components/ApplyStatus.module.css
+++ /dev/null
@@ -1,122 +0,0 @@
-.applyStatusSection {
-  margin-bottom: 16px;
-}
-
-.profileName {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-primary);
-  margin-bottom: 8px;
-}
-
-.noProfile {
-  color: var(--color-text-muted);
-  font-size: 14px;
-}
-
-.rulesList {
-  margin-bottom: 16px;
-}
-
-.ruleItem {
-  display: flex;
-  gap: 12px;
-  padding: 6px 0;
-  border-bottom: 1px solid var(--color-border);
-  font-size: 13px;
-}
-
-.ruleItem:last-child {
-  border-bottom: none;
-}
-
-.ruleIp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-weight: 500;
-  color: var(--color-text);
-  min-width: 140px;
-}
-
-.ruleDomains {
-  color: var(--color-text-secondary);
-}
-
-/* ---- Managed Block ---- */
-
-.managedBlockContent {
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 12px;
-  font-size: 12px;
-  line-height: 1.6;
-  overflow: auto;
-  max-height: 200px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-.managedBlockEmpty {
-  color: var(--color-text-muted);
-  font-size: 13px;
-}
-
-/* ---- Last Applied ---- */
-
-.lastAppliedRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  margin-bottom: 12px;
-}
-
-.lastAppliedLabel {
-  font-weight: 500;
-}
-
-/* ---- Pending Changes ---- */
-
-.pendingChanges {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: var(--color-warning-bg);
-  border: 1px solid var(--color-warning-border);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-  color: var(--color-warning);
-  font-weight: 500;
-}
-
-/* ---- Conflicts ---- */
-
-.conflictWarning {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: var(--color-error-bg);
-  border: 1px solid var(--color-error-border);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-  color: var(--color-danger);
-  margin-bottom: 12px;
-}
-
-.conflictDomain {
-  font-weight: 600;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-/* ---- Loading ---- */
-
-.loading {
-  padding: 20px;
-  text-align: center;
-  color: var(--color-text-muted);
-  font-size: 13px;
-}
diff --git a/src/components/ApplyStatus.tsx b/src/components/ApplyStatus.tsx
deleted file mode 100644
index 0d66723..0000000
--- a/src/components/ApplyStatus.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { useEffect, useState } from "react";
-import { useAtomValue } from "jotai";
-import { enabledProfileAtom } from "../stores/profiles";
-import {
-  getManagedBlockContent,
-  getLastApplied,
-  generateApplyPlan,
-} from "../lib/tauri";
-import type { ApplyPlan } from "../types";
-import styles from "./ApplyStatus.module.css";
-
-function ApplyStatus() {
-  const enabledProfile = useAtomValue(enabledProfileAtom);
-  const [managedContent, setManagedContent] = useState<string | null>(null);
-  const [lastApplied, setLastApplied] = useState<string | null>(null);
-  const [applyPlan, setApplyPlan] = useState<ApplyPlan | null>(null);
-  const [planFailed, setPlanFailed] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function fetchData() {
-      setLoading(true);
-      try {
-        const [content, applied, plan] = await Promise.all([
-          getManagedBlockContent(),
-          getLastApplied(),
-          generateApplyPlan().catch(() => null),
-        ]);
-
-        if (cancelled) return;
-
-        setManagedContent(content);
-        setLastApplied(applied);
-
-        if (plan) {
-          setApplyPlan(plan);
-          setPlanFailed(false);
-        } else {
-          setPlanFailed(true);
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      }
-    }
-
-    fetchData();
-    return () => {
-      cancelled = true;
-    };
-  }, [enabledProfile]);
-
-  if (loading) {
-    return <div className={styles.loading}>Loading status...</div>;
-  }
-
-  const hasPendingChanges =
-    applyPlan !== null &&
-    (applyPlan.diff.added.length > 0 || applyPlan.diff.removed.length > 0);
-
-  return (
-    <div className={styles.applyStatusSection}>
-      {/* Active Profile */}
-      <div className="card">
-        <h3 className="card-title">Current Active Profile</h3>
-        {enabledProfile ? (
-          <>
-            <div className={styles.profileName}>{enabledProfile.name}</div>
-            {enabledProfile.rules.length > 0 && (
-              <div className={styles.rulesList}>
-                {enabledProfile.rules
-                  .filter((r) => r.enabled && r.ip !== null)
-                  .map((rule) => (
-                    <div key={rule.id} className={styles.ruleItem}>
-                      <span className={styles.ruleIp}>{rule.ip ?? ""}</span>
-                      <span className={styles.ruleDomains}>
-                        {rule.domains.join(", ")}
-                      </span>
-                    </div>
-                  ))}
-              </div>
-            )}
-          </>
-        ) : (
-          <div className={styles.noProfile}>No active profile</div>
-        )}
-      </div>
-
-      {/* Managed Block Content */}
-      <div className="card">
-        <h3 className="card-title">Managed Block in Hosts</h3>
-        {managedContent ? (
-          <pre className={styles.managedBlockContent}>{managedContent}</pre>
-        ) : (
-          <div className={styles.managedBlockEmpty}>
-            No managed block found in system hosts.
-          </div>
-        )}
-      </div>
-
-      {/* Last Applied */}
-      <div className="card">
-        <h3 className="card-title">Apply History</h3>
-        <div className={styles.lastAppliedRow}>
-          <span className={styles.lastAppliedLabel}>Last Applied:</span>
-          <span>
-            {lastApplied
-              ? new Date(lastApplied).toLocaleString()
-              : "Never"}
-          </span>
-        </div>
-
-        {/* Pending Changes */}
-        {!planFailed && hasPendingChanges && (
-          <div className={styles.pendingChanges}>
-            Pending Changes: {applyPlan.diff.added.length} added,{" "}
-            {applyPlan.diff.removed.length} removed
-          </div>
-        )}
-
-        {/* Conflicts */}
-        {applyPlan &&
-          applyPlan.conflicts.length > 0 &&
-          applyPlan.conflicts.map((conflict) => (
-            <div key={conflict.domain} className={styles.conflictWarning}>
-              Conflict on{" "}
-              <span className={styles.conflictDomain}>
-                {conflict.domain}
-              </span>
-              : {conflict.rules.length} profiles claim this domain
-            </div>
-          ))}
-      </div>
-    </div>
-  );
-}
-
-export default ApplyStatus;
diff --git a/src/components/BasicInfoForm.tsx b/src/components/BasicInfoForm.tsx
deleted file mode 100644
index 626f132..0000000
--- a/src/components/BasicInfoForm.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Profile } from "../types";
-
-interface BasicInfoFormProps {
-  draft: Profile;
-  onChange: (field: keyof Profile, value: unknown) => void;
-}
-
-function BasicInfoForm({ draft, onChange }: BasicInfoFormProps) {
-  const handleTagsChange = (value: string) => {
-    const tags = value
-      .split(",")
-      .map((t) => t.trim())
-      .filter(Boolean);
-    onChange("tags", tags);
-  };
-
-  return (
-    <div className="card">
-      <h3 className="card-title">Basic Info</h3>
-      <div className="form-group">
-        <label className="form-label">Name</label>
-        <input
-          className="input"
-          value={draft.name}
-          onChange={(e) => onChange("name", e.target.value)}
-        />
-      </div>
-      <div className="form-group">
-        <label className="form-label">Description</label>
-        <textarea
-          className="input textarea"
-          rows={3}
-          value={draft.description ?? ""}
-          onChange={(e) =>
-            onChange("description", e.target.value || null)
-          }
-        />
-      </div>
-      <div className="form-group">
-        <label className="form-label">Tags (comma separated)</label>
-        <input
-          className="input"
-          value={draft.tags.join(", ")}
-          onChange={(e) => handleTagsChange(e.target.value)}
-        />
-      </div>
-      <div className="form-group">
-        <label className="form-label">Status</label>
-        <div className="form-static">
-          {draft.enabled ? "Enabled" : "Disabled"}
-          {draft.protected && " · Protected"}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default BasicInfoForm;
diff --git a/src/components/CreateProfileForm.tsx b/src/components/CreateProfileForm.tsx
deleted file mode 100644
index 7c354fd..0000000
--- a/src/components/CreateProfileForm.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useState } from "react";
-import styles from "../pages/ProfileList.module.css";
-
-interface CreateProfileFormProps {
-  isLoading: boolean;
-  onCreate: (name: string) => void;
-  onCancel: () => void;
-}
-
-function CreateProfileForm({ isLoading, onCreate, onCancel }: CreateProfileFormProps) {
-  const [newName, setNewName] = useState("");
-
-  const handleCreate = () => {
-    const name = newName.trim();
-    if (!name) return;
-    onCreate(name);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") handleCreate();
-  };
-
-  return (
-    <div className={`card ${styles.createCard}`}>
-      <h3>Create Profile</h3>
-      <div className="form-row">
-        <input
-          className="input"
-          placeholder="Profile name"
-          value={newName}
-          onChange={(e) => setNewName(e.target.value)}
-          onKeyDown={handleKeyDown}
-          autoFocus
-        />
-        <button
-          className="btn btn-primary"
-          onClick={handleCreate}
-          disabled={!newName.trim() || isLoading}
-        >
-          Create
-        </button>
-        <button
-          className="btn btn-ghost"
-          onClick={onCancel}
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default CreateProfileForm;
diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
deleted file mode 100644
index 7d9e498..0000000
--- a/src/components/ProfileCard.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { memo, useMemo } from "react";
-import type { Profile, ExportFormat } from "../types";
-import { countRealRules } from "../lib/rules";
-import styles from "../pages/ProfileList.module.css";
-
-interface ProfileCardProps {
-  profile: Profile;
-  isLoading: boolean;
-  onEdit: (id: string) => void;
-  onToggle: (id: string) => void;
-  onDelete: (id: string) => void;
-  onExport?: (id: string, format: ExportFormat) => void;
-  onDuplicate?: (id: string) => void;
-}
-
-/**
- * Profile 卡片 —— 展示单个 profile 的基本信息 + 操作按钮。
- *
- * **fix (P-F2, issue #90)**:
- *   - `React.memo` 包裹：profile / handler 引用未变时跳过重渲染。
- *     父组件 ProfileList 在 apply 状态变化时不应让所有卡片重渲染。
- *   - `useMemo` 包 `countRealRules(profile.rules)`：每个卡片的 rule
- *     计数只在该 profile 的 rules 变化时重算（不再每次渲染都跑 O(N)）。
- *   - 内部 `onClick` 用箭头函数不可避免（依赖 `profile.id`），但因 React.memo
- *     + 父组件 useCallback'd handlers 后整体开销可控。
- */
-function ProfileCard({
-  profile,
-  isLoading,
-  onEdit,
-  onToggle,
-  onDelete,
-  onExport,
-  onDuplicate,
-}: ProfileCardProps) {
-  const ruleCount = useMemo(() => countRealRules(profile.rules), [profile.rules]);
-
-  return (
-    <div
-      className={`${styles.profileCard} ${profile.enabled ? styles.profileCardEnabled : ""}`}
-    >
-      <div className={styles.profileCardMain}>
-        <div className={styles.profileCardHeader}>
-          <h3
-            className={styles.profileName}
-            onClick={() => onEdit(profile.id)}
-          >
-            {profile.name}
-          </h3>
-          <div className={styles.profileCardTags}>
-            {profile.tags.map((tag) => (
-              <span key={tag} className="tag">
-                {tag}
-              </span>
-            ))}
-          </div>
-        </div>
-        {profile.description && (
-          <p className={styles.profileDesc}>{profile.description}</p>
-        )}
-        <div className={styles.profileCardMeta}>
-          <span>{ruleCount} rules</span>
-          <span className={styles.metaSep}>·</span>
-          <span>{profile.enabled ? "Enabled" : "Disabled"}</span>
-          {profile.protected && (
-            <>
-              <span className={styles.metaSep}>·</span>
-              <span className={styles.protectedBadge}>Protected</span>
-            </>
-          )}
-        </div>
-      </div>
-
-      <div className={styles.profileCardActions}>
-        <label className="toggle">
-          <input
-            type="checkbox"
-            checked={profile.enabled}
-            onChange={() => onToggle(profile.id)}
-            disabled={isLoading}
-          />
-          <span className="toggle-slider" />
-        </label>
-        <button
-          className="btn btn-ghost btn-sm"
-          onClick={() => onEdit(profile.id)}
-        >
-          Edit
-        </button>
-        {onExport && (
-          <button
-            className="btn btn-ghost btn-sm"
-            onClick={() => onExport(profile.id, "hosts")}
-            disabled={isLoading}
-          >
-            Export
-          </button>
-        )}
-        {onDuplicate && (
-          <button
-            className="btn btn-ghost btn-sm"
-            onClick={() => onDuplicate(profile.id)}
-            disabled={isLoading}
-          >
-            Duplicate
-          </button>
-        )}
-        <button
-          className="btn btn-danger btn-sm"
-          onClick={() => onDelete(profile.id)}
-          disabled={profile.protected || isLoading}
-        >
-          Delete
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default memo(ProfileCard);
\ No newline at end of file
diff --git a/src/components/RuleList.tsx b/src/components/RuleList.tsx
deleted file mode 100644
index 510166e..0000000
--- a/src/components/RuleList.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { HostRule } from "../types";
-import { isCommentOnly } from "../lib/rules";
-import styles from "../pages/ProfileEdit.module.css";
-
-interface RuleListProps {
-  rules: HostRule[];
-}
-
-function RuleList({ rules }: RuleListProps) {
-  if (rules.length === 0) {
-    return (
-      <div className="empty-state">
-        <p>No rules in this profile.</p>
-        <p className="empty-hint">
-          Rule editing will be available in a later phase.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.ruleList}>
-      {rules.map((rule) => {
-        // Comment-only rule: render as a muted comment line
-        if (isCommentOnly(rule)) {
-          return (
-            <div key={rule.id} className={`${styles.ruleItem} ${styles.ruleItemComment}`}>
-              <div className={styles.ruleComment}>{rule.comment}</div>
-            </div>
-          );
-        }
-        return (
-          <div
-            key={rule.id}
-            className={`${styles.ruleItem} ${rule.enabled ? "" : styles.ruleItemDisabled}`}
-          >
-            <div className={styles.ruleHeader}>
-              <span className={styles.ruleIp}>{rule.ip}</span>
-              <span className={styles.ruleStatus}>
-                {rule.enabled ? "On" : "Off"}
-              </span>
-            </div>
-            <div className={styles.ruleDomains}>
-              {rule.domains.join(", ")}
-            </div>
-            {rule.comment && (
-              <div className={styles.ruleComment}>{rule.comment}</div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default RuleList;
diff --git a/src/components/__tests__/ApplyStatus.test.tsx b/src/components/__tests__/ApplyStatus.test.tsx
deleted file mode 100644
index d1e735a..0000000
--- a/src/components/__tests__/ApplyStatus.test.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
-import { Provider as JotaiProvider } from "jotai";
-import { getDefaultStore } from "jotai";
-import type { Profile, ApplyPlan } from "../../types";
-import { profilesAtom } from "../../stores/profiles";
-
-// Mock tauri invoke
-vi.mock("@tauri-apps/api/core", () => ({
-  invoke: vi.fn(),
-}));
-
-import { invoke } from "@tauri-apps/api/core";
-const mockInvoke = vi.mocked(invoke);
-
-// Import component after mock setup
-import ApplyStatus from "../../components/ApplyStatus";
-
-function makeProfile(overrides: Partial<Profile> = {}): Profile {
-  return {
-    id: "p1",
-    name: "dev-profile",
-    description: "Dev hosts",
-    enabled: true,
-    protected: false,
-    tags: ["dev"],
-    rules: [
-      {
-        id: "r1",
-        ip: "127.0.0.1",
-        domains: ["localhost", "app.local"],
-        enabled: true,
-        comment: null,
-        source: { type: "Manual" },
-      },
-    ],
-    mode: "hosts",
-    created_at: "2024-01-01T00:00:00Z",
-    updated_at: "2024-01-01T00:00:00Z",
-    ...overrides,
-  };
-}
-
-function makePlan(overrides: Partial<ApplyPlan> = {}): ApplyPlan {
-  return {
-    rules: [
-      {
-        ip: "127.0.0.1",
-        domain: "localhost",
-        source_profile_id: "p1",
-        source_profile_name: "dev-profile",
-      },
-    ],
-    conflicts: [],
-    diff: {
-      added: ["127.0.0.1 app.local"],
-      removed: [],
-      unchanged: ["127.0.0.1 localhost"],
-    },
-    backup_required: true,
-    ...overrides,
-  };
-}
-
-function Wrapper({ children }: { children: React.ReactNode }) {
-  return <JotaiProvider store={getDefaultStore()}>{children}</JotaiProvider>;
-}
-
-describe("ApplyStatus", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    const store = getDefaultStore();
-    store.set(profilesAtom, []);
-  });
-
-  it("shows active profile name and rules", async () => {
-    const profile = makeProfile();
-    const store = getDefaultStore();
-    store.set(profilesAtom, [profile]);
-
-    mockInvoke.mockImplementation(async (cmd: string) => {
-      if (cmd === "get_managed_block_content") return "127.0.0.1 localhost\n127.0.0.1 app.local\n";
-      if (cmd === "get_last_applied") return "2024-06-15T10:30:00Z";
-      if (cmd === "generate_apply_plan") return makePlan();
-      return null;
-    });
-
-    render(
-      <Wrapper>
-        <ApplyStatus />
-      </Wrapper>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText("dev-profile")).toBeInTheDocument();
-    });
-
-    // Rules should be shown
-    await waitFor(() => {
-      expect(screen.getByText("127.0.0.1")).toBeInTheDocument();
-      expect(screen.getByText("localhost, app.local")).toBeInTheDocument();
-    });
-  });
-
-  it("shows managed block content", async () => {
-    const profile = makeProfile();
-    const store = getDefaultStore();
-    store.set(profilesAtom, [profile]);
-
-    mockInvoke.mockImplementation(async (cmd: string) => {
-      if (cmd === "get_managed_block_content") return "127.0.0.1 localhost\n127.0.0.1 app.local\n";
-      if (cmd === "get_last_applied") return "2024-06-15T10:30:00Z";
-      if (cmd === "generate_apply_plan") return makePlan();
-      return null;
-    });
-
-    render(
-      <Wrapper>
-        <ApplyStatus />
-      </Wrapper>,
-    );
-
-    await waitFor(() => {
-      const pre = screen.getByText("Managed Block in Hosts").closest(".card")?.querySelector("pre");
-      expect(pre).toBeTruthy();
-      expect(pre!.textContent).toContain("127.0.0.1 localhost");
-      expect(pre!.textContent).toContain("127.0.0.1 app.local");
-    });
-  });
-
-  it('shows "no active profile" when none enabled', async () => {
-    const profile = makeProfile({ enabled: false });
-    const store = getDefaultStore();
-    store.set(profilesAtom, [profile]);
-
-    mockInvoke.mockImplementation(async (cmd: string) => {
-      if (cmd === "get_managed_block_content") return null;
-      if (cmd === "get_last_applied") return null;
-      if (cmd === "generate_apply_plan") return makePlan();
-      return null;
-    });
-
-    render(
-      <Wrapper>
-        <ApplyStatus />
-      </Wrapper>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText("No active profile")).toBeInTheDocument();
-    });
-  });
-
-  it("shows conflict warnings", async () => {
-    const profile = makeProfile();
-    const store = getDefaultStore();
-    store.set(profilesAtom, [profile]);
-
-    const planWithConflicts = makePlan({
-      conflicts: [
-        {
-          domain: "example.com",
-          rules: [
-            {
-              ip: "127.0.0.1",
-              domain: "example.com",
-              source_profile_id: "p1",
-              source_profile_name: "dev-profile",
-            },
-            {
-              ip: "192.168.1.1",
-              domain: "example.com",
-              source_profile_id: "p2",
-              source_profile_name: "prod-profile",
-            },
-          ],
-        },
-      ],
-    });
-
-    mockInvoke.mockImplementation(async (cmd: string) => {
-      if (cmd === "get_managed_block_content") return "127.0.0.1 localhost\n";
-      if (cmd === "get_last_applied") return "2024-06-15T10:30:00Z";
-      if (cmd === "generate_apply_plan") return planWithConflicts;
-      return null;
-    });
-
-    render(
-      <Wrapper>
-        <ApplyStatus />
-      </Wrapper>,
-    );
-
-    await waitFor(() => {
-      // Conflict text is split across elements, so check for the domain name
-      // which appears in a dedicated span
-      const allText = screen.getByText("Apply History").closest(".card")!.textContent!;
-      expect(allText).toContain("Conflict");
-      expect(allText).toContain("example.com");
-    });
-  });
-
-  it('shows "pending changes" indicator', async () => {
-    const profile = makeProfile();
-    const store = getDefaultStore();
-    store.set(profilesAtom, [profile]);
-
-    const planWithChanges = makePlan({
-      diff: {
-        added: ["127.0.0.1 new.local"],
-        removed: ["192.168.1.1 old.local"],
-        unchanged: ["127.0.0.1 localhost"],
-      },
-    });
-
-    mockInvoke.mockImplementation(async (cmd: string) => {
-      if (cmd === "get_managed_block_content") return "127.0.0.1 localhost\n";
-      if (cmd === "get_last_applied") return "2024-06-15T10:30:00Z";
-      if (cmd === "generate_apply_plan") return planWithChanges;
-      return null;
-    });
-
-    render(
-      <Wrapper>
-        <ApplyStatus />
-      </Wrapper>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText(/pending changes/i)).toBeInTheDocument();
-    });
-  });
-
-  it('shows "Last Applied" timestamp', async () => {
-    const profile = makeProfile();
-    const store = getDefaultStore();
-    store.set(profilesAtom, [profile]);
-
-    mockInvoke.mockImplementation(async (cmd: string) => {
-      if (cmd === "get_managed_block_content") return "127.0.0.1 localhost\n";
-      if (cmd === "get_last_applied") return "2024-06-15T10:30:00Z";
-      if (cmd === "generate_apply_plan") return makePlan();
-      return null;
-    });
-
-    render(
-      <Wrapper>
-        <ApplyStatus />
-      </Wrapper>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText(/Last Applied/i)).toBeInTheDocument();
-    });
-  });
-
-  it("hides pending changes when plan fails", async () => {
-    const profile = makeProfile();
-    const store = getDefaultStore();
-    store.set(profilesAtom, [profile]);
-
-    mockInvoke.mockImplementation(async (cmd: string) => {
-      if (cmd === "get_managed_block_content") return "127.0.0.1 localhost\n";
-      if (cmd === "get_last_applied") return "2024-06-15T10:30:00Z";
-      if (cmd === "generate_apply_plan") throw new Error("plan failed");
-      return null;
-    });
-
-    render(
-      <Wrapper>
-        <ApplyStatus />
-      </Wrapper>,
-    );
-
-    // Wait for component to finish loading
-    await waitFor(() => {
-      expect(screen.getByText("dev-profile")).toBeInTheDocument();
-    });
-
-    // Should NOT show pending changes
-    expect(screen.queryByText(/pending changes/i)).not.toBeInTheDocument();
-  });
-});
diff --git a/src/pages/ProfileEdit.module.css b/src/pages/ProfileEdit.module.css
deleted file mode 100644
index f717d5b..0000000
--- a/src/pages/ProfileEdit.module.css
+++ /dev/null
@@ -1,103 +0,0 @@
-/* ---- Edit Page (fills main content area) ---- */
-
-.editPage {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  max-width: none;
-}
-
-/* ---- Edit Grid ---- */
-
-.editGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  flex: 1;
-  min-height: 0; /* Critical: allows grid to shrink below content size */
-  align-items: stretch;
-}
-
-/* Each card column becomes a flex column so inner content can fill */
-.editGrid > .card,
-.editGrid > [class*="card"] {
-  display: flex;
-  flex-direction: column;
-  min-height: 0; /* Allow card to shrink */
-  overflow: hidden;
-}
-
-.editGrid > .card .card-title,
-.editGrid > [class*="card"] .card-title {
-  flex-shrink: 0;
-}
-
-@media (max-width: 768px) {
-  .editGrid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ---- Rule List ---- */
-
-.ruleList {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.ruleItem {
-  padding: 10px 12px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-}
-
-.ruleItemDisabled {
-  opacity: 0.6;
-}
-
-.ruleItemComment {
-  opacity: 0.7;
-  border-style: dashed;
-  background: transparent;
-}
-
-.ruleHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 4px;
-}
-
-.ruleIp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    monospace;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-primary);
-  background: var(--accent-lighter);
-  padding: 2px 8px;
-  border-radius: 4px;
-  display: inline-block;
-}
-
-.ruleStatus {
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: var(--color-border);
-  color: var(--color-text-secondary);
-}
-
-.ruleDomains {
-  font-size: 13px;
-  color: var(--color-text);
-  font-weight: 500;
-}
-
-.ruleComment {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--color-text-muted);
-}
diff --git a/src/pages/ProfileEdit.tsx b/src/pages/ProfileEdit.tsx
deleted file mode 100644
index 5a72abd..0000000
--- a/src/pages/ProfileEdit.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useAtomValue, useSetAtom } from "jotai";
-import {
-  profilesAtom,
-  selectedProfileIdAtom,
-  isLoadingAtom,
-  errorAtom,
-  fetchProfileAtom,
-  updateProfileAtom,
-} from "../stores/profiles";
-import { extractErrorMessage } from "../lib/error";
-import { countRealRules } from "../lib/rules";
-import type { HostRule, Profile } from "../types";
-import BasicInfoForm from "../components/BasicInfoForm";
-import RuleEditor from "../components/RuleEditor";
-import styles from "./ProfileEdit.module.css";
-
-function ProfileEdit() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const profiles = useAtomValue(profilesAtom);
-  const isLoading = useAtomValue(isLoadingAtom);
-  const error = useAtomValue(errorAtom);
-  const setSelectedId = useSetAtom(selectedProfileIdAtom);
-  const setError = useSetAtom(errorAtom);
-
-  const fetchProfile = useSetAtom(fetchProfileAtom);
-  const updateProfile = useSetAtom(updateProfileAtom);
-
-  const [draft, setDraft] = useState<Profile | null>(null);
-  const [hasChanges, setHasChanges] = useState(false);
-  const [ruleErrors, setRuleErrors] = useState(false);
-
-  const profile = profiles.find((p) => p.id === id);
-
-  useEffect(() => {
-    if (id) {
-      setSelectedId(id);
-      if (!profile) {
-        fetchProfile(id).catch((err: unknown) => {
-          setError(extractErrorMessage(err));
-        });
-      }
-    }
-  }, [id, setSelectedId, fetchProfile, profile, setError]);
-
-  useEffect(() => {
-    if (profile) {
-      setDraft({ ...profile });
-      setHasChanges(false);
-      setRuleErrors(false);
-    }
-  }, [profile]);
-
-  const handleChange = useCallback(
-    (field: keyof Profile, value: unknown) => {
-      setDraft((prev) => {
-        if (!prev) return prev;
-        const next = { ...prev, [field]: value };
-        setHasChanges(true);
-        return next;
-      });
-    },
-    [],
-  );
-
-  const handleRulesChange = useCallback(
-    (rules: HostRule[]) => {
-      setDraft((prev) => {
-        if (!prev) return prev;
-        setHasChanges(true);
-        setRuleErrors(false);
-        return { ...prev, rules };
-      });
-    },
-    [],
-  );
-
-  const handleRulesErrorChange = useCallback((hasErrors: boolean) => {
-    setRuleErrors(hasErrors);
-  }, []);
-
-  const handleSave = useCallback(async () => {
-    if (!draft) return;
-    if (ruleErrors) {
-      setError("Cannot save: rules have validation errors. Please fix them before saving.");
-      return;
-    }
-    try {
-      await updateProfile(draft);
-      setHasChanges(false);
-    } catch (err: unknown) {
-      setError(extractErrorMessage(err));
-    }
-  }, [draft, ruleErrors, updateProfile, setError]);
-
-  if (!profile || !draft) {
-    return (
-      <div className="mhost-page">
-        <div className="empty-state">
-          <p>Profile not found.</p>
-          <button className="btn btn-primary" onClick={() => navigate("/profiles")}>
-            Back to Profiles
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`mhost-page ${styles.editPage}`}>
-      <header className="mhost-page-header">
-        <div>
-          <h1 className="mhost-page-title">Edit Profile</h1>
-          <p className="mhost-page-subtitle">{profile.name}</p>
-        </div>
-        <div className="mhost-page-actions">
-          <button
-            className="btn btn-primary"
-            onClick={handleSave}
-            disabled={!hasChanges || isLoading || ruleErrors}
-          >
-            Save
-          </button>
-          <button
-            className="btn btn-ghost"
-            onClick={() => navigate("/profiles")}
-          >
-            Back
-          </button>
-        </div>
-      </header>
-
-      {error && <div className="alert alert-error">{error}</div>}
-
-      <div className={styles.editGrid}>
-        <BasicInfoForm draft={draft} onChange={handleChange} />
-
-        <div className="card">
-          <h3 className="card-title">Rules ({countRealRules(draft.rules)})</h3>
-          <RuleEditor
-            rules={draft.rules}
-            onChange={handleRulesChange}
-            onErrorChange={handleRulesErrorChange}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ProfileEdit;
diff --git a/src/pages/ProfileList.module.css b/src/pages/ProfileList.module.css
deleted file mode 100644
index 6b04412..0000000
--- a/src/pages/ProfileList.module.css
+++ /dev/null
@@ -1,218 +0,0 @@
-/* ---- Profile List ---- */
-
-.profileList {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* ---- Stats Grid (Prototype aligned) ---- */
-
-.statsGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  margin-bottom: 20px;
-}
-
-.statCard {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 18px 20px;
-  transition: all var(--transition-normal);
-}
-
-.statCard:hover {
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.statLabel {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-text-muted);
-  margin-bottom: 6px;
-}
-
-.statValue {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--color-text);
-  line-height: 1.2;
-}
-
-.statChange {
-  font-size: 12px;
-  color: var(--color-success);
-  margin-top: 4px;
-}
-
-/* ---- Profile Card ---- */
-
-.profileCard {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 16px 18px;
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition-normal);
-}
-
-.profileCard:hover {
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.profileCardEnabled {
-  border-left: 3px solid var(--color-success);
-}
-
-.profileCardMain {
-  flex: 1;
-  min-width: 0;
-}
-
-.profileCardHeader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.profileName {
-  font-size: 15px;
-  font-weight: 600;
-  margin: 0;
-  cursor: pointer;
-  color: var(--color-text);
-}
-
-.profileName:hover {
-  color: var(--color-primary);
-}
-
-.profileTags {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.profileDesc {
-  margin: 6px 0 0;
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.profileMeta {
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--color-text-muted);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.metaSep {
-  color: var(--color-border);
-}
-
-.protectedBadge {
-  color: var(--color-warning);
-  font-weight: 500;
-}
-
-.profileCardActions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-/* ---- Create Card ---- */
-
-.createCard {
-  animation: slideDown 0.2s ease;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ---- Overlay & Dialog ---- */
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.35);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-  animation: fadeIn 0.15s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.dialog {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 24px;
-  width: 90%;
-  max-width: 420px;
-  box-shadow: var(--shadow-xl);
-  animation: slideUp 0.2s ease;
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.dialogTitle {
-  font-size: 17px;
-  font-weight: 700;
-  margin: 0 0 12px;
-  color: var(--color-text);
-}
-
-.dialogDesc {
-  font-size: 14px;
-  color: var(--color-text-secondary);
-  margin: 0 0 16px;
-}
-
-.dialogActions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-}
diff --git a/src/stores/profiles/actions.ts b/src/stores/profiles/actions.ts
index d508ebd..c01c899 100644
--- a/src/stores/profiles/actions.ts
+++ b/src/stores/profiles/actions.ts
@@ -243,7 +243,7 @@ export const closeApplyConfirmAtom = atom(null, (_get, set) => {
 //    preview/apply TOCTOU while keeping the common path a single write.
 //
 // Surface state mirrors `executeApplyAtom` so the existing
-// ApplyConfirmDialog / ApplyStatus wiring still lights up.
+// ApplyConfirmDialog wiring still lights up.
 export const quickApplyToggleAtom = atom(
   null,
   async (
diff --git a/src/styles/global.css b/src/styles/global.css
index d896833..29a2625 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -462,7 +462,7 @@ body {
 }
 
 /* =====================================================================
- * Toggle switch (40x22 — used by ProfileCard)
+ * Toggle switch (40x22 — used by AdBlock)
  * =====================================================================
  */