feat(ui/dictionary): add feature index input and update dictionary select styling

Author: dest1n1s

ui-ssr/src/components/dictionary/dictionary-select.tsx

@@ -146,7 +146,7 @@ const DictionarySelect = memo(
       <Select open={open} onOpenChange={setOpen}>
         <SelectTrigger
           className={cn(
-            'flex h-12 w-[400px] items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 select-none',
+            'flex h-12 w-[400px] items-center justify-between rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 select-none',
           )}
         >
           <div className="flex flex-col items-start text-left gap-0.5">

ui-ssr/src/routes/dictionaries.$dictionaryName.index.tsx

@@ -4,6 +4,7 @@ import { DictionaryCard } from '@/components/dictionary/dictionary-card'
 import { Button } from '@/components/ui/button'
 import { fetchAdminSaes } from '@/api/admin'
 import { DictionarySelect } from '@/components/dictionary/dictionary-select'
+import { LabeledInput } from '@/components/ui/labeled-input'
 
 export const Route = createFileRoute('/dictionaries/$dictionaryName/')({
   component: DictionaryIndexPage,
@@ -23,6 +24,7 @@ function DictionaryIndexPage() {
   const { saes, dictionaryName } = Route.useLoaderData()
 
   const [selectedDictionary, setSelectedDictionary] = useState(dictionaryName)
+  const [selectedFeatureIndex, setSelectedFeatureIndex] = useState('0')
 
   return (
     <div className="h-full overflow-y-auto pt-4 pb-20 px-20 flex flex-col items-center gap-6">
@@ -46,6 +48,31 @@ function DictionaryIndexPage() {
               Go
             </Button>
           )}
+
+          <div className="w-[100px] ml-4">
+            <LabeledInput
+              label="Index"
+              id="feature-input"
+              value={selectedFeatureIndex}
+              onChange={(e) => setSelectedFeatureIndex(e.target.value)}
+            />
+          </div>
+
+          {!isNaN(Number(selectedFeatureIndex)) ? (
+            <Link
+              to="/dictionaries/$dictionaryName/features/$featureIndex"
+              params={{
+                dictionaryName: selectedDictionary,
+                featureIndex: selectedFeatureIndex,
+              }}
+            >
+              <Button className="h-12 px-4">View Feature</Button>
+            </Link>
+          ) : (
+            <Button className="h-12 px-4" disabled>
+              View Feature
+            </Button>
+          )}
         </div>
       </div>
       <DictionaryCard dictionaryName={dictionaryName} />

ui-ssr/src/utils/circuit.ts

@@ -61,6 +61,8 @@ export function formatFeatureId(node: Node, verbose: boolean = true): string {
     return `A${Math.floor(layerIdx / 2)}Error@${node.ctxIdx}`
   } else if (node.featureType === 'logit') {
     return `Logit@${node.ctxIdx}: ${node.token} (${(node.tokenProb * 100).toFixed(1)}%)`
+  } else if (node.featureType === 'bias') {
+    return `Bias@${node.ctxIdx}`
   }
   return 'Unknown feature type'
 }