Adding speaker labels under the claims in the UI

ui/claimcheck-ui/src/components/ClaimsTable.tsx

@@ -68,7 +68,18 @@ export function ClaimsTable() {
           <tbody>
             {rows.map((r: any, idx: number) => (
               <tr key={idx} className="border-t">
-                <td className="px-4 py-2 align-top">{r.claim?.text}</td>
+                <td className="px-4 py-2 align-top">
+                  <div>
+                    <div>{r.claim?.text}</div>
+                    {r.claim?.speaker && (
+                      <div className="mt-1">
+                        <span className="inline-flex items-center px-2 py-0.5 rounded-full bg-muted text-xs text-muted-foreground">
+                          {r.claim.speaker}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </td>
                 <td className="px-4 py-2 align-top">
                   {r.verdict && (
                     <span className={`inline-flex items-center px-2 py-1 rounded-md border text-xs ${verdictColor(r.verdict.label)}`}>

ui/claimcheck-ui/src/store/appStore.ts

@@ -10,6 +10,7 @@ export type StepStatus = 'idle' | 'running' | 'done' | 'error'
 export type UIState = {
   tab: 0 | 1 | 2
   filter: 'all' | VerdictLabel
+  speakerFilter: 'all' | string
   evidenceOpen: boolean
   selectedClaimId?: string
 }
@@ -21,6 +22,7 @@ type Store = {
   ui: UIState
   setTab: (tab: 0 | 1 | 2) => void
   setFilter: (f: 'all' | VerdictLabel) => void
+  setSpeakerFilter: (f: 'all' | string) => void
   openEvidence: (claimId: string) => void
   closeEvidence: () => void
   startRun: (kind: InputKind, payload: { file?: File; text?: string }) => Promise<void>
@@ -43,9 +45,10 @@ export const useAppStore = create<Store>()(
       runs: [],
       currentRunId: undefined,
       steps: initialSteps,
-      ui: { tab: 0, filter: 'all', evidenceOpen: false },
+      ui: { tab: 0, filter: 'all', speakerFilter: 'all', evidenceOpen: false },
       setTab: (tab) => set((s) => ({ ui: { ...s.ui, tab } })),
       setFilter: (filter) => set((s) => ({ ui: { ...s.ui, filter } })),
+      setSpeakerFilter: (speakerFilter) => set((s) => ({ ui: { ...s.ui, speakerFilter } })),
       openEvidence: (selectedClaimId) => set((s) => ({ ui: { ...s.ui, evidenceOpen: true, selectedClaimId } })),
       closeEvidence: () => set((s) => ({ ui: { ...s.ui, evidenceOpen: false, selectedClaimId: undefined } })),