feat: enhance context bar with actionable stats and cleaner UX

prosdev · prosdev · commit 97564f90a0f1 · 2025-12-23T01:56:55.000-08:00
- Add Activity icon for active requests (network monitor feel)
- Display request count with relative timestamp (event-driven via chrome.storage.onChanged)
- Simplify org display (e.g., 'lytics' instead of 'app.lytics.com')
- Two-line layout for better readability
- Clean empty state: 'No matching requests yet'
- Add date-fns for lightweight time formatting (~2-3KB)
- Leverage SDK Kit's event-driven architecture (no polling)
diff --git a/package.json b/package.json
@@ -17,7 +17,13 @@
     "prepare": "husky",
     "lint-staged": "biome check --write --no-errors-on-unmatched"
   },
-  "keywords": ["chrome-extension", "auth", "headers", "sdk-kit", "developer-tools"],
+  "keywords": [
+    "chrome-extension",
+    "auth",
+    "headers",
+    "sdk-kit",
+    "developer-tools"
+  ],
   "author": "ProsDevLab",
   "license": "MIT",
   "packageManager": "pnpm@10.14.0",
@@ -30,6 +36,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.562.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/generate-icons.cjs b/scripts/generate-icons.cjs
@@ -0,0 +1,65 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const zlib = require('node:zlib');
+
+// Simple PNG generator
+const sizes = [16, 48, 128];
+const iconsDir = path.join(__dirname, '../src/icons');
+
+// Create a simple colored square PNG manually
+function createSimplePNG(size, color = [59, 130, 246]) {
+  const width = size;
+  const height = size;
+
+  // PNG signature
+  const signature = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+
+  // IHDR chunk
+  const ihdr = Buffer.alloc(25);
+  ihdr.writeUInt32BE(13, 0); // Length
+  ihdr.write('IHDR', 4);
+  ihdr.writeUInt32BE(width, 8);
+  ihdr.writeUInt32BE(height, 12);
+  ihdr.writeUInt8(8, 16); // Bit depth
+  ihdr.writeUInt8(2, 17); // Color type (RGB)
+  ihdr.writeUInt8(0, 18); // Compression
+  ihdr.writeUInt8(0, 19); // Filter
+  ihdr.writeUInt8(0, 20); // Interlace
+
+  const crc = zlib.crc32(ihdr.slice(4, 21));
+  ihdr.writeUInt32BE(crc, 21);
+
+  // IDAT chunk - solid blue color
+  const pixelData = Buffer.alloc(height * (1 + width * 3));
+  for (let y = 0; y < height; y++) {
+    pixelData[y * (1 + width * 3)] = 0; // Filter type
+    for (let x = 0; x < width; x++) {
+      const offset = y * (1 + width * 3) + 1 + x * 3;
+      pixelData[offset] = color[0]; // R
+      pixelData[offset + 1] = color[1]; // G
+      pixelData[offset + 2] = color[2]; // B
+    }
+  }
+
+  const compressed = zlib.deflateSync(pixelData);
+  const idat = Buffer.alloc(12 + compressed.length);
+  idat.writeUInt32BE(compressed.length, 0);
+  idat.write('IDAT', 4);
+  compressed.copy(idat, 8);
+  const idatCrc = zlib.crc32(idat.slice(4, 8 + compressed.length));
+  idat.writeUInt32BE(idatCrc, 8 + compressed.length);
+
+  // IEND chunk
+  const iend = Buffer.from([0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]);
+
+  return Buffer.concat([signature, ihdr, idat, iend]);
+}
+
+// Generate icons
+sizes.forEach((size) => {
+  const png = createSimplePNG(size);
+  fs.writeFileSync(path.join(iconsDir, `icon-${size}.png`), png);
+  console.log(`✓ Created icon-${size}.png`);
+});
+
+console.log('\n✓ Icons generated successfully!');
diff --git a/scripts/generate-icons.js b/scripts/generate-icons.js
@@ -0,0 +1,65 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const zlib = require('node:zlib');
+
+// Simple PNG generator
+const sizes = [16, 48, 128];
+const iconsDir = path.join(__dirname, '../src/icons');
+
+// Create a simple colored square PNG manually
+function createSimplePNG(size, color = [59, 130, 246]) {
+  const width = size;
+  const height = size;
+
+  // PNG signature
+  const signature = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+
+  // IHDR chunk
+  const ihdr = Buffer.alloc(25);
+  ihdr.writeUInt32BE(13, 0); // Length
+  ihdr.write('IHDR', 4);
+  ihdr.writeUInt32BE(width, 8);
+  ihdr.writeUInt32BE(height, 12);
+  ihdr.writeUInt8(8, 16); // Bit depth
+  ihdr.writeUInt8(2, 17); // Color type (RGB)
+  ihdr.writeUInt8(0, 18); // Compression
+  ihdr.writeUInt8(0, 19); // Filter
+  ihdr.writeUInt8(0, 20); // Interlace
+
+  const crc = zlib.crc32(ihdr.slice(4, 21));
+  ihdr.writeUInt32BE(crc, 21);
+
+  // IDAT chunk - solid blue color
+  const pixelData = Buffer.alloc(height * (1 + width * 3));
+  for (let y = 0; y < height; y++) {
+    pixelData[y * (1 + width * 3)] = 0; // Filter type
+    for (let x = 0; x < width; x++) {
+      const offset = y * (1 + width * 3) + 1 + x * 3;
+      pixelData[offset] = color[0]; // R
+      pixelData[offset + 1] = color[1]; // G
+      pixelData[offset + 2] = color[2]; // B
+    }
+  }
+
+  const compressed = zlib.deflateSync(pixelData);
+  const idat = Buffer.alloc(12 + compressed.length);
+  idat.writeUInt32BE(compressed.length, 0);
+  idat.write('IDAT', 4);
+  compressed.copy(idat, 8);
+  const idatCrc = zlib.crc32(idat.subarray(4, 8 + compressed.length));
+  idat.writeUInt32BE(idatCrc, 8 + compressed.length);
+
+  // IEND chunk
+  const iend = Buffer.from([0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]);
+
+  return Buffer.concat([signature, ihdr, idat, iend]);
+}
+
+// Generate icons
+for (const size of sizes) {
+  const png = createSimplePNG(size);
+  fs.writeFileSync(path.join(iconsDir, `icon-${size}.png`), png);
+  console.log(`✓ Created icon-${size}.png`);
+}
+
+console.log('\n✓ Icons generated successfully!');
diff --git a/scripts/generate-icons.mjs b/scripts/generate-icons.mjs
@@ -0,0 +1,24 @@
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import sharp from 'sharp';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const iconsDir = join(__dirname, '../src/icons');
+const mainIconPath = join(iconsDir, 'icon-main.png');
+
+const sizes = [16, 48, 128];
+
+async function generateIcons() {
+  for (const size of sizes) {
+    await sharp(mainIconPath)
+      .resize(size, size)
+      .png()
+      .toFile(join(iconsDir, `icon-${size}.png`));
+    console.log(`✓ Created icon-${size}.png`);
+  }
+  console.log('\n✓ Icons generated successfully!');
+}
+
+generateIcons().catch(console.error);
diff --git a/src/panel/App.tsx b/src/panel/App.tsx
@@ -1,13 +1,10 @@
-import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import type { AuthRule } from '@/shared/types';
-import { Settings } from 'lucide-react';
 import { useState } from 'react';
 import { ContextBar } from './components/ContextBar';
 import { RuleForm } from './components/RuleForm';
 import { RulesList } from './components/RulesList';
-import { SettingsDialog } from './components/SettingsDialog';
 import { useAuthRules } from './hooks/useAuthRules';
 import { useCurrentTab } from './hooks/useCurrentTab';
 import { useExtensionEnabled } from './hooks/useExtensionEnabled';
@@ -17,11 +14,15 @@ export function App() {
   const { rules, loading: rulesLoading, addRule, updateRule, deleteRule } = useAuthRules();
   const { isEnabled, loading: enabledLoading, setEnabled } = useExtensionEnabled();
   const { tab, loading: tabLoading } = useCurrentTab();
-  const { getActiveRuleIds, getCountForRules, loading: statsLoading } = useRequestStats();
+  const {
+    getActiveRuleIds,
+    getCountForRules,
+    getLastSeenForRules,
+    loading: statsLoading,
+  } = useRequestStats();
 
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [editingRule, setEditingRule] = useState<AuthRule | null>(null);
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   const loading = rulesLoading || enabledLoading || tabLoading || statsLoading;
 
@@ -62,9 +63,10 @@ export function App() {
   const activeRuleIds = getActiveRuleIds();
   const activeDisplayRules = relevantRules.filter((rule) => activeRuleIds.has(rule.id));
 
-  // Get request count for relevant rules only
+  // Get request count and timestamp for relevant rules
   const relevantPatterns = relevantRules.map((r) => r.pattern);
   const pageRequestCount = getCountForRules(relevantPatterns);
+  const lastSeenTimestamp = getLastSeenForRules(relevantPatterns);
 
   // Handlers
   const handleAddRule = async (rule: Omit<AuthRule, 'id' | 'createdAt' | 'updatedAt'>) => {
@@ -104,17 +106,16 @@ export function App() {
               disabled={loading}
             />
           </div>
-          <Button variant="ghost" size="icon" onClick={() => setIsSettingsOpen(true)}>
-            <Settings className="h-5 w-5" />
-          </Button>
         </div>
       </div>
 
-      {/* Context Bar (Sticky) - Shows active rules for current page's domain */}
+      {/* Context Bar (Sticky) - Shows active rules for current page */}
       <ContextBar
         tab={tab}
-        matchCount={activeDisplayRules.length}
+        matchCount={relevantRules.length}
         requestCount={pageRequestCount}
+        lastSeen={lastSeenTimestamp}
+        isEnabled={isEnabled}
         loading={loading}
       />
 
@@ -158,9 +159,6 @@ export function App() {
           title="Edit Auth Rule"
         />
       )}
-
-      {/* Settings Dialog */}
-      <SettingsDialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
     </div>
   );
 }
diff --git a/src/panel/components/ContextBar.tsx b/src/panel/components/ContextBar.tsx
@@ -1,60 +1,78 @@
-import { Globe } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { Activity, Globe } from 'lucide-react';
 import type { CurrentTab } from '../hooks/useCurrentTab';
 
 interface ContextBarProps {
   tab: CurrentTab;
-  matchCount: number; // Number of rules actively intercepting requests (based on stats)
-  requestCount: number; // Total requests intercepted
+  matchCount: number; // Number of rules matching this page
+  requestCount: number; // Total requests intercepted for these rules
+  lastSeen: number | null; // Most recent request timestamp
+  isEnabled: boolean; // Whether extension is enabled
   loading?: boolean;
 }
 
 /**
- * Context bar showing current page and active interceptors
- * "Active" means the rule has actually intercepted API calls (not URL pattern matching)
+ * Compact context bar showing current page and actionable status
+ * Uses existing metadata to show if rules are working
  */
-export function ContextBar({ tab, matchCount, requestCount, loading }: ContextBarProps) {
-  // Extract hostname from URL
-  const getHostname = (url: string | null) => {
+export function ContextBar({
+  tab,
+  matchCount,
+  requestCount,
+  lastSeen,
+  isEnabled,
+  loading,
+}: ContextBarProps) {
+  // Extract org name from hostname (e.g., "lytics" from "app.lytics.com")
+  const getOrgName = (url: string | null) => {
     if (!url) return null;
     try {
-      return new URL(url).hostname;
+      const hostname = new URL(url).hostname;
+      const parts = hostname.split('.');
+      // Get second-to-last part (e.g., "lytics" from "app.lytics.com")
+      return parts.length >= 2 ? parts[parts.length - 2] : hostname;
     } catch {
       return url;
     }
   };
 
-  const hostname = getHostname(tab.url);
+  const orgName = getOrgName(tab.url);
 
   return (
     <div className="sticky top-[60px] z-10 border-b border-border bg-muted/30 backdrop-blur-sm p-3">
-      <div className="flex items-center justify-between px-4 py-3">
-        <div className="flex items-center gap-2 flex-1 min-w-0">
+      <div className="px-4 py-3 space-y-2">
+        {/* Page/Org Name */}
+        <div className="flex items-center gap-2">
           <Globe className="h-4 w-4 text-muted-foreground flex-shrink-0" />
           {loading ? (
             <span className="text-sm text-muted-foreground">Loading...</span>
           ) : tab.isRestricted ? (
             <span className="text-sm text-destructive">Not available on this page</span>
           ) : (
             <span className="text-sm font-medium text-foreground truncate">
-              {hostname || 'No page'}
+              {orgName || 'No page'}
             </span>
           )}
         </div>
 
-        {!loading && !tab.isRestricted && (
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <div
-              className={`h-2 w-2 rounded-full ${matchCount > 0 ? 'bg-primary' : 'bg-muted-foreground'}`}
-            />
-            <span
-              className={`text-xs font-medium ${matchCount > 0 ? 'text-primary' : 'text-muted-foreground'}`}
-            >
-              {requestCount > 0
-                ? `${requestCount} request${requestCount === 1 ? '' : 's'} • ${matchCount} rule${matchCount === 1 ? '' : 's'}`
-                : matchCount > 0
-                  ? `${matchCount} rule${matchCount === 1 ? '' : 's'} active`
-                  : 'No active rules'}
-            </span>
+        {/* Activity Status */}
+        {!loading && !tab.isRestricted && isEnabled && matchCount > 0 && (
+          <div className="flex items-center gap-2 pl-6">
+            {requestCount > 0 ? (
+              <>
+                <Activity className="h-3.5 w-3.5 text-primary" />
+                <span className="text-xs font-medium text-primary">
+                  {requestCount} request{requestCount === 1 ? '' : 's'}
+                  {lastSeen && (
+                    <span className="text-muted-foreground ml-1">
+                      • {formatDistanceToNow(lastSeen, { addSuffix: true })}
+                    </span>
+                  )}
+                </span>
+              </>
+            ) : (
+              <span className="text-xs text-muted-foreground">No matching requests yet</span>
+            )}
           </div>
         )}
       </div>
diff --git a/src/panel/components/RulesList.tsx b/src/panel/components/RulesList.tsx
diff --git a/src/panel/hooks/useRequestStats.ts b/src/panel/hooks/useRequestStats.ts
