Computer panel: filled glyphs + 32px grid inset + header padding

All verified against the captured WorkClaw panel DOM (not the reviewer's
live-preview guesses, which were wrong on two points):

- Glyphs are now FILLED — gradient on fill + stroke, 1px stroke, and a
  drop-shadow(0 1px 2px rgba(0,0,0,0.25)) — via a `filled` prop on
  GradientGlyph. Applied to the dark-tile glyphs (Claw Chat + dock
  Skills/Files/Routines/Settings). The reviewer said keep Skills outline —
  the capture shows WorkClaw fills the zap too; and it missed the drop-shadow.
- Grid inset 12px → 32px (px-8): the grid is now 336px so grid-cols-4 resolves
  to 72px tracks (capture shows repeat(4,1fr) at 336px — NOT explicit 72px cols
  as claimed; same grid-cols-4 as ours, just the right container width).
- Panel header: drop the fixed h-11/px-3, use px-8 pt-6 = padding 24px 32px 0
  (matches WorkClaw's inline style exactly).

typecheck/lint/86 unit/31 E2E/6 visual green; computer-home baseline updated.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

frontend/src/components/computer/DevicePanel.tsx

@@ -92,7 +92,7 @@ export function DevicePanel({ agent }: { agent: Agent }) {
         >
           {mounted && (
             <WallpaperSurface>
-              <header className="relative flex h-11 shrink-0 items-center gap-2 px-3">
+              <header className="relative flex shrink-0 items-center gap-2 px-8 pt-6">
                 <button
                   type="button"
                   aria-label="Computer home"

frontend/src/components/computer/HomeScreen.tsx

@@ -44,7 +44,7 @@ function tileSurface(app: AppId) {
   }
   return (
     <div className="relative flex size-14 items-center justify-center rounded-2xl bg-[#1f1f1f] shadow-dock-tile select-none">
-      <GradientGlyph icon={APP_ICON[app]} size={34} />
+      <GradientGlyph icon={APP_ICON[app]} size={34} filled />
     </div>
   );
 }
@@ -92,7 +92,7 @@ export function HomeScreen({ agentName, onOpen }: HomeScreenProps) {
   return (
     <div className="relative flex flex-1 flex-col justify-between pt-5">
       <div
-        className="grid grid-cols-4 gap-x-4 gap-y-[34px] px-3"
+        className="grid grid-cols-4 gap-x-4 gap-y-[34px] px-8"
         aria-label={`${agentName}'s apps`}
       >
         {HOME_GRID.map((tile) => (

frontend/src/components/ui/GradientGlyph.tsx

@@ -10,20 +10,26 @@ interface GradientGlyphProps {
   from?: string;
   to?: string;
   strokeWidth?: number;
+  /** Solid glyph: gradient on fill + stroke, 1px stroke, soft drop-shadow
+   *  (WorkClaw's filled in-app glyph). Default false = stroke-only outline. */
+  filled?: boolean;
 }
 
 /* The reference's `mvp4-glyph-gradient` technique: a lucide glyph whose
-   stroke references a per-instance linearGradient, giving every in-app
+   fill/stroke reference a per-instance linearGradient, giving every in-app
    icon the soft coral tint. useId keeps ids collision-free across
-   instances and SSR. */
+   instances and SSR. WorkClaw renders these *filled* (gradient on fill too,
+   1px stroke, drop-shadow); pass `filled` for that. */
 export function GradientGlyph({
   icon: Icon,
   size = 24,
   from = "var(--color-gradient-coral-top)",
   to = "var(--color-gradient-coral-bottom)",
-  strokeWidth = 2,
+  strokeWidth,
+  filled = false,
 }: GradientGlyphProps) {
   const id = `glyph-gradient-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+  const grad = `url(#${id})`;
   return (
     <span aria-hidden className="inline-flex">
       <svg width={0} height={0} className="absolute">
@@ -34,7 +40,17 @@ export function GradientGlyph({
           </linearGradient>
         </defs>
       </svg>
-      <Icon size={size} stroke={`url(#${id})`} strokeWidth={strokeWidth} />
+      <Icon
+        size={size}
+        stroke={grad}
+        fill={filled ? grad : "none"}
+        strokeWidth={strokeWidth ?? (filled ? 1 : 2)}
+        style={
+          filled
+            ? { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))" }
+            : undefined
+        }
+      />
     </span>
   );
 }