krow_talent_app/src/components/agents/skills/SurfaceSelect.tsx

import * as React from 'react';
import { Check, Layers, LayoutTemplate, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * Which surface this capability should run on.
 *
 * This used to be a read-out — two rows saying "✓ Owliver / — Board". It is now
 * the choice it always described, and the constraint is the important part:
 * **what can be picked is derived from the definition, never from a name.** A
 * skill's facets say whether it teaches Owliver, draws on a page, or both, and
 * an option the definition does not support is offered disabled with the reason
 * rather than hidden — a reader deciding between surfaces should be able to see
 * that the other one exists and why it is not available here.
 *
 * `Both` appears only when the definition genuinely supports both. Selecting it
 * forks nothing: there is one logical skill, and this is a mode on it.
 */

const OPTIONS = [
  {
    id: 'owliver',
    icon: Sparkles,
    label: 'Owliver',
    hint: 'Can be asked for in the assistant.',
    supported: (type) => type === 'owliver' || type === 'both',
  },
  {
    id: 'board',
    icon: LayoutTemplate,
    label: 'Board',
    hint: 'Draws a section on the page.',
    supported: (type) => type === 'board' || type === 'both',
  },
  {
    id: 'both',
    icon: Layers,
    label: 'Both',
    hint: 'Assistant and page.',
    supported: (type) => type === 'both',
  },
];

/** The surfaces this definition can be run on, in order. */
export const supportedSurfaces = (type) =>
  OPTIONS.filter((o) => o.supported(type)).map((o) => o.id);

export function SurfaceSelect({ type, value, onChange, name }: any) {
  return (
    <div role="radiogroup" aria-label={`Run ${name} as`} className="space-y-1.5">
      {OPTIONS.map((option) => {
        const available = option.supported(type);
        const selected = available && value === option.id;
        const Icon = option.icon;

        return (
          <button
            key={option.id}
            type="button"
            role="radio"
            aria-checked={selected}
            disabled={!available}
            onClick={() => available && onChange(option.id)}
            className={cn(
              `flex w-full items-start gap-2 rounded-xl border px-2.5 py-2 text-left
               transition-colors duration-base focus-visible:outline-none
               focus-visible:ring-2 focus-visible:ring-krow-blue/40`,
              !available && 'cursor-not-allowed border-dashed border-border bg-surface-subtle/40',
              available && !selected && 'border-border bg-surface hover:border-krow-blue/30',
              selected && 'border-krow-blue bg-krow-blue-tint'
            )}
          >
            {/* The mark carries the state for anyone not reading colour; the
                `aria-checked` above carries it for anyone not reading at all. */}
            <span
              className={cn(
                'mt-px grid h-4 w-4 shrink-0 place-items-center rounded-full border',
                selected ? 'border-krow-blue bg-krow-blue text-white' : 'border-border bg-surface'
              )}
              aria-hidden="true"
            >
              {selected && <Check className="h-2.5 w-2.5" />}
            </span>

            <span className="min-w-0 flex-1">
              <span
                className={cn(
                  'flex items-center gap-1.5 text-body-sm font-medium',
                  !available ? 'text-ink-4' : selected ? 'text-krow-blue' : 'text-ink-1'
                )}
              >
                <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                {option.label}
              </span>
              <span className="mt-0.5 block text-caption leading-snug text-ink-3">
                {available
                  ? option.hint
                  : `This capability does not declare ${option.id === 'both' ? 'both surfaces' : `a ${option.label} surface`}.`}
              </span>
            </span>
          </button>
        );
      })}
    </div>
  );
}

export default SurfaceSelect;