feat: add IsHoldingSomething status to gripper widget (#64)

[claude]

Adds an IsHoldingSomething status indicator to the gripper test widget so users can see whether the gripper is currently holding an object, surfacing the isHoldingSomething API that was previously not exposed in the UI.

Closes #64

Frontend

• is-holding-something.svelte — new component that polls isHoldingSomething on the GripperClient every 500ms via createResourceQuery and renders a StatusPill showing "Holding" (active/green) or "Empty" (idle/default).
• gripper.svelte — adds the IsHoldingSomething component to the right sidebar, below IsMoving.

Testing

• Added unit tests in src/lib/components/widgets/gripper/__tests__/is-holding-something.spec.ts that verify the component renders the correct status text for both holding and empty states, and that it creates the query with the correct method name and polling interval.
• Ran pnpm lint, pnpm check, and pnpm test (208 tests passing).

DRI

@DTCurrie is the responsible engineer for this PR.

[changeset-bot]

🦋 Changeset detected

Latest commit: 10de688

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@viamrobotics/test-widgets	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[DTCurrie]

[mattmacf98]

Code looks fine, not sure why we put those functions in their own files now is all

[mattmacf98]

Nit: why move these out into their own files?

[DTCurrie]

they were causing circular dependencies as we were importing them from sibling files. We recently started exporting all of this in the bundle so we don't have to maintain the same client map in app.

[mattmacf98]

What’s this one from?

[DTCurrie]

The patch? I had to fix the circular dep referenced in the other issue. It was from a previous pr but broke things in the playground and is one of the blockers for bumping in app.

[claude]

Claude finished @DTCurrie's task in 2m 31s —— View job

---

PR Review

• Read review comments and gather context
• Run git diff origin/main...HEAD to inspect all changes
• Read changed files
• Analyze code for correctness, patterns, tests, and API design
• Post review findings

---

Overall the PR is well-structured. The IsHoldingSomething component correctly mirrors the polling pattern used by IsMoving, the circular-import fix is clean and minimal, and the screenshot confirms it renders correctly. A couple of things worth noting:

Medium — as never in tests suppresses type checking

as never is used three times to cast mock return values past TypeScript. This papers over a real type mismatch: createResourceQuery returns a specific reactive query type, but the mock returns a plain object. The right fix is to type the mock explicitly:

vi.mock('@viamrobotics/svelte-sdk', () => ({
  createResourceClient: vi.fn(() => ({ current: {} })),
  createResourceQuery: vi.fn(),
}))

…and then mockReturnValue with a Partial<> cast, or match the actual query type. Using as never tells TypeScript "trust me" and hides future breakage if the return type changes.

Minor — tests cover labels but not icon switching

The three tests verify the StatusPill text ("Holding" / "Empty") and the query setup, but the icon branch (ClosedGripperSvg / OpenGripperSvg) is not exercised. If the SVGs have distinguishable attributes (e.g. a title, aria-label, or data-testid), adding two quick assertions would lock in that behavior. If they're purely decorative with no accessible name, a getByRole('img') check on presence is enough.

Minor — loading state shows OpenGripperSvg

When query.data is undefined (during the first fetch), {#if query.data} is falsy, so OpenGripperSvg renders. This is almost certainly fine because the Query wrapper renders a skeleton/loading indicator instead of its children during isLoading: true — but it's worth a quick double-check against how Query behaves when data is undefined but loading is also false (e.g. initial mount before the first interval fires). If Query shows children in that state, the icon would flicker to "open" before the first real result arrives.

Changeset note

The two changesets (bumpy-sheep-sneeze for the circular-import patch, violet-pets-sleep for the feature minor) are correct — the circular-import fix is a separate, independent change and deserves its own version entry. mattmacf98's question about bumpy-sheep-sneeze is fully answered by DTCurrie's inline response.

---

Overall: LGTM with the nits above. The as never cast is the only thing I'd push back on before merge.

[claude]

Claude finished @DTCurrie's task in 2m 20s —— View job

---

PR Review

• Read CLAUDE.md and review comments
• Run git diff origin/main...HEAD to inspect all changes
• Read changed files
• Analyze code for correctness, patterns, tests, and API design
• Post review findings

---

Code is clean and follows existing patterns well. No correctness issues.

What's good

is-holding-something.svelte — correctly mirrors the structure of is-moving.svelte. Arrow-function prop accessors (() => partID, () => resourceName) are the right way to pass reactive props to createResourceClient without needing $derived since the client class is hardcoded (unlike is-moving.svelte where the class is a variable prop). The query.data ?? false guard on StatusPill handles the initial undefined loading state correctly.

Circular dep fix — clean solution. Extracting getResourceAPI and getResourceKey to their own single-purpose files (get-resource-api.ts, get-resource-key.ts) breaks the cycle without introducing indirection. Public API surface is unchanged (getResourceAPI is still re-exported from index.ts; getResourceKey was never public).

Two changesets — correctly separates the patch (circular dep fix) from the minor (new widget), which was the right call.

Tests — cover holding, not-holding, and the query configuration. Since Query handles loading/error rendering internally, not testing those states here is acceptable.

Nit

Test file naming — is-holding-something.spec.ts should be is-holding-something.svelte.spec.ts. Component render tests (those using render from @testing-library/svelte) use the .svelte.spec.ts suffix in this repo. See inline comment for details.