Inspector.tsx                  # Generic container
├── FileInspector.tsx         # File variant
├── LocationInspector.tsx     # Location variant
├── DeviceInspector.tsx       # Device variant (future)
├── VolumeInspector.tsx       # Volume variant (future)
└── shared/                   # Shared tab components
    ├── ActivityTab.tsx       # (future)
    └── ChatTab.tsx           # (future)

import { Inspector, type InspectorVariant } from '@sd/interface';

function MyComponent() {
  const [variant, setVariant] = useState<InspectorVariant>(null);

  // When a file is selected
  function handleFileSelect(file: File) {
    setVariant({ type: 'file', file });
  }

  // When a location is viewed (no file selected)
  function handleLocationView(location: LocationInfo) {
    setVariant({ type: 'location', location });
  }

  // Clear selection
  function handleClear() {
    setVariant({ type: 'empty' });
  }

  return (
    <div className="flex">
      <div className="flex-1">...</div>
      <div className="w-[280px]">
        <Inspector
          variant={variant}
          onPopOut={handlePopOut}
          showPopOutButton={true}
        />
      </div>
    </div>
  );
}

type InspectorVariant =
  | { type: 'file'; file: File }
  | { type: 'location'; location: LocationInfo }
  | { type: 'device'; device: DeviceInfo }      // Future
  | { type: 'volume'; volume: VolumeInfo }      // Future
  | { type: 'empty' }
  | null;

// inspectors/DeviceInspector.tsx
import { useState } from 'react';
import { Info, HardDrive } from '@phosphor-icons/react';
import type { DeviceInfo } from '@sd/ts-client';

export function DeviceInspector({ device }: { device: DeviceInfo }) {
  const [activeTab, setActiveTab] = useState('overview');

  const tabs = [
    { id: 'overview', label: 'Overview', icon: Info },
    { id: 'storage', label: 'Storage', icon: HardDrive },
    // ... more tabs
  ];

  return (
    <>
      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
      <div className="flex-1 overflow-hidden flex flex-col mt-2.5">
        <TabContent id="overview" activeTab={activeTab}>
          <OverviewTab device={device} />
        </TabContent>
      </div>
    </>
  );
}

// Inspector.tsx
import { DeviceInspector } from './inspectors/DeviceInspector';

export type InspectorVariant =
  | { type: 'file'; file: File }
  | { type: 'location'; location: LocationInfo }
  | { type: 'device'; device: DeviceInfo }  // Add this
  | { type: 'empty' }
  | null;

// In render:
{variant.type === 'device' ? (
  <DeviceInspector device={variant.device} />
) : ...}