feat: add multi-host machine filtering and labels (#227)

## Summary
- add true multi-select machine filtering end to end so the machine
filter supports 1..N selected hosts
- render each session's machine/hostname as a compact secondary line
under the agent area in the sidebar
- make machine filter selected state explicit with the same
checkbox-style treatment used for multi-select filters

## Test Plan
- [x] `cd frontend && npm run check`
- [x] `cd frontend && npm test`
- [x] `CC=gcc go test ./internal/db -run
TestSessionFilterMachineMultiSelect -count=1`
- [x] `CC=gcc go test -tags pgtest ./internal/postgres -run
TestStoreListSessions_MachineMultiSelect -count=1`
- [x] manual PG-backed review of the PR build against the real
multi-host dataset (`dgx`, `nv1`, `spark`) via `./agentsview pg serve
-host 127.0.0.1 -port 18081`

Closes #220.

Author: tpn

frontend/src/lib/api/client.test.ts

@@ -568,6 +568,14 @@ describe("query serialization", () => {
         },
         expected: "/api/v1/sessions",
       },
+      {
+        name: "preserves comma-separated machine filters",
+        params: {
+          machine: "host-a,host-b,host-c",
+        },
+        expected:
+          "/api/v1/sessions?machine=host-a%2Chost-b%2Chost-c",
+      },
     ];
 
     for (const { name, params, expected } of cases) {

frontend/src/lib/components/sidebar/SessionItem.svelte

@@ -61,6 +61,12 @@
     getAgentColor(session.agent),
   );
 
+  let showMachine = $derived(
+    !compact &&
+    !!session.machine &&
+    session.machine !== "local",
+  );
+
   /** Whether this session is a team member (received a <teammate-message>). */
   let isTeamSession = $derived(
     session.first_message?.includes("<teammate-message") ?? false,
@@ -325,8 +331,17 @@
       {/if}
     </button>
   {/if}
-  {#if !hideAgent && !compact}
-    <span class="agent-tag" style:color={agentColor}>{session.agent}</span>
+  {#if !compact && (!hideAgent || showMachine)}
+    <div class="side-meta">
+      {#if !hideAgent}
+        <span class="agent-tag" style:color={agentColor}>{session.agent}</span>
+      {/if}
+      {#if showMachine}
+        <span class="machine-tag" title={session.machine}>
+          {truncate(session.machine, 18)}
+        </span>
+      {/if}
+    </div>
   {/if}
 </div>
 
@@ -449,9 +464,18 @@
     }
   }
 
+  .side-meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+    min-width: 0;
+    flex-shrink: 0;
+    margin-left: 4px;
+  }
+
   /* Agent tag on the right side */
   .agent-tag {
-    flex-shrink: 0;
     font-size: 8px;
     font-weight: 600;
     text-transform: uppercase;
@@ -464,6 +488,17 @@
     text-overflow: ellipsis;
   }
 
+  .machine-tag {
+    font-size: 9px;
+    line-height: 1;
+    color: var(--text-muted);
+    opacity: 0.9;
+    white-space: nowrap;
+    max-width: 74px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .session-info {
     min-width: 0;
     flex: 1;

frontend/src/lib/components/sidebar/SessionList.svelte

@@ -499,17 +499,23 @@
             {#each sortedAgents as agent (agent.name)}
               {@const selected =
                 sessions.isAgentSelected(agent.name)}
-              <button
-                class="agent-select-row"
-                class:selected
-                style:--agent-color={agentColor(agent.name)}
-                onclick={() =>
-                  sessions.toggleAgentFilter(agent.name)}
-              >
-                <span
-                  class="agent-check"
-                  class:on={selected}
-                ></span>
+                <button
+                  class="agent-select-row"
+                  class:selected
+                  style:--agent-color={agentColor(agent.name)}
+                  onclick={() =>
+                    sessions.toggleAgentFilter(agent.name)}
+                >
+                  <span
+                    class="agent-check"
+                    class:on={selected}
+                  >
+                    {#if selected}
+                      <svg width="8" height="8" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                        <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+                      </svg>
+                    {/if}
+                  </span>
                 <span
                   class="agent-dot-mini"
                   style:background={agentColor(agent.name)}
@@ -542,17 +548,24 @@
             <div class="agent-select-list">
               {#each sortedMachines as machine (machine)}
                 {@const selected =
-                  sessions.filters.machine === machine}
+                  sessions.isMachineSelected(machine)}
                 <button
                   class="agent-select-row"
                   class:selected
+                  style:--agent-color={"var(--accent-blue)"}
                   onclick={() =>
-                    sessions.setMachineFilter(machine)}
+                    sessions.toggleMachineFilter(machine)}
                 >
                   <span
                     class="agent-check"
                     class:on={selected}
-                  ></span>
+                  >
+                    {#if selected}
+                      <svg width="8" height="8" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                        <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+                      </svg>
+                    {/if}
+                  </span>
                   <span class="agent-select-name">
                     {machine}
                   </span>
@@ -912,8 +925,13 @@
   }
 
   .agent-select-row.selected {
-    color: var(--agent-color);
+    color: var(--agent-color, var(--accent-blue));
     font-weight: 500;
+    background: color-mix(
+      in srgb,
+      var(--agent-color, var(--accent-blue)) 10%,
+      transparent
+    );
   }
 
   .agent-check {
@@ -923,11 +941,15 @@
     border: 1.5px solid var(--border-default);
     flex-shrink: 0;
     transition: background 0.1s, border-color 0.1s;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .agent-check.on {
-    background: var(--agent-color);
-    border-color: var(--agent-color);
+    background: var(--agent-color, var(--accent-blue));
+    border-color: var(--agent-color, var(--accent-blue));
   }
 
   .agent-dot-mini {

frontend/src/lib/stores/sessions.svelte.ts

@@ -470,6 +470,31 @@ class SessionsStore {
     this.load();
   }
 
+  toggleMachineFilter(machine: string) {
+    const current = this.filters.machine
+      ? this.filters.machine.split(",")
+      : [];
+    const idx = current.indexOf(machine);
+    if (idx >= 0) {
+      current.splice(idx, 1);
+    } else {
+      current.push(machine);
+    }
+    this.filters.machine = current.join(",");
+    this.setActiveSession(null);
+    this.load();
+  }
+
+  isMachineSelected(machine: string): boolean {
+    if (!this.filters.machine) return false;
+    return this.filters.machine.split(",").includes(machine);
+  }
+
+  get selectedMachines(): string[] {
+    if (!this.filters.machine) return [];
+    return this.filters.machine.split(",");
+  }
+
   setAgentFilter(agent: string) {
     if (this.filters.agent === agent) {
       this.filters.agent = "";

frontend/src/lib/stores/sessions.test.ts

@@ -487,6 +487,11 @@ describe("SessionsStore", () => {
       expect(sessions.hasActiveFilters).toBe(false);
     });
 
+    it("should be true when machine filter is set", () => {
+      sessions.filters.machine = "host-a";
+      expect(sessions.hasActiveFilters).toBe(true);
+    });
+
     it("should be true when agent filter is set", () => {
       sessions.filters.agent = "claude";
       expect(sessions.hasActiveFilters).toBe(true);
@@ -529,6 +534,69 @@ describe("SessionsStore", () => {
     });
   });
 
+  describe("machine filter", () => {
+    it("should toggle one machine on and serialize it", async () => {
+      sessions.toggleMachineFilter("host-a");
+      await vi.waitFor(() => {
+        expect(api.listSessions).toHaveBeenCalled();
+      });
+
+      expect(sessions.filters.machine).toBe("host-a");
+      expect(sessions.selectedMachines).toEqual(["host-a"]);
+      expect(sessions.isMachineSelected("host-a")).toBe(true);
+      expectListSessionsCalledWith({ machine: "host-a" });
+    });
+
+    it("should allow multiple selected machines", async () => {
+      sessions.toggleMachineFilter("host-a");
+      await vi.waitFor(() => {
+        expect(api.listSessions).toHaveBeenCalledTimes(1);
+      });
+
+      sessions.toggleMachineFilter("host-b");
+      await vi.waitFor(() => {
+        expect(api.listSessions).toHaveBeenCalledTimes(2);
+      });
+
+      expect(sessions.filters.machine).toBe("host-a,host-b");
+      expect(sessions.selectedMachines).toEqual([
+        "host-a",
+        "host-b",
+      ]);
+      expect(sessions.isMachineSelected("host-b")).toBe(true);
+      expectListSessionsCalledWith({
+        machine: "host-a,host-b",
+      });
+    });
+
+    it("should toggle an already-selected machine off", async () => {
+      sessions.filters.machine = "host-a,host-b";
+
+      sessions.toggleMachineFilter("host-a");
+      await vi.waitFor(() => {
+        expect(api.listSessions).toHaveBeenCalled();
+      });
+
+      expect(sessions.filters.machine).toBe("host-b");
+      expect(sessions.selectedMachines).toEqual(["host-b"]);
+      expect(sessions.isMachineSelected("host-a")).toBe(false);
+      expectListSessionsCalledWith({ machine: "host-b" });
+    });
+
+    it("should clear the filter when the last machine is removed", async () => {
+      sessions.filters.machine = "host-a";
+
+      sessions.toggleMachineFilter("host-a");
+      await vi.waitFor(() => {
+        expect(api.listSessions).toHaveBeenCalled();
+      });
+
+      expect(sessions.filters.machine).toBe("");
+      expect(sessions.selectedMachines).toEqual([]);
+      expectListSessionsCalledWith({ machine: undefined });
+    });
+  });
+
   describe("navigateSession", () => {
     function seedSessions(store: typeof sessions) {
       store.sessions = [

internal/db/filter_test.go

@@ -237,6 +237,51 @@ func TestSessionFilterExcludeProject(t *testing.T) {
 	}
 }
 
+func TestSessionFilterMachineMultiSelect(t *testing.T) {
+	d := testDB(t)
+
+	insertSession(t, d, "laptop", "proj", func(s *Session) {
+		s.Machine = "laptop"
+		s.MessageCount = 5
+	})
+	insertSession(t, d, "desktop", "proj", func(s *Session) {
+		s.Machine = "desktop"
+		s.MessageCount = 5
+	})
+	insertSession(t, d, "server", "proj", func(s *Session) {
+		s.Machine = "server"
+		s.MessageCount = 5
+	})
+
+	tests := []struct {
+		name   string
+		filter SessionFilter
+		want   []string
+	}{
+		{
+			name:   "SingleMachine",
+			filter: SessionFilter{Machine: "laptop"},
+			want:   []string{"laptop"},
+		},
+		{
+			name:   "MultipleMachines",
+			filter: SessionFilter{Machine: "laptop,server"},
+			want:   []string{"laptop", "server"},
+		},
+		{
+			name:   "UnknownMachineIgnored",
+			filter: SessionFilter{Machine: "desktop,unknown"},
+			want:   []string{"desktop"},
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			requireSessions(t, d, tt.filter, tt.want)
+		})
+	}
+}
+
 func TestListSessionsExcludesRelationshipTypes(t *testing.T) {
 	d := testDB(t)
 

internal/db/sessions.go

@@ -232,8 +232,23 @@ func buildSessionFilter(f SessionFilter) (string, []any) {
 		filterArgs = append(filterArgs, f.ExcludeProject)
 	}
 	if f.Machine != "" {
-		filterPreds = append(filterPreds, "machine = ?")
-		filterArgs = append(filterArgs, f.Machine)
+		machines := strings.Split(f.Machine, ",")
+		if len(machines) == 1 {
+			filterPreds = append(filterPreds, "machine = ?")
+			filterArgs = append(filterArgs, machines[0])
+		} else {
+			placeholders := make(
+				[]string, len(machines),
+			)
+			for i, m := range machines {
+				placeholders[i] = "?"
+				filterArgs = append(filterArgs, m)
+			}
+			filterPreds = append(filterPreds,
+				"machine IN ("+
+					strings.Join(placeholders, ",")+
+					")")
+		}
 	}
 	if f.Agent != "" {
 		agents := strings.Split(f.Agent, ",")

internal/postgres/sessions.go

@@ -129,8 +129,21 @@ func buildPGSessionFilter(
 			"project != "+pb.add(f.ExcludeProject))
 	}
 	if f.Machine != "" {
-		filterPreds = append(filterPreds,
-			"machine = "+pb.add(f.Machine))
+		machines := strings.Split(f.Machine, ",")
+		if len(machines) == 1 {
+			filterPreds = append(filterPreds,
+				"machine = "+pb.add(machines[0]))
+		} else {
+			placeholders := make([]string, len(machines))
+			for i, m := range machines {
+				placeholders[i] = pb.add(m)
+			}
+			filterPreds = append(filterPreds,
+				"machine IN ("+
+					strings.Join(placeholders, ",")+
+					")",
+			)
+		}
 	}
 	if f.Agent != "" {
 		agents := strings.Split(f.Agent, ",")