Update to latest shared ui

package.json

@@ -5,6 +5,7 @@
   "license": "MPL-2.0",
   "type": "module",
   "scripts": {
+    "qa-fix": "npm run lint && npm run test",
     "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
@@ -18,7 +19,7 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.6",
-    "@fluffylabs/shared-ui": "^0.1.3",
+    "@fluffylabs/shared-ui": "^0.4.2",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@tailwindcss/vite": "^4.1.16",

src/App.tsx

@@ -27,14 +27,13 @@ const AppHeader = ({ onOpenSettings }: { onOpenSettings: () => void }) => {
       ghRepoName="state-view"
       keepNameWhenSmall
       endSlot={
-        <div className="flex items-center">
+        <div className="flex items-center pr-4">
           <VersionDisplay />
           <Button
             onClick={onOpenSettings}
             size="sm"
             aria-label="Settings"
             title="Settings"
-            forcedColorScheme="dark"
           >
             <Settings className="h-4 w-4" />
           </Button>

src/components/JsonEditorDialog.tsx

@@ -171,20 +171,20 @@ const JsonEditorDialog = ({
             {onReset && (
               <Button
                 onClick={handleReset}
-                variant="outline"
+                variant="secondary"
               >
                 Reset
               </Button>
             )}
             <Button
               onClick={handleCancel}
-              variant="outline"
+              variant="secondary"
             >
               Cancel
             </Button>
             <Button
               onClick={handleSave}
-              variant="default"
+              variant="primary"
               disabled={!isJsonValid}
               className={!isJsonValid ? 'opacity-50 cursor-not-allowed' : ''}
             >

src/components/RawStateViewer.tsx

@@ -324,15 +324,15 @@ const RawStateViewer = ({
                       : dialogState.value;
                     handleCopy(textToCopy, 'dialog');
                   }}
-                  variant="outline"
+                  variant="secondary"
                   className="flex items-center gap-2"
                 >
                   <Copy className="h-4 w-4" />
                   {copiedKey === 'dialog' ? 'Copied!' : 'Copy'}
                 </Button>
                 <Button
                   onClick={() => setDialogState(prev => ({ ...prev, isOpen: false }))}
-                  variant="default"
+                  variant="primary"
                 >
                   Close
                 </Button>

src/components/StateKindSelector.tsx

@@ -19,7 +19,7 @@ export function StateKindSelector({ availableStates, selectedState, changeStateT
           <Button
             key={stateType}
             onClick={() => changeStateType(stateType)}
-            variant={selectedState === stateType ? "default" : "outline"}
+            variant={selectedState === stateType ? "primary" : "secondary"}
             size="sm"
           >
             {stateType === 'pre_state' ? 'Pre-State' :

src/components/UploadScreen.tsx

@@ -271,7 +271,7 @@ export const UploadScreen = ({
               {/* Browse Button (if no file uploaded) */}
                 <Button
                   onClick={open}
-                  variant="default"
+                  variant="primary"
                   size="lg"
                 >
                   <FolderOpen className="h-4 w-4" />
@@ -280,7 +280,7 @@ export const UploadScreen = ({
 
               <Button
                 onClick={handleManualEdit}
-                variant="outline"
+                variant="secondary"
                 size="lg"
               >
                 <Edit className="h-4 w-4" />

src/components/service/ServiceCard.test.tsx

@@ -81,7 +81,7 @@ describe('ServiceCard', () => {
     expect(screen.getByTestId('service-info')).toBeInTheDocument();
   });
 
-  it('shows storage tab as active by default', () => {
+  it('shows info tab as active by default', () => {
     const serviceData = createMockServiceData();
 
     render(
@@ -92,10 +92,9 @@ describe('ServiceCard', () => {
       />
     );
 
-    const storageTab = screen.getByRole('tab', { name: /aₛ Storage/ });
+    const storageTab = screen.getByRole('tab', { name: /a Info/ });
     expect(storageTab).toHaveAttribute('aria-selected', 'true');
-    expect(screen.getByTestId('storage-input')).toBeInTheDocument();
-    expect(screen.getByTestId('storage-results')).toBeInTheDocument();
+    expect(screen.getByTestId('service-info')).toBeInTheDocument();
   });
 
   it('switches to preimages tab when clicked', () => {
@@ -236,7 +235,8 @@ describe('ServiceCard', () => {
       />
     );
 
-    // Initially storage input should be visible
+    // Switch to storage
+    fireEvent.click(screen.getByRole('tab', { name: /aₛ Storage/ }));
     expect(screen.getByTestId('storage-input')).toBeInTheDocument();
     expect(screen.queryByTestId('preimage-input')).not.toBeInTheDocument();
     expect(screen.queryByTestId('lookup-input')).not.toBeInTheDocument();
@@ -266,7 +266,11 @@ describe('ServiceCard', () => {
       />
     );
 
-    // Check that storage tab is active initially
+    // Check that info tab is active initially
+    expect(screen.getByTestId('service-info')).toBeInTheDocument();
+
+    // Switch tabs to storage and verify content changes
+    fireEvent.click(screen.getByRole('tab', { name: /aₛ Storage/ }));
     expect(screen.getByTestId('storage-input')).toBeInTheDocument();
     expect(screen.getByTestId('storage-results')).toBeInTheDocument();
 

src/components/service/ServiceCard.tsx

@@ -17,7 +17,7 @@ export interface ServiceCardProps {
 }
 
 const ServiceCard = ({ serviceData, isDiffMode, preState, state }: ServiceCardProps) => {
-  const [activeTab, setActiveTab] = useState('storage');
+  const [activeTab, setActiveTab] = useState('info');
   const { serviceId, preService, postService, preError, postError } = serviceData;
   const activeService = postService || preService;
   const formattedId = formatServiceIdUnsigned(serviceId);
@@ -87,10 +87,19 @@ const ServiceCard = ({ serviceData, isDiffMode, preState, state }: ServiceCardPr
       )}
 
       <div className="space-y-4">
-        <ServiceInfo serviceData={serviceData} preState={preState} state={state} isDiffMode={isDiffMode} />
-
         <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className="grid w-full sm:grid-cols-3 grid-cols-1">
+          <TabsList className="grid w-full sm:grid-cols-4 grid-cols-1">
+            <TabsTrigger
+              value="info"
+              className={`flex justify-start items-center gap-2`}
+            >
+              <code className="px-1 py-0.5 rounded text-xs font-mono bg-blue-100 dark:bg-blue-900/60 text-blue-800 dark:text-blue-200">
+                a
+              </code>
+              <span className="flex items-center gap-1">
+                <span>Info <span className="text-xs text-muted-foreground">{isDiffMode && changeInfo && changeInfo.hasServiceInfoChanges ? '*': ''}</span></span>
+              </span>
+            </TabsTrigger>
             <TabsTrigger 
               value="storage" 
               className={`flex justify-start items-center gap-2 ${
@@ -208,6 +217,9 @@ const ServiceCard = ({ serviceData, isDiffMode, preState, state }: ServiceCardPr
               {activeTab === 'lookup-history' && lookupHistoryQuery.renderQueryInput()}
             </div>
 
+            <TabsContent value="info" className="mt-0">
+              <ServiceInfo serviceData={serviceData} preState={preState} state={state} isDiffMode={isDiffMode} />
+            </TabsContent>
             <TabsContent value="storage" className="mt-0">
               {storageQuery.renderResults()}
             </TabsContent>

src/components/service/serviceUtils.tsx

@@ -190,7 +190,17 @@ function detectServiceEntryType(serviceId: number, key: string, value: string):
     };
 }
 
-export const discoverServiceEntries = (state: RawState, serviceId: number) => {
+export const cache = new Map<RawState, Map<number, ServiceEntryType[]>>();
+
+export const discoverServiceEntries = (state: RawState, serviceId: number): ServiceEntryType[] => {
+  // check cached entries
+  const cachedState = cache.get(state) ?? new Map();
+  cache.set(state, cachedState);
+  const serviceEntities = cachedState.get(serviceId);
+  if (serviceEntities !== undefined) {
+    return serviceEntities;
+  }
+
   // detect service info & preimages
   const initialEntries = Object.entries(state)
     .map(([key, value]) => detectServiceEntryType(serviceId, key, value))
@@ -221,12 +231,14 @@ export const discoverServiceEntries = (state: RawState, serviceId: number) => {
   }
 
   // filter out storage-or-lookups that are now duplicated
-  return allEntries.filter(v => {
+  const foundEntries = allEntries.filter(v => {
     if (v.kind === 'storage-or-lookup' && detectedLookups.has(v.key)) {
       return false;
     }
     return true;
   });
+  cachedState.set(serviceId, foundEntries);
+  return foundEntries;
 }
 
 export const getServiceChangeType = (serviceData: ServiceData): 'added' | 'removed' | 'changed' | 'normal' => {

src/components/ui/Tabs.tsx

@@ -46,7 +46,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     role="tablist"
     className={cn(
-      "inline-flex items-center justify-center rounded-lg bg-muted py-1 text-muted-foreground gap-1",
+      "inline-flex items-center justify-center rounded-lg bg-muted dark-bg-background py-1 text-muted-foreground gap-1",
       className
     )}
     {...props}
@@ -69,7 +69,8 @@ const TabsTrigger = React.forwardRef<
       role="tab"
       aria-selected={isActive}
       data-state={isActive ? "active" : "inactive"}
-      variant={isActive ? "default" : "outline"}
+      variant={isActive ? "primary" : "tertiary"}
+      intent='neutralStrong'
       size="sm"
       className={cn(
         "rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",

src/components/viewer/CompositeViewer.tsx

@@ -27,7 +27,7 @@ const CompositeViewer = ({ value, rawValue, showModeToggle = false, showBytesLen
           size="sm"
           disabled={displayMode === 'decoded'}
           className={displayMode === 'decoded' ? 'underline' : ''}
-          variant="link"
+          variant="ghost"
           onClick={() => setDisplayMode('decoded')}
         >
           Decoded
@@ -36,7 +36,7 @@ const CompositeViewer = ({ value, rawValue, showModeToggle = false, showBytesLen
           size="sm"
           disabled={displayMode === 'raw'}
           className={displayMode === 'raw' ? 'underline' : ''}
-          variant="link"
+          variant="ghost"
           onClick={() => setDisplayMode('raw')}
         >
           Raw
@@ -45,7 +45,7 @@ const CompositeViewer = ({ value, rawValue, showModeToggle = false, showBytesLen
           size="sm"
           disabled={displayMode === 'string'}
           className={displayMode === 'string' ? 'underline' : ''}
-          variant="link"
+          variant="ghost"
           onClick={() => setDisplayMode('string')}
         >
           String

src/components/viewer/utils.ts

@@ -32,7 +32,6 @@ export function toSmartString(item: unknown, options: {
   }
 
   if (item instanceof Map) {
-    console.log(item);
     return `{${Array.from(item.entries()).map(([k, v]) => `${shortenString(k)}: ${toSmartString(v, options)}`).join(', ')}}`;
   }
 

src/trie/components/ExamplesModal.tsx

@@ -157,7 +157,7 @@ function ExamplesModal({ onSelect, button }: ExampleModalProps) {
             {examples.map((example, index) => (
               <div key={index} className="flex justify-between items-center">
                 <span>{example.name}</span>
-                <Button variant="outlineBrand" onClick={() => handleSelectExample(example.rows)}>
+                <Button variant="primary" onClick={() => handleSelectExample(example.rows)}>
                   Select
                 </Button>
               </div>