Arcrun/system-dev/docs/3-specs/arcrun/frontend-redesign/design-source/app.jsx

// App root — screen switcher with persistent route
const { useState, useEffect } = React;

const SCREENS = [
  { id: 'landing', label: 'Landing' },
  { id: 'auth', label: 'Auth' },
  { id: 'dashboard', label: 'Dashboard' },
  { id: 'keys', label: 'API Keys' },
  { id: 'workflow', label: 'Workflow' },
];

// Synonyms from sidebar ids
const aliases = { apps: 'dashboard', workflows: 'dashboard', docs: 'landing', settings: 'keys' };

function App() {
  const [screen, setScreen] = useState(() => {
    const saved = localStorage.getItem('arcrun:screen');
    return saved && SCREENS.some(s => s.id === saved) ? saved : 'landing';
  });

  useEffect(() => {
    localStorage.setItem('arcrun:screen', screen);
    window.scrollTo(0, 0);
  }, [screen]);

  const nav = (id) => {
    const resolved = aliases[id] || id;
    if (SCREENS.some(s => s.id === resolved)) setScreen(resolved);
  };

  const Current = {
    landing: Landing,
    auth: Auth,
    dashboard: Dashboard,
    keys: ApiKeys,
    workflow: WorkflowViewer,
  }[screen];

  return (
    <div className="app">
      <Current onNav={nav} />

      <div className="proto-switch" role="tablist" aria-label="Screen switcher">
        {SCREENS.map(s => (
          <button key={s.id}
                  className={screen === s.id ? 'active' : ''}
                  onClick={() => nav(s.id)}>
            {s.label}
          </button>
        ))}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);