feat: implement universal icon system with Phosphor Icons

- Install @phosphor-icons/react package
- Create centralized Icon component with size/weight/color variants
- Create icon registry with 34 icons across 5 categories
- Replace all raw Unicode symbols with proper icon components
- Add icons to navigation, buttons, status indicators, git operations
- Add icon CSS with consistent sizing and spacing
- Fix type definitions for Phosphor icon compatibility

Quality gates: typecheck ✓, lint ✓, build ✓ (375KB bundle)

apps/web/src/components/app-shell.tsx

@@ -2,13 +2,15 @@ import { Link, NavLink, Outlet } from "react-router-dom";
 
 import { useTheme } from "../hooks/use-theme";
 import { useAuth } from "../state/auth";
+import { Icon } from "./icon";
+import type { IconName } from "../utils/icons";
 
-const NAV_ITEMS = [
-  { to: "/", label: "Dashboard" },
-  { to: "/projects", label: "Projects" },
-  { to: "/ssh-keys", label: "SSH Keys" },
-  { to: "/tool-types", label: "Tool Types" },
-  { to: "/settings", label: "Settings" }
+const NAV_ITEMS: { to: string; label: string; icon: IconName }[] = [
+  { to: "/", label: "Dashboard", icon: "dashboard" },
+  { to: "/projects", label: "Projects", icon: "projects" },
+  { to: "/ssh-keys", label: "SSH Keys", icon: "profile" },
+  { to: "/tool-types", label: "Tool Types", icon: "code" },
+  { to: "/settings", label: "Settings", icon: "settings" }
 ];
 
 export const AppShell = () => {
@@ -32,6 +34,7 @@ export const AppShell = () => {
             }}
             type="button"
           >
+            <Icon name="logout" size="sm" />
             Logout
           </button>
         </div>
@@ -46,6 +49,7 @@ export const AppShell = () => {
               className={({ isActive }) => (isActive ? "nav-item nav-item-active" : "nav-item")}
               end={item.to === "/"}
             >
+              <Icon name={item.icon} size="sm" />
               {item.label}
             </NavLink>
           ))}