@arach/devbar

The app-ops console kit for React

Add a polished in-app developer toolbar for feature flags, personas, environment context, scenarios, and safe seed/reset actions -- without building a Chrome DevTools clone.

Think Vercel / LaunchDarkly-style toolbar your team owns: provider-neutral, domain-first, safe by default.

DevTools owns the browser (DOM, network, component tree).
Devbar owns product operations while you develop -- reproduce states, switch roles, toggle overrides, run safe actions.

Why teams install this

| Chrome / React DevTools | @arach/devbar | |---|---| | DOM, component tree, props | Product / app controls | | Console, network, profiler | Flags, personas, env, scenarios | | Runtime internals | Team-specific app operations | | Generic debugging | Reproducible product states |

What you get

• Feature lab -- local flag overrides with reset, search, groups, persistence
• Persona lab -- role, plan, locale, entitlements (you wire the values)
• Env / context -- build, tenant, user summary + copy
• Scenarios -- one-click presets ("Pro admin + checkout v2")
• Action runner -- seed, reset, revalidate with confirm for danger
• Kit primitives -- so custom domain panels look first-party

What you don't get (on purpose)

No console log stream, no network inspector, no component tree, no profiler.

Install

npm install @arach/devbar
# or
pnpm add @arach/devbar

Peer dependencies: react and react-dom only. Zero runtime icon library -- chrome icons are inline SVGs. Tab icons are optional React components (e.g. from lucide-react in your app).

Quick start

import {
  DevToolbar,
  DevToolbarFlags,
  useDevToolbarFlags,
  DevToolbarActions,
} from '@arach/devbar';

function App() {
  const defaults = { mockApi: true, newCheckout: false };
  const [flags, setFlags] = useDevToolbarFlags({
    defaults,
    persistKey: 'devbar:flags',
  });

  return (
    <>
      <YourApp flags={flags} />
      <DevToolbar
        title="Ops"
        tabs={[
          {
            id: 'flags',
            label: 'Flags',
            content: (
              <DevToolbarFlags
                flags={[
                  { key: 'mockApi', label: 'Mock API' },
                  { key: 'newCheckout', label: 'New checkout' },
                ]}
                values={flags}
                defaults={defaults}
                onChange={setFlags}
              />
            ),
          },
          {
            id: 'data',
            label: 'Data',
            content: (
              <DevToolbarActions
                actions={[
                  { id: 'seed', label: 'Seed demo data', onClick: seed },
                  { id: 'reset', label: 'Reset', variant: 'danger', onClick: reset },
                ]}
              />
            ),
          },
        ]}
      />
    </>
  );
}

Add personas, scenarios, and env panels the same way -- see the tables below.

Auto-hides outside local development unless hideInProduction={false}. No telemetry. No network calls by default.

Panels

| Panel | Job | |-------|-----| | DevToolbarPresets | One-click product scenarios | | DevToolbarFlags | Local flag overrides (search, groups, reset, persist) | | DevToolbarPersona | Role / plan / locale / entitlement fields | | DevToolbarEnv | Environment + app context + copy summary | | DevToolbarActions | Seed / reset / revalidate with confirm + status | | DevToolbarKV | App context rows (not a state-tree inspector) | | useDevToolbarFlags | Stateful flags + optional localStorage |

Primitives

Build domain panels that look native to the bar:

Section, Info, Button, Toggle, Select, Input, ActionRow, Stack, Empty, Badge, CopyButton

Positioning and chrome

<DevToolbar
  tabs={tabs}
  position="bottom-right" // corners or "pane"
  theme="auto"
  title="Ops"
  hideInProduction
/>

| Prop | Default | Notes | |------|---------|--------| | tabs | required | Your panels | | position | bottom-right | Corners + full-width pane | | theme | auto | dark / light / auto | | hideInProduction | true | Safe by default | | title | Ops | Header label | | width | 380px | Corner panel width | | maxHeight | 440px | Corner panel height | | defaultPaneHeight | 380px | Pane mode height |

Safety

• Hidden outside local/dev hosts by default
• You pass app data in -- nothing is scraped from the browser runtime
• Danger actions confirm before running
• Copy helpers are for non-secret summaries you choose

Not a DevTools replacement

If you need component trees, network waterfalls, or log streams -- use the browser.
If you need flags, personas, scenarios, and seed/reset -- use devbar.

License

MIT -- @arach