feat: streamline traefik widget with icon/status dot, fix grid gap

Traefik's widget was the only card without a BrandIcon or StatusDot in
its header, and had no href either - added icon/href fields to the
schema and matched the exact docker/service widget header markup.
StatusDot reuses the same "running once data loaded" convention the
other widgets already use for a non-container up/down signal.

System's widget was span=5 while every other widget in this app is
span=4 (docker/service/traefik) or 3 (http) - on a 12-column grid that
left a permanent 3-column gap next to it every row. Matched it to
span=4 so system+traefik+one more widget tile a full row exactly.
Also added grid-auto-flow: dense as a general safety net against
future span-mismatch gaps.

app/globals.css

@@ -144,6 +144,7 @@ body {
 .pn-bento {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+  grid-auto-flow: dense;
 }
 
 @media (max-width: 860px) {

components/widgets/system/Widget.tsx

@@ -19,7 +19,7 @@ export function SystemWidget({ widget, widgetId }: { widget: SystemWidget; widge
   const errorMessage = result?.type === "error" ? result.message : null;
 
   return (
-    <WidgetCard span={5} rowSpan={2}>
+    <WidgetCard span={4} rowSpan={2}>
       <div className="text-[10px] tracking-[0.1em] text-accent uppercase">System</div>
       <span className="text-[15px] font-medium text-fg">{widget.name}</span>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}

components/widgets/traefik/Widget.tsx

@@ -4,6 +4,8 @@ import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { SkeletonLines } from "@/components/widgets/Skeleton";
 import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { StatusDot } from "@/components/widgets/StatusDot";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 
 type TraefikWidget = Extract<Widget, { type: "traefik" }>;
 
@@ -15,13 +17,30 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
 
   return (
     <WidgetCard span={4}>
-      <div className="flex items-center justify-between">
-        <span className="text-[15px] font-medium text-fg">{widget.name}</span>
-        {data && (
-          <span className="font-mono text-[11px] tabular-nums text-fg-muted">
-            {data.entrypoints.length} entrypoints
-          </span>
-        )}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <BrandIcon slug={widget.icon} />
+          {widget.href ? (
+            <a
+              href={widget.href}
+              target="_blank"
+              rel="noreferrer"
+              className="truncate text-[15px] font-medium text-fg hover:text-accent"
+            >
+              {widget.name}
+            </a>
+          ) : (
+            <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {data && (
+            <span className="font-mono text-[11px] tabular-nums text-fg-muted">
+              {data.entrypoints.length} entrypoints
+            </span>
+          )}
+          <StatusDot status={data ? "running" : undefined} />
+        </div>
       </div>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines count={3} />}

lib/config/schema.ts

@@ -62,6 +62,8 @@ export const traefikWidgetSchema = z.object({
   type: z.literal("traefik"),
   name: z.string().default("Traefik"),
   apiUrl: z.string().url(),
+  href: z.string().url().optional(),
+  icon: z.string().optional(),
   interval: durationSchema.default("15s"),
 });