Function AddonManagerPage

testing/panel/src/routes/addon-manager.tsx:365–579

()

}

function AddonManagerPage() {
  const [chunks, setChunks] = useState<Array<any>>([])
  const [input, setInput] = useState('')

  // Initialize add-on state
  const [addOnState, setAddOnState] = useState<Record<string, AddOnState>>(
    () => {
      const initial: Record<string, AddOnState> = {}
      for (const addOn of availableAddOns) {
        initial[addOn.id] = { selected: false, enabled: true }
      }
      return initial
    },
  )

  // Toggle add-on selection (for manual UI interaction)
  const toggleAddOn = useCallback((id: string) => {
    setAddOnState((prev) => ({
      ...prev,
      [id]: {
        ...prev[id],
        selected: !prev[id]?.selected,
      },
    }))
  }, [])

  // Client tool 1: Returns current add-on state
  const getAvailableAddOnsClient = useMemo(
    () =>
      getAvailableAddOnsToolDef.client(() => {
        console.log('[Client Tool] getAvailableAddOns called')
        return availableAddOns.map((addOn) => ({
          id: addOn.id,
          name: addOn.name,
          description: addOn.description,
          type: addOn.type,
          selected: addOnState[addOn.id]?.selected ?? false,
          enabled: addOnState[addOn.id]?.enabled ?? true,
        }))
      }),
    [addOnState],
  )

  // Client tool 2: Selects add-ons
  const selectAddOnsClient = useMemo(
    () =>
      selectAddOnsToolDef.client((args) => {
        console.log('[Client Tool] selectAddOns called with:', args)

        // Calculate what will be selected BEFORE calling setState
        // (setState callback is async, so we can't read results from it)
        const toSelect: string[] = []
        for (const addOnId of args.addOnIds) {
          const state = addOnState[addOnId]
          if (state && !state.selected && state.enabled) {
            toSelect.push(addOnId)
          }
        }