feat(dashboard): simplify Own account view

lNimien · lNimien · commit 8cec4cad7001 · 2026-05-01T22:31:37.000+02:00
Hide request logs from the private dashboard and let account cards expand without an internal scroll cap.
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -6,6 +6,7 @@ on:
     branches:
       - main
       - feat/opencode-auth-export
+      - Own
     tags:
       - "v*"
 
@@ -42,6 +43,7 @@ jobs:
           images: ${{ env.IMAGE_NAME }}
           tags: |
             type=raw,value=opencode-auth-export,enable=${{ github.ref == 'refs/heads/feat/opencode-auth-export' }}
+            type=raw,value=own,enable=${{ github.ref == 'refs/heads/Own' }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=tag
             type=sha,prefix=sha-
diff --git a/frontend/src/features/dashboard/components/account-cards.test.tsx b/frontend/src/features/dashboard/components/account-cards.test.tsx
@@ -5,7 +5,7 @@ import { AccountCards } from "@/features/dashboard/components/account-cards";
 import { createAccountSummary } from "@/test/mocks/factories";
 
 describe("AccountCards", () => {
-  it("caps the dashboard account grid at two visible rows without clipping taller cards", () => {
+  it("shows all dashboard account cards without an internal scroll cap", () => {
     render(
       <AccountCards
         accounts={Array.from({ length: 7 }, (_, index) =>
@@ -19,23 +19,9 @@ describe("AccountCards", () => {
       />,
     );
 
-    expect(screen.getByTestId("dashboard-account-cards")).toHaveStyle({
-      maxHeight: "calc(2 * 12.5rem + 1rem)",
-    });
-  });
-
-  it("keeps the scrollbar hidden on the dashboard account grid", () => {
-    render(
-      <AccountCards
-        accounts={[createAccountSummary(), createAccountSummary({ accountId: "acc-2", email: "two@example.com" })]}
-        onAction={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByTestId("dashboard-account-cards")).toHaveClass(
-      "overflow-y-auto",
-      "[scrollbar-width:none]",
-      "[&::-webkit-scrollbar]:hidden",
-    );
+    const grid = screen.getByTestId("dashboard-account-cards");
+    expect(grid).not.toHaveClass("overflow-y-auto");
+    expect(grid).not.toHaveAttribute("style");
+    expect(screen.getAllByText(/Account \d/)).toHaveLength(7);
   });
 });
diff --git a/frontend/src/features/dashboard/components/account-cards.tsx b/frontend/src/features/dashboard/components/account-cards.tsx
@@ -6,11 +6,6 @@ import { AccountCard, type AccountCardProps } from "@/features/dashboard/compone
 import type { AccountSummary } from "@/features/dashboard/schemas";
 import { buildDuplicateAccountIdSet } from "@/utils/account-identifiers";
 
-const ACCOUNT_CARD_VISIBLE_ROWS = 2;
-// Account cards can grow when the optional email row is rendered.
-const ACCOUNT_CARD_ROW_HEIGHT_REM = 12.5;
-const ACCOUNT_CARD_ROW_GAP_REM = 1;
-
 export type AccountCardsProps = {
   accounts: AccountSummary[];
   onAction?: AccountCardProps["onAction"];
@@ -32,10 +27,7 @@ export function AccountCards({ accounts, onAction }: AccountCardsProps) {
   return (
     <div
       data-testid="dashboard-account-cards"
-      className="grid gap-4 overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:grid-cols-2 lg:grid-cols-3"
-      style={{
-        maxHeight: `calc(${ACCOUNT_CARD_VISIBLE_ROWS} * ${ACCOUNT_CARD_ROW_HEIGHT_REM}rem + ${(ACCOUNT_CARD_VISIBLE_ROWS - 1) * ACCOUNT_CARD_ROW_GAP_REM}rem)`,
-      }}
+      className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
     >
       {accounts.map((account, index) => (
         <div key={account.accountId} className="animate-fade-in-up" style={{ animationDelay: `${index * 75}ms` }}>
diff --git a/frontend/src/features/dashboard/components/dashboard-page.tsx b/frontend/src/features/dashboard/components/dashboard-page.tsx
@@ -8,12 +8,9 @@ import { useAccountMutations } from "@/features/accounts/hooks/use-accounts";
 import { AccountCards } from "@/features/dashboard/components/account-cards";
 import { DashboardSkeleton } from "@/features/dashboard/components/dashboard-skeleton";
 import { OverviewTimeframeSelect } from "@/features/dashboard/components/filters/overview-timeframe-select";
-import { RequestFilters } from "@/features/dashboard/components/filters/request-filters";
-import { RecentRequestsTable } from "@/features/dashboard/components/recent-requests-table";
 import { StatsGrid } from "@/features/dashboard/components/stats-grid";
 import { UsageDonuts } from "@/features/dashboard/components/usage-donuts";
 import { useDashboard } from "@/features/dashboard/hooks/use-dashboard";
-import { useRequestLogs } from "@/features/dashboard/hooks/use-request-logs";
 import { buildDashboardView } from "@/features/dashboard/utils";
 import {
   DEFAULT_OVERVIEW_TIMEFRAME,
@@ -22,10 +19,6 @@ import {
   type OverviewTimeframe,
 } from "@/features/dashboard/schemas";
 import { useThemeStore } from "@/hooks/use-theme";
-import { REQUEST_STATUS_LABELS } from "@/utils/constants";
-import { formatModelLabel, formatSlug } from "@/utils/formatters";
-
-const MODEL_OPTION_DELIMITER = ":::";
 
 export function DashboardPage() {
   const navigate = useNavigate();
@@ -37,10 +30,9 @@ export function DashboardPage() {
     [searchParams],
   );
   const dashboardQuery = useDashboard(overviewTimeframe);
-  const { filters, logsQuery, optionsQuery, updateFilters } = useRequestLogs();
   const { resumeMutation } = useAccountMutations();
 
-  const isRefreshing = dashboardQuery.isFetching || logsQuery.isFetching;
+  const isRefreshing = dashboardQuery.isFetching;
 
   const handleRefresh = useCallback(() => {
     void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
@@ -77,63 +69,16 @@ export function DashboardPage() {
   );
 
   const overview = dashboardQuery.data;
-  const logPage = logsQuery.data;
 
   const view = useMemo(() => {
-    if (!overview || !logPage) {
+    if (!overview) {
       return null;
     }
-    return buildDashboardView(overview, logPage.requests, isDark);
-  }, [overview, logPage, isDark]);
-
-  const accountOptions = useMemo(() => {
-    const entries = new Map<string, { label: string; isEmail: boolean }>();
-    for (const account of overview?.accounts ?? []) {
-      const raw = account.displayName || account.email || account.accountId;
-      const isEmail = !!account.email && raw === account.email;
-      entries.set(account.accountId, { label: raw, isEmail });
-    }
-    return (optionsQuery.data?.accountIds ?? []).map((accountId) => {
-      const entry = entries.get(accountId);
-      return {
-        value: accountId,
-        label: entry?.label ?? accountId,
-        isEmail: entry?.isEmail ?? false,
-      };
-    });
-  }, [optionsQuery.data?.accountIds, overview?.accounts]);
-
-  const apiKeyOptions = useMemo(
-    () =>
-      (optionsQuery.data?.apiKeys ?? []).map((option) => ({
-        value: option.id,
-        label: option.keyPrefix ? `${option.name} · ${option.keyPrefix}` : option.name,
-      })),
-    [optionsQuery.data?.apiKeys],
-  );
-
-  const modelOptions = useMemo(
-    () =>
-      (optionsQuery.data?.modelOptions ?? []).map((option) => ({
-        value: `${option.model}${MODEL_OPTION_DELIMITER}${option.reasoningEffort ?? ""}`,
-        label: formatModelLabel(option.model, option.reasoningEffort),
-      })),
-    [optionsQuery.data?.modelOptions],
-  );
-
-  const statusOptions = useMemo(
-    () =>
-      (optionsQuery.data?.statuses ?? []).map((status) => ({
-        value: status,
-        label: REQUEST_STATUS_LABELS[status] ?? formatSlug(status),
-      })),
-    [optionsQuery.data?.statuses],
-  );
+    return buildDashboardView(overview, [], isDark);
+  }, [overview, isDark]);
 
   const errorMessage =
     (dashboardQuery.error instanceof Error && dashboardQuery.error.message) ||
-    (logsQuery.error instanceof Error && logsQuery.error.message) ||
-    (optionsQuery.error instanceof Error && optionsQuery.error.message) ||
     null;
 
   return (
@@ -143,7 +88,7 @@ export function DashboardPage() {
         <div>
           <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
           <p className="mt-1 text-sm text-muted-foreground">
-            Overview, account health, and recent request logs.
+            Overview and account health for your active pool.
           </p>
         </div>
         <div className="flex items-center gap-2">
@@ -171,16 +116,16 @@ export function DashboardPage() {
         <>
           <StatsGrid stats={view.stats} />
 
-            <UsageDonuts
-              primaryItems={view.primaryUsageItems}
-              secondaryItems={view.secondaryUsageItems}
-              primaryTotal={overview?.summary.primaryWindow.capacityCredits ?? 0}
-              secondaryTotal={overview?.summary.secondaryWindow?.capacityCredits ?? 0}
-              primaryCenterValue={view.primaryTotal}
-              secondaryCenterValue={view.secondaryTotal}
-              safeLinePrimary={view.safeLinePrimary}
-              safeLineSecondary={view.safeLineSecondary}
-            />
+          <UsageDonuts
+            primaryItems={view.primaryUsageItems}
+            secondaryItems={view.secondaryUsageItems}
+            primaryTotal={overview?.summary.primaryWindow.capacityCredits ?? 0}
+            secondaryTotal={overview?.summary.secondaryWindow?.capacityCredits ?? 0}
+            primaryCenterValue={view.primaryTotal}
+            secondaryCenterValue={view.secondaryTotal}
+            safeLinePrimary={view.safeLinePrimary}
+            safeLineSecondary={view.safeLineSecondary}
+          />
 
           <section className="space-y-4">
             <div className="flex items-center gap-3">
@@ -189,51 +134,6 @@ export function DashboardPage() {
             </div>
             <AccountCards accounts={overview?.accounts ?? []} onAction={handleAccountAction} />
           </section>
-
-          <section className="space-y-4">
-            <div className="flex items-center gap-3">
-              <h2 className="text-[13px] font-medium uppercase tracking-wider text-muted-foreground">Request Logs</h2>
-              <div className="h-px flex-1 bg-border" />
-            </div>
-            <RequestFilters
-              filters={filters}
-              accountOptions={accountOptions}
-              apiKeyOptions={apiKeyOptions}
-              modelOptions={modelOptions}
-              statusOptions={statusOptions}
-              onSearchChange={(search) => updateFilters({ search, offset: 0 })}
-              onTimeframeChange={(timeframe) => updateFilters({ timeframe, offset: 0 })}
-              onAccountChange={(accountIds) => updateFilters({ accountIds, offset: 0 })}
-              onApiKeyChange={(apiKeyIds) => updateFilters({ apiKeyIds, offset: 0 })}
-              onModelChange={(modelOptionsSelected) =>
-                updateFilters({ modelOptions: modelOptionsSelected, offset: 0 })
-              }
-              onStatusChange={(statuses) => updateFilters({ statuses, offset: 0 })}
-              onReset={() =>
-                updateFilters({
-                  search: "",
-                  timeframe: "all",
-                  accountIds: [],
-                  apiKeyIds: [],
-                  modelOptions: [],
-                  statuses: [],
-                  offset: 0,
-                })
-              }
-            />
-            <div className="transition-opacity duration-200">
-              <RecentRequestsTable
-                requests={view.requestLogs}
-                accounts={overview?.accounts ?? []}
-                total={logPage?.total ?? 0}
-                limit={filters.limit}
-                offset={filters.offset}
-                hasMore={logPage?.hasMore ?? false}
-                onLimitChange={(limit) => updateFilters({ limit, offset: 0 })}
-                onOffsetChange={(offset) => updateFilters({ offset })}
-              />
-            </div>
-          </section>
         </>
       )}
 
diff --git a/frontend/src/features/dashboard/components/dashboard-skeleton.tsx b/frontend/src/features/dashboard/components/dashboard-skeleton.tsx
@@ -86,79 +86,6 @@ export function DashboardSkeleton() {
           ))}
         </div>
       </div>
-
-      {/* Request logs section */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-3">
-          <Skeleton className="h-5 w-28" />
-          <div className="h-px flex-1 bg-border" />
-        </div>
-
-        {/* Filters */}
-        <div className="space-y-2 rounded-xl border bg-card p-4">
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-8 flex-1 rounded-md" />
-            <Skeleton className="h-8 w-32 rounded-md" />
-          </div>
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-8 w-24 rounded-md" />
-            <Skeleton className="h-8 w-20 rounded-md" />
-            <Skeleton className="h-8 w-22 rounded-md" />
-            <Skeleton className="h-8 w-16 rounded-md" />
-          </div>
-        </div>
-
-        {/* Table */}
-        <div className="rounded-xl border bg-card">
-          <div className="overflow-x-auto">
-            <div className="min-w-[960px]">
-              {/* Table header */}
-              <div className="flex items-center gap-4 border-b px-4 py-2.5">
-                <Skeleton className="h-3 w-16" />
-                <Skeleton className="h-3 w-20 flex-1" />
-                <Skeleton className="h-3 w-16 flex-1" />
-                <Skeleton className="h-3 w-16 flex-1" />
-                <Skeleton className="h-3 w-14" />
-                <Skeleton className="h-3 w-14" />
-                <Skeleton className="h-3 w-10" />
-                <Skeleton className="h-3 w-14" />
-              </div>
-              {/* Table rows */}
-              {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i} className="flex items-start gap-4 border-b px-4 py-3 last:border-b-0">
-                  <div className="w-16 space-y-1">
-                    <Skeleton className="h-3.5 w-14" />
-                    <Skeleton className="h-3 w-16" />
-                  </div>
-                  <Skeleton className="h-3.5 w-24 flex-1" />
-                  <Skeleton className="h-3.5 w-20 flex-1" />
-                  <Skeleton className="h-3.5 w-28 flex-1 font-mono" />
-                  <Skeleton className="h-5 w-14 rounded-full" />
-                  <div className="w-14 space-y-1">
-                    <Skeleton className="h-3.5 w-12" />
-                    <Skeleton className="h-3 w-14" />
-                  </div>
-                  <Skeleton className="h-3.5 w-10" />
-                  <Skeleton className="h-3.5 w-14" />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Pagination */}
-        <div className="flex justify-end">
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-3 w-8" />
-            <Skeleton className="h-8 w-20 rounded-md" />
-            <Skeleton className="h-3 w-20" />
-            <Skeleton className="h-8 w-8 rounded-md" />
-            <Skeleton className="h-8 w-8 rounded-md" />
-            <Skeleton className="h-8 w-8 rounded-md" />
-            <Skeleton className="h-8 w-8 rounded-md" />
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
