arboretum/packages/web/src/views/help-content.ts

// Contenu de l'onglet Aide, bilingue. Texte long-format → gardé hors des fichiers i18n
// (en.ts/fr.ts) pour ne pas les alourdir. HelpView mappe chaque `id` vers une icône Lucide.
import type { AppLocale } from '../i18n';

export interface HelpItem {
  title: string;
  body: string;
}
export interface HelpSection {
  id: string;
  title: string;
  blurb: string;
  items: HelpItem[];
}

const en: HelpSection[] = [
  {
    id: 'gettingStarted',
    title: 'Getting started & access',
    blurb:
      'Arboretum is a single daemon that serves this dashboard to drive your git worktrees and the Claude Code sessions running on them, from any device.',
    items: [
      {
        title: 'Sign in with a token',
        body: 'On first start the daemon prints a one-time access token. Paste it on the login screen. You can create extra tokens (one per device) and revoke old ones in Settings → Access & security.',
      },
      {
        title: 'Remote access via Tailscale Serve',
        body: 'The daemon binds to 127.0.0.1. To reach it from your phone, run tailscale serve --bg 7317 and start Arboretum with --allow-origin https://<machine>.<tailnet>.ts.net. The HTTPS that Tailscale provides is also what makes Web Push work.',
      },
      {
        title: 'Install as an app (PWA)',
        body: 'On mobile, open Arboretum and choose Add to Home Screen. On iOS this install step is required before notifications can work.',
      },
    ],
  },
  {
    id: 'worktrees',
    title: 'Repositories & worktrees',
    blurb: 'Register your git repos, then spin up an isolated worktree per branch — each can auto-start a session.',
    items: [
      {
        title: 'Add a repository',
        body: 'On the Worktrees page, type or browse to the absolute path of a git repo and add it. Per-repo post-create hooks (e.g. npm ci) run automatically on new worktrees.',
      },
      {
        title: 'Create a worktree',
        body: 'In a repo section, click New worktree, enter a branch (optionally create it), and optionally start a claude or bash session in it. Hooks run automatically.',
      },
      {
        title: 'Read worktree state',
        body: 'Each card shows the branch, ahead/behind counts, dirty file count and flags (main, locked, prunable), plus the live state of any linked session.',
      },
      {
        title: 'Delete & prune',
        body: 'Delete a worktree from its card (force-delete if dirty or locked), or prune all orphaned worktrees at the repo level.',
      },
    ],
  },
  {
    id: 'sessions',
    title: 'Sessions & the web terminal',
    blurb: 'Run, observe, resume and answer Claude Code (or bash) sessions in a full xterm terminal, right in the browser.',
    items: [
      {
        title: 'Start a session',
        body: 'On the Sessions page, set a working directory and a command (claude or bash) and launch. Open it to get an interactive terminal.',
      },
      {
        title: 'Discovered sessions',
        body: 'Sessions you start in your own terminal are detected automatically and tagged as discovered. Observe them read-only, or resume/fork them once stopped.',
      },
      {
        title: 'Resume & fork',
        body: 'Resume restarts a stopped session in its original working directory, with full scrollback replayed. Fork creates a fresh independent copy with the same command and cwd.',
      },
      {
        title: 'Observe vs interact',
        body: 'Anyone opening a live session can type; open it as an observer for read-only monitoring that never slows the session down.',
      },
      {
        title: 'Fine-grained state',
        body: 'Managed Claude sessions report waiting / busy / idle in real time. Waiting sessions are surfaced first and can trigger notifications.',
      },
      {
        title: 'Kill a session',
        body: 'Kill a live session from its row (confirm to avoid accidents); it receives SIGTERM, then SIGKILL after a short grace delay.',
      },
    ],
  },
  {
    id: 'mobile',
    title: 'Mobile supervision',
    blurb: 'Keep sessions moving from your phone, without opening a terminal.',
    items: [
      {
        title: 'Needs attention',
        body: 'A banner at the top of the dashboard lists every session blocked on a dialog, with inline answer buttons.',
      },
      {
        title: 'Answer dialogs',
        body: 'When Claude asks for trust, a permission or a choice, pick an option (or Deny) right from the card — no terminal needed.',
      },
      {
        title: 'Web Push notifications',
        body: 'Enable notifications in Settings (or the footer bell). You get a push when a session starts waiting; tap it to answer. Requires HTTPS; on iOS, install the app first.',
      },
    ],
  },
  {
    id: 'groups',
    title: 'Work groups',
    blurb: 'Bundle related repos (API, web, shared lib…) and operate on them together.',
    items: [
      {
        title: 'Create a group',
        body: 'On the Groups page, name a group and pick its repos. Membership is lightweight and editable anytime.',
      },
      {
        title: 'List vs terminal grid',
        body: 'A group view shows all its repos worktrees and sessions as a list, or switch to the terminal grid to watch several live sessions side by side.',
      },
      {
        title: 'Cross-repo feature',
        body: 'Create the same worktree (and an optional session) across every repo of the group in one action; partial failures can be retried per repo.',
      },
    ],
  },
  {
    id: 'productivity',
    title: 'Productivity',
    blurb: 'Find anything fast and tailor each list.',
    items: [
      {
        title: 'Command palette',
        body: 'Press ⌘K (or Ctrl+K) to fuzzy-jump to any repo, worktree, session or group, or to run a quick action.',
      },
      {
        title: 'Sort, filter & search',
        body: 'Every list has a toolbar to sort, filter (state, command, source, flags…) and search. Your choices persist in the URL, so links are shareable.',
      },
      {
        title: 'Pagination',
        body: 'Long lists are paginated with a configurable page size; choose All to show everything at once.',
      },
      {
        title: 'Language',
        body: 'Switch the interface between English and French anytime, from Settings or the footer.',
      },
    ],
  },
  {
    id: 'settings',
    title: 'Settings & security',
    blurb: 'Configure the app and manage who can reach the daemon.',
    items: [
      {
        title: 'Notifications',
        body: 'Enable or disable Web Push and send a test notification from Settings → Preferences.',
      },
      {
        title: 'Access tokens',
        body: 'Create a token per device and revoke any you no longer trust. A new token value is shown only once — copy it immediately. The last active token cannot be revoked, to avoid locking yourself out.',
      },
      {
        title: 'Server info',
        body: 'Settings → Server shows the running version and the startup configuration (port, bind, allowed origins, data directory, VAPID). These are set via CLI flags and need a daemon restart to change.',
      },
    ],
  },
  {
    id: 'integrations',
    title: 'Integrations',
    blurb: 'Shortcuts to the tools around your repos.',
    items: [
      {
        title: 'Source code',
        body: 'The “Source code” icon in the navigation always links to the Arboretum source repository on Gitea.',
      },
    ],
  },
];

const fr: HelpSection[] = [
  {
    id: 'gettingStarted',
    title: 'Prise en main & accès',
    blurb:
      'Arboretum est un daemon unique qui sert ce dashboard pour piloter vos worktrees git et les sessions Claude Code qui tournent dessus, depuis n’importe quel appareil.',
    items: [
      {
        title: 'Se connecter avec un jeton',
        body: 'Au premier démarrage, le daemon affiche un jeton d’accès à usage unique. Collez-le sur l’écran de connexion. Vous pouvez créer des jetons supplémentaires (un par appareil) et révoquer les anciens dans Réglages → Accès & sécurité.',
      },
      {
        title: 'Accès distant via Tailscale Serve',
        body: 'Le daemon écoute sur 127.0.0.1. Pour y accéder depuis votre téléphone, lancez tailscale serve --bg 7317 et démarrez Arboretum avec --allow-origin https://<machine>.<tailnet>.ts.net. Le HTTPS fourni par Tailscale est aussi ce qui permet au Web Push de fonctionner.',
      },
      {
        title: 'Installer comme une app (PWA)',
        body: 'Sur mobile, ouvrez Arboretum et choisissez Ajouter à l’écran d’accueil. Sur iOS, cette installation est requise avant que les notifications puissent fonctionner.',
      },
    ],
  },
  {
    id: 'worktrees',
    title: 'Dépôts & worktrees',
    blurb: 'Enregistrez vos dépôts git, puis créez un worktree isolé par branche — chacun peut démarrer une session automatiquement.',
    items: [
      {
        title: 'Ajouter un dépôt',
        body: 'Sur la page Worktrees, saisissez (ou parcourez) le chemin absolu d’un dépôt git et ajoutez-le. Les hooks post-création par dépôt (ex. npm ci) s’exécutent automatiquement sur les nouveaux worktrees.',
      },
      {
        title: 'Créer un worktree',
        body: 'Dans une section de dépôt, cliquez sur Nouveau worktree, saisissez une branche (à créer éventuellement) et démarrez si besoin une session claude ou bash. Les hooks s’exécutent automatiquement.',
      },
      {
        title: 'Lire l’état d’un worktree',
        body: 'Chaque carte affiche la branche, l’avance/le retard, le nombre de fichiers modifiés et des indicateurs (main, verrouillé, élagable), ainsi que l’état en direct de la session liée.',
      },
      {
        title: 'Supprimer & élaguer',
        body: 'Supprimez un worktree depuis sa carte (suppression forcée s’il est sale ou verrouillé), ou élaguez tous les worktrees orphelins au niveau du dépôt.',
      },
    ],
  },
  {
    id: 'sessions',
    title: 'Sessions & terminal web',
    blurb: 'Lancez, observez, reprenez et répondez aux sessions Claude Code (ou bash) dans un vrai terminal xterm, directement dans le navigateur.',
    items: [
      {
        title: 'Démarrer une session',
        body: 'Sur la page Sessions, indiquez un répertoire de travail et une commande (claude ou bash) puis lancez. Ouvrez-la pour obtenir un terminal interactif.',
      },
      {
        title: 'Sessions découvertes',
        body: 'Les sessions lancées dans votre propre terminal sont détectées automatiquement et marquées « découvertes ». Observez-les en lecture seule, ou reprenez/forkez-les une fois arrêtées.',
      },
      {
        title: 'Reprendre & forker',
        body: 'Reprendre relance une session arrêtée dans son répertoire d’origine, avec tout l’historique rejoué. Forker crée une copie indépendante neuve avec la même commande et le même cwd.',
      },
      {
        title: 'Observer ou interagir',
        body: 'Quiconque ouvre une session vivante peut écrire ; ouvrez-la en observateur pour une supervision en lecture seule qui ne ralentit jamais la session.',
      },
      {
        title: 'États fins',
        body: 'Les sessions Claude gérées rapportent en temps réel les états en attente / occupé / inactif. Les sessions en attente sont remontées en premier et peuvent déclencher des notifications.',
      },
      {
        title: 'Arrêter une session',
        body: 'Arrêtez une session vivante depuis sa ligne (confirmation pour éviter les accidents) ; elle reçoit SIGTERM, puis SIGKILL après un court délai de grâce.',
      },
    ],
  },
  {
    id: 'mobile',
    title: 'Supervision mobile',
    blurb: 'Faites avancer vos sessions depuis votre téléphone, sans ouvrir de terminal.',
    items: [
      {
        title: 'À traiter',
        body: 'Une bannière en haut du dashboard liste toutes les sessions bloquées sur un dialogue, avec des boutons de réponse en ligne.',
      },
      {
        title: 'Répondre aux dialogues',
        body: 'Quand Claude demande une confiance, une permission ou un choix, sélectionnez une option (ou Refuser) directement depuis la carte — sans terminal.',
      },
      {
        title: 'Notifications Web Push',
        body: 'Activez les notifications dans Réglages (ou via la cloche du pied de page). Vous recevez un push quand une session passe en attente ; touchez-le pour répondre. Exige HTTPS ; sur iOS, installez d’abord l’app.',
      },
    ],
  },
  {
    id: 'groups',
    title: 'Groupes de travail',
    blurb: 'Regroupez des dépôts liés (API, web, lib partagée…) et agissez dessus ensemble.',
    items: [
      {
        title: 'Créer un groupe',
        body: 'Sur la page Groupes, nommez un groupe et choisissez ses dépôts. L’appartenance est légère et modifiable à tout moment.',
      },
      {
        title: 'Liste ou grille de terminaux',
        body: 'La vue d’un groupe affiche les worktrees et sessions de tous ses dépôts en liste, ou basculez sur la grille de terminaux pour suivre plusieurs sessions vivantes côte à côte.',
      },
      {
        title: 'Feature cross-repo',
        body: 'Créez le même worktree (et une session optionnelle) dans chaque dépôt du groupe en une seule action ; les échecs partiels sont rejouables dépôt par dépôt.',
      },
    ],
  },
  {
    id: 'productivity',
    title: 'Productivité',
    blurb: 'Trouvez tout rapidement et adaptez chaque liste.',
    items: [
      {
        title: 'Palette de commandes',
        body: 'Appuyez sur ⌘K (ou Ctrl+K) pour sauter en recherche floue vers n’importe quel dépôt, worktree, session ou groupe, ou lancer une action rapide.',
      },
      {
        title: 'Trier, filtrer & rechercher',
        body: 'Chaque liste a une barre d’outils pour trier, filtrer (état, commande, source, indicateurs…) et rechercher. Vos choix persistent dans l’URL, donc les liens sont partageables.',
      },
      {
        title: 'Pagination',
        body: 'Les longues listes sont paginées avec une taille de page configurable ; choisissez Tout pour afficher l’ensemble.',
      },
      {
        title: 'Langue',
        body: 'Basculez l’interface entre l’anglais et le français à tout moment, depuis les Réglages ou le pied de page.',
      },
    ],
  },
  {
    id: 'settings',
    title: 'Réglages & sécurité',
    blurb: 'Configurez l’application et gérez qui peut atteindre le daemon.',
    items: [
      {
        title: 'Notifications',
        body: 'Activez ou désactivez le Web Push et envoyez une notification de test depuis Réglages → Préférences.',
      },
      {
        title: 'Jetons d’accès',
        body: 'Créez un jeton par appareil et révoquez ceux en lesquels vous n’avez plus confiance. La valeur d’un nouveau jeton n’est affichée qu’une seule fois — copiez-la immédiatement. Le dernier jeton actif ne peut pas être révoqué, pour éviter de vous verrouiller dehors.',
      },
      {
        title: 'Infos serveur',
        body: 'Réglages → Serveur affiche la version en cours et la configuration de démarrage (port, bind, origines autorisées, répertoire de données, VAPID). Ces valeurs se définissent via des flags CLI et nécessitent un redémarrage du daemon.',
      },
    ],
  },
  {
    id: 'integrations',
    title: 'Intégrations',
    blurb: 'Des raccourcis vers les outils autour de vos dépôts.',
    items: [
      {
        title: 'Code source',
        body: 'L’icône « Code source » de la navigation pointe toujours vers le dépôt source d’Arboretum sur Gitea.',
      },
    ],
  },
];

export const helpSections: Record<AppLocale, HelpSection[]> = { en, fr };