RoderickGrc · RoderickGrc · Mar 5, 2026
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/frontend/components/features/CredentialsManager.tsx b/frontend/components/features/CredentialsManager.tsx
@@ -190,7 +190,7 @@ export const BrowserProfileManager: React.FC<BrowserProfileManagerProps> = ({ is
                                     <div className="flex items-start gap-3">
                                         {/* Status Indicator */}
                                         <div className="mt-1">
-                                            {prof.isVerified ? (
+                                            {prof.hasState ? (
                                                 <div className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]" title="State Saved" />
                                             ) : (
                                                 <div className="w-2.5 h-2.5 rounded-full bg-zinc-700 border border-zinc-600" title="Empty State" />
@@ -200,7 +200,7 @@ export const BrowserProfileManager: React.FC<BrowserProfileManagerProps> = ({ is
                                         <div className="space-y-1">
                                             <div className="flex items-center gap-2">
                                                 <h3 className="font-medium text-zinc-200 text-[15px]">{prof.alias}</h3>
-                                                {prof.isVerified ? (
+                                                {prof.hasState ? (
                                                     <Badge variant="success" className="text-[10px] px-1.5 py-0 h-4">Configured</Badge>
                                                 ) : (
                                                     <Badge variant="neutral" className="text-[10px] px-1.5 py-0 h-4">Empty</Badge>
@@ -209,15 +209,15 @@ export const BrowserProfileManager: React.FC<BrowserProfileManagerProps> = ({ is
 
                                             <div className="flex flex-col gap-1 text-xs text-zinc-500">
                                                 <span className="flex items-center gap-1.5 font-mono text-zinc-600">
-                                                    <Globe size={10} /> {prof.targetUrl}
+                                                    <Globe size={10} /> {prof.startUrl}
                                                 </span>
-                                                {(prof.username || prof.email) && (
-                                                    <p className="text-zinc-400 leading-relaxed max-w-md">{prof.username || prof.email}</p>
+                                                {prof.description && (
+                                                    <p className="text-zinc-400 leading-relaxed max-w-md">{prof.description}</p>
                                                 )}
-                                                {prof.isVerified && prof.storageState && (
+                                                {prof.hasState && prof.storageSize && (
                                                     <div className="flex items-center gap-3 mt-1 text-[10px] text-zinc-500">
-                                                        <span>Size: {(new Blob([prof.storageState]).size / 1024).toFixed(1)} KB</span>
-                                                        {prof.createdAt && <span>Created: {new Date(prof.createdAt).toLocaleDateString()}</span>}
+                                                        <span>Size: {prof.storageSize}</span>
+                                                        {prof.lastUpdated && <span>Updated: {new Date(prof.lastUpdated).toLocaleDateString()}</span>}
                                                     </div>
                                                 )}
                                             </div>
@@ -227,7 +227,7 @@ export const BrowserProfileManager: React.FC<BrowserProfileManagerProps> = ({ is
 
                                 <div className="flex items-center justify-between border-t border-zinc-900 pt-3 mt-1">
                                     <div className="flex items-center gap-2">
-                                        {prof.isVerified ? (
+                                        {prof.hasState ? (
                                             <>
                                                 <Button
                                                     size="sm"

diff --git a/frontend/components/features/DebugServerPanel.tsx b/frontend/components/features/DebugServerPanel.tsx
@@ -225,7 +225,7 @@ export const DebugServerPanel: React.FC = () => {
             {/* Start Debug Gateway Session Button */}
             <div className="pt-2">
               <Button
-                variant="default"
+                variant="primary"
                 size="sm"
                 className="w-full py-2.5 px-3"
                 onClick={handleStartDebugSession}

diff --git a/frontend/components/features/SessionConfig.tsx b/frontend/components/features/SessionConfig.tsx
@@ -205,7 +205,7 @@ export const SessionConfig: React.FC = () => {
         setProfileId(id);
         const profile = profiles.find(c => c.id === id);
         if (profile) {
-            setUrl(profile.targetUrl);
+            setUrl(profile.startUrl);
         }
     };
 

diff --git a/frontend/components/layout/Header.tsx b/frontend/components/layout/Header.tsx
@@ -116,7 +116,7 @@ export const Header: React.FC<HeaderProps> = ({ title = "QA Testing App", descri
         <div className="flex items-center gap-4 flex-shrink-0 ml-4">
           {rightContent}
           <div className="w-px h-6 bg-border-light dark:border-border-dark mx-2" />
-          <Button variant="text" size="icon" onClick={toggleTheme} className="rounded-full" aria-label="Toggle Theme">
+          <Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full" aria-label="Toggle Theme">
             {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
           </Button>
         </div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
@@ -1,5 +1,5 @@
 
-import { Session, BrowserProfile, QAEvent } from './types';
+import { Session, BrowserProfile, QAEvent } from '../types';
 
 // No mock event data; app uses real sessions from the backend
 export const REAL_EVENTS: QAEvent[] = [];

diff --git a/frontend/src/services/screenCapture.ts b/frontend/src/services/screenCapture.ts
@@ -23,13 +23,6 @@ export class ScreenCaptureService {
     private isStopped: boolean = false; // Prevent multiple stop calls
     private uploadRetries: number = 3; // Max retries for upload
 
-    /**
-     * Get the actual recording start time
-     */
-    getStartTime(): number {
-        return this.startTime;
-    }
-
     /**
      * Start screen capture
      * Shows native OS dialog for user to select screen/window
@@ -231,7 +224,7 @@ export class ScreenCaptureService {
     }
 
     /**
-     * Get recording start time
+     * Get the actual recording start time
      */
     getStartTime(): number {
         return this.startTime;

diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />