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

@@ -1,10 +1,11 @@
 "use client";
 
-import { Lock } from "@phosphor-icons/react/ssr";
 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" }>;
 
@@ -12,41 +13,59 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "traefik" ? result.data : null;
   const errorMessage = result?.type === "error" ? result.message : null;
+  const enabledCount = data?.routers.filter((router) => router.status === "enabled").length ?? 0;
 
   return (
     <WidgetCard span={4}>
-      <div className="flex items-center justify-between">
-        <span className="text-[15px] font-medium text-fg">{widget.name}</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.map((ep) => ep.address).join(" · ") || `${data.entrypoints.length} entrypoints`}
+              {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} />}
       {data && (
-        <div className="flex flex-col">
-          {data.routers.map((router) => (
-            <div key={router.name} className="flex items-center justify-between gap-2 border-t border-border py-1.5 text-[13px] first:border-t-0">
-              <span className="truncate text-fg" title={router.rule}>
-                {router.name.replace(/@.*$/, "")}
-              </span>
-              <span className="flex items-center gap-1.5 text-[11px] text-fg-muted">
-                {router.tls && <Lock size={11} aria-label="TLS enabled" />}
-                <span
-                  className={`flex items-center gap-1.5 ${router.status === "enabled" ? "text-status-up" : "text-status-down"}`}
-                >
-                  <span className="h-1.5 w-1.5 rounded-full bg-current" />
-                  {router.status}
-                </span>
+        <>
+          <div className="flex items-start gap-4">
+            <div className="flex flex-col gap-0.5">
+              <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-accent">
+                {data.routers.length}
               </span>
+              <span className="text-[10px] tracking-wide text-fg-muted uppercase">Routes</span>
             </div>
-          ))}
-          <span className="pt-2 text-[11px] text-fg-muted">
+            {enabledCount !== data.routers.length && (
+              <div className="flex flex-col gap-0.5 border-l border-border pl-4">
+                <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-status-degraded">
+                  {enabledCount}
+                </span>
+                <span className="text-[10px] tracking-wide text-fg-muted uppercase">Enabled</span>
+              </div>
+            )}
+          </div>
+          <span className="text-[11px] text-fg-muted">
             <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
           </span>
-        </div>
+        </>
       )}
     </WidgetCard>
   );

lib/collectors/services/coolify.ts

@@ -8,23 +8,33 @@ interface CoolifyProject {
   name: string;
 }
 
-export async function collectCoolify(
-  widget: CoolifyServiceWidget
-): Promise<{ stats: ServiceStat[]; detail?: string[] }> {
-  const base = serviceBaseUrl(widget);
-  const response = await fetch(`${base}/api/v1/projects`, {
-    headers: { Authorization: `Bearer ${widget.apiToken}` },
+async function fetchCoolify<T>(base: string, path: string, apiToken: string): Promise<T> {
+  const response = await fetch(`${base}${path}`, {
+    headers: { Authorization: `Bearer ${apiToken}` },
     signal: AbortSignal.timeout(5_000),
   });
   if (!response.ok) {
     throw new Error(`Coolify API returned ${response.status}`);
   }
-  const projects = (await response.json()) as CoolifyProject[];
+  return (await response.json()) as T;
+}
+
+export async function collectCoolify(
+  widget: CoolifyServiceWidget
+): Promise<{ stats: ServiceStat[]; detail?: string[] }> {
+  const base = serviceBaseUrl(widget);
+  const [projects, resources] = await Promise.all([
+    fetchCoolify<CoolifyProject[]>(base, "/api/v1/projects", widget.apiToken),
+    fetchCoolify<unknown[]>(base, "/api/v1/resources", widget.apiToken),
+  ]);
   const names = projects.slice(0, DETAIL_LIMIT).map((p) => p.name);
   if (projects.length > DETAIL_LIMIT) names.push(`+${projects.length - DETAIL_LIMIT} more`);
 
   return {
-    stats: [{ label: "Projects", value: String(projects.length) }],
+    stats: [
+      { label: "Projects", value: String(projects.length) },
+      { label: "Resources", value: String(resources.length) },
+    ],
     detail: names.length > 0 ? names : undefined,
   };
 }

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"),
 });