ziel-graph

import type { Register } from 'claude-code'

// Drawn like ziel-graph by Tzy197 (pane, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/tzy197-ziel-graph/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Ziel-Graph" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button, Select } = $.ui.resolve(e)
    const endzielZeile = '…'
    const zaehler = '…'
    const faktenZeile = '…'
    const neue = '…'
    const fertigZeile = '…'
    const fertigZeile2 = '…'
    const fertigZeile3 = '…'
    const status = '…'
    const farben = '…'
    const label = '…'
    const festZeile = '…'
    const kopf = '…'
    const one = '…'
    const length = '…'
    const kopf2 = '…'
    const titel = '…'
    const text = '…'
    const nameVon = '…'
    const alter = '…'
    const naechster = '…'
    const frage = '…'
    const kopf3 = '…'
    const titel2 = '…'
    const satz = '…'
    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Box flexDirection="row" flexWrap="wrap" columnGap={1} alignItems="center">
            <Text bold wrap="wrap">
              {endzielZeile}
            </Text>
            <Button label="Endziel festlegen" />
          </Box>
          <Text dimColor wrap="wrap">
            {zaehler}
          </Text>
          <Text dimColor wrap="wrap">
            {faktenZeile}
          </Text>
          <Text wrap="wrap">
            {neue}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold wrap="wrap">
            GOAL.md ist noch leer
          </Text>
          <Text wrap="wrap">
            GOAL.md in der Wurzel des Repos ist der Anker des Plans: Sie nennt das Endziel, die Zwischenziele und je Strang sein Zi…
          </Text>
          <Box>
            <Button label="GOAL.md mit dem Chat entwerfen" variant="primary" />
          </Box>
        </Box>
        <Box flexDirection="column">
          <Box flexDirection="row" flexWrap="wrap" columnGap={1} alignItems="center">
            <Text wrap="wrap">
              {fertigZeile}
            </Text>
            <Button label="Zum Dauerläufer machen" />
          </Box>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1} alignItems="center">
            <Text wrap="wrap">
              {fertigZeile2}
            </Text>
            <Button label="Zum Dauerläufer machen" />
          </Box>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1} alignItems="center">
            <Text wrap="wrap">
              {fertigZeile3}
            </Text>
            <Button label="Zum Dauerläufer machen" />
          </Box>
        </Box>
        <Box flexDirection="column">
          <Text bold wrap="wrap">
            {status}
          </Text>
          <Text dimColor wrap="wrap">
            Ein Modell-Aufruf mit claude-sonnet-5-5 liest GOAL.md, Doku, Chats und Commits des Repos. Die Leiste zeigt den Plan, so…
          </Text>
          <Text dimColor wrap="wrap">
            Darunter steht weiter der vorige Plan.
          </Text>
          <Text wrap="wrap">
            Noch kein Plan für dieses Repo. „Neu ableiten“ liest GOAL.md, README.md, CLAUDE.md und die Doku unter docs/, die laufen…
          </Text>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
            <Button label="Neu ableiten" variant="primary" />
            <Button label="Neu laden" />
            <Select label="Farben" value={`${farben}`} />
            <Button label={`Farben: ${label}`} />
          </Box>
        </Box>
        <Box flexDirection="column">
          <Text bold wrap="wrap">
            {festZeile}
          </Text>
          <Text dimColor wrap="wrap">
            Eine Festlegung ist ein Satz von dir, der bei jedem Ableiten gewinnt: wohin etwas gehört, was zuerst kommt, was zusamme…
          </Text>
          <Text wrap="wrap">
            Die Festlegungen sind andere als beim letzten Ableiten: „Neu ableiten“ wendet sie an.
          </Text>
          <Text dimColor wrap="wrap">
            Diese Oberfläche zeichnet kein Eingabefeld: Eine neue Festlegung gibst du am Rechner ein.
          </Text>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
            <Button label="Festlegen" />
            <Button label="In GOAL.md eintragen lassen" />
          </Box>
        </Box>
        <Box flexDirection="column">
          <Text wrap="wrap">
            {kopf}
          </Text>
          <Text wrap="wrap">
            {`– ${one}`}
          </Text>
          <Text wrap="wrap">
            {`– ${one}`}
          </Text>
          <Text wrap="wrap">
            {`– ${one}`}
          </Text>
          <Text dimColor wrap="wrap">
            {`… und ${length} weitere in der Datei des Plans.`}
          </Text>
        </Box>
        <Box flexDirection="row" alignItems="flex-start" columnGap={2}>
          <Box flexDirection="column" gap={1}>
            <Box flexDirection="column">
              <Text dimColor wrap="wrap">
                {kopf2}
              </Text>
              <Text bold wrap="wrap">
                {titel}
              </Text>
              <Text wrap="wrap">
                {`– ${text}`}
              </Text>
              <Text wrap="wrap">
                {`– ${text}`}
              </Text>
              <Text wrap="wrap">
                {`– ${text}`}
              </Text>
            </Box>
            <Box flexDirection="column">
              <Text bold wrap="wrap">
                {`○ Chat: ${nameVon} (dieser Chat)`}
              </Text>
              <Text dimColor wrap="wrap">
                {`${alter}`}
              </Text>
              <Text wrap="wrap">
                Stand: noch keiner
              </Text>
              <Text wrap="wrap">
                {`Weiter: ${naechster}`}
              </Text>
              <Text bold wrap="wrap">
                {`Wartet auf dich: ${frage}`}
              </Text>
            </Box>
            <Box flexDirection="column">
              <Text bold wrap="wrap">
                {`○ Chat: ${nameVon} (dieser Chat)`}
              </Text>
              <Text dimColor wrap="wrap">
                {`${alter}`}
              </Text>
              <Text wrap="wrap">
                Stand: noch keiner
              </Text>
              <Text wrap="wrap">
                {`Weiter: ${naechster}`}
              </Text>
              <Text bold wrap="wrap">
                {`Wartet auf dich: ${frage}`}
              </Text>
            </Box>
            <Box flexDirection="column">
              <Text bold wrap="wrap">
                {`○ Chat: ${nameVon} (dieser Chat)`}
              </Text>
              <Text dimColor wrap="wrap">
                {`${alter}`}
              </Text>
              <Text wrap="wrap">
                Stand: noch keiner
              </Text>
              <Text wrap="wrap">
                {`Weiter: ${naechster}`}
              </Text>
              <Text bold wrap="wrap">
                {`Wartet auf dich: ${frage}`}
              </Text>
            </Box>
            <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
              <Button label="Auftrag ins Eingabefeld legen" variant="primary" />
              <Button label="Erklären lassen" />
              <Button label="Endziel festlegen" />
            </Box>
            <Box flexDirection="column">
              <Text dimColor wrap="wrap">
                Seine Bündel haben gerade keine eigene Karte. Arbeitet ein Chat an einem davon, stehen sie nach dem nächsten Ableiten w…
              </Text>
              <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
                <Button label={`Auftrag: ${titel}`} />
                <Button label={`Auftrag: ${titel}`} />
                <Button label={`Auftrag: ${titel}`} />
              </Box>
            </Box>
            <Box flexDirection="column" />
          </Box>
        </Box>
        <Box flexDirection="column">
          <Text bold wrap="wrap">
            Laufende Chats
          </Text>
          <Button plain label={`▸ ○ ${nameVon} (dieser Chat)`} />
          <Button plain label={`▸ ○ ${nameVon} (dieser Chat)`} />
          <Button plain label={`▸ ○ ${nameVon} (dieser Chat)`} />
        </Box>
        <Box flexDirection="column" gap={1}>
          <Box flexDirection="column">
            <Text dimColor wrap="wrap">
              {kopf3}
            </Text>
            <Text bold wrap="wrap">
              {titel2}
            </Text>
            <Text wrap="wrap">
              {`– ${text}`}
            </Text>
            <Text wrap="wrap">
              {`– ${text}`}
            </Text>
            <Text wrap="wrap">
              {`– ${text}`}
            </Text>
          </Box>
          <Box flexDirection="column">
            <Text bold wrap="wrap">
              {`○ Chat: ${nameVon} (dieser Chat)`}
            </Text>
            <Text dimColor wrap="wrap">
              {`${alter}`}
            </Text>
            <Text wrap="wrap">
              Stand: noch keiner
            </Text>
            <Text wrap="wrap">
              {`Weiter: ${naechster}`}
            </Text>
            <Text bold wrap="wrap">
              {`Wartet auf dich: ${frage}`}
            </Text>
          </Box>
          <Box flexDirection="column">
            <Text bold wrap="wrap">
              {`○ Chat: ${nameVon} (dieser Chat)`}
            </Text>
            <Text dimColor wrap="wrap">
              {`${alter}`}
            </Text>
            <Text wrap="wrap">
              Stand: noch keiner
            </Text>
            <Text wrap="wrap">
              {`Weiter: ${naechster}`}
            </Text>
            <Text bold wrap="wrap">
              {`Wartet auf dich: ${frage}`}
            </Text>
          </Box>
          <Box flexDirection="column">
            <Text bold wrap="wrap">
              {`○ Chat: ${nameVon} (dieser Chat)`}
            </Text>
            <Text dimColor wrap="wrap">
              {`${alter}`}
            </Text>
            <Text wrap="wrap">
              Stand: noch keiner
            </Text>
            <Text wrap="wrap">
              {`Weiter: ${naechster}`}
            </Text>
            <Text bold wrap="wrap">
              {`Wartet auf dich: ${frage}`}
            </Text>
          </Box>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
            <Button label="Auftrag ins Eingabefeld legen" variant="primary" />
            <Button label="Erklären lassen" />
            <Button label="Endziel festlegen" />
          </Box>
          <Box flexDirection="column">
            <Text dimColor wrap="wrap">
              Seine Bündel haben gerade keine eigene Karte. Arbeitet ein Chat an einem davon, stehen sie nach dem nächsten Ableiten w…
            </Text>
            <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
              <Button label={`Auftrag: ${titel}`} />
              <Button label={`Auftrag: ${titel}`} />
              <Button label={`Auftrag: ${titel}`} />
            </Box>
          </Box>
          <Box flexDirection="column" />
        </Box>
        <Box flexDirection="column">
          <Text bold wrap="wrap">
            {`Festlegungen (${length})`}
          </Text>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1} alignItems="center">
            <Text wrap="wrap">
              {`– ${satz} (noch nicht in GOAL.md)`}
            </Text>
            <Button label="Entfernen" />
          </Box>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1} alignItems="center">
            <Text wrap="wrap">
              {`– ${satz} (noch nicht in GOAL.md)`}
            </Text>
            <Button label="Entfernen" />
          </Box>
          <Box flexDirection="row" flexWrap="wrap" columnGap={1} alignItems="center">
            <Text wrap="wrap">
              {`– ${satz} (noch nicht in GOAL.md)`}
            </Text>
            <Button label="Entfernen" />
          </Box>
        </Box>
        <Box flexDirection="column">
          <Text bold wrap="wrap">
            {`Beim Ableiten aufgefallen (${length})`}
          </Text>
          <Text dimColor wrap="wrap">
            {`– ${one}`}
          </Text>
          <Text dimColor wrap="wrap">
            {`– ${one}`}
          </Text>
          <Text dimColor wrap="wrap">
            {`– ${one}`}
          </Text>
          <Text dimColor wrap="wrap">
            {`… und ${length} weitere in der Datei des Plans.`}
          </Text>
        </Box>
        <Text dimColor wrap="wrap">
          Diesen Plan hat ein Modell aus GOAL.md, Doku, Chats und Git-Verlauf abgeleitet. Festgelegt ist nur, was in GOAL.md steh…
        </Text>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const nameVon = '…'
    await $.ui.toast(`Die Antwort ist leer.`)
    await $.ui.toast(`Antwort an „${nameVon}“ zugestellt.`)
    return next(e)
  })
}