New version 0.5.7

You have 0.5.5. Found when this page was made.

What's new:

Every draft error is listed at once; a stdin draft is kept for line edits
A table with no |---| row is an error instead of plain text
Long flow edges are no longer cut off at the edge of the diagram

Run in a terminal:

npx skills update answer-me-with-html -y

Or tell your agent:

Update answer-me-with-html

Decision trees + glance lines

Where both ideas live in Allternit, and what ships

Lead: Decision trees go in Tasks → Needs you and in the thread's question card. Glance lines go in every sidebar row (rail, phone drawer, bot threads, Tasks rows). One data shape each, so all three surfaces get them in one change.

A

Where they render

Feature	Surface	What you see
Decision tree	Tasks (desktop TasksView + phone Tasks screen)	"Decisions · 3 waiting for you" deck above the board, 1 of 3 pager, keys 1–4
Decision tree	The thread (Chat, Cowork, Code, bot threads)	The docked question card draws the tree when the question has branches; plain questions stay as today
Decision tree	Session overview cards	"Needs you" chip opens the same tree
Glance line	Desktop rail rows + phone drawer	Replaces the last-message preview with the agent's live line, e.g. `32 green CI · 32 review threads`
Glance line	Bot thread rows, overview cards, Tasks rows	Same line; click opens the artifact it summarizes

B

Decision tree: in Tasks

React

C

Glance line: in the rail

React

D

How it is built

+17 added

Add branches to gizzi's question tool and the CLI MCP bridge. Old clients show the flat options.
Add a glance tool: one line, up to 80 chars, optional artifact id. Store it on the session; send it in the session list.
Build DecisionTree in agent-elements/question/; QuestionPrompt picks it when branches exist. Phone: columns stack, same keys.
Add the Decisions deck to TasksView and TasksBoardScreen; it reads pending questions across sessions.
getSessionPreview prefers the glance line. That one change covers rail, drawer and overview.
Docs: guides/decisions.mdx and guides/glance.mdx.

E

Decide

Ship both as planned?Yes, build both now suggestedTasks + thread + every sidebar rowDecision trees first, glance afterChange placementsay where in a remark

---
title: Decision trees + glance lines
subtitle: Where both ideas live in Allternit, and what ships
cols: 2
---
Lead: Decision trees go in **Tasks → Needs you** and in the **thread's question card**. Glance lines go in **every sidebar row** (rail, phone drawer, bot threads, Tasks rows). One data shape each, so all three surfaces get them in one change.

## A Where they render {span=2}
| Feature | Surface | What you see |
|---|---|---|
| Decision tree | Tasks (desktop TasksView + phone Tasks screen) | "Decisions · 3 waiting for you" deck above the board, 1 of 3 pager, keys 1–4 |
| Decision tree | The thread (Chat, Cowork, Code, bot threads) | The docked question card draws the tree when the question has branches; plain questions stay as today |
| Decision tree | Session overview cards | "Needs you" chip opens the same tree |
| Glance line | Desktop rail rows + phone drawer | Replaces the last-message preview with the agent's live line, e.g. `32 green CI · 32 review threads` |
| Glance line | Bot thread rows, overview cards, Tasks rows | Same line; click opens the artifact it summarizes |

## B Decision tree: in Tasks
```react css=src/design/theme.css h=520
import { useState } from "react";
const opts = [
  { n:1, t:"Roll back to #481", pick:true, q:"Tell customers about it?", sub:[{t:"Post on the status page",d:"Public · updates every 15 min",pick:true},{t:"Only tell the team",d:"#incidents only · nothing public"}]},
  { n:2, t:"Ship a hotfix", q:"Wait for the test run?", sub:[{t:"Ship right away",d:"Skips 1,284 tests",warn:true},{t:"After the tests",d:"14 min · errors keep coming"}]},
  { n:3, t:"Turn the flag off", end:"New checkout off for 30% · the old one takes over"},
];
export default function App(){
  const [sel,setSel]=useState(0); const [done,setDone]=useState(null);
  const o=opts[sel];
  return <div style={{fontFamily:"var(--font-sans, Inter, system-ui)",background:"var(--bg-primary,#fafaf9)",color:"var(--text-primary,#1f1f1e)",padding:20,minHeight:480}}>
    <div style={{display:"flex",justifyContent:"space-between",fontSize:13,marginBottom:18}}>
      <span><b>Decisions</b> <span style={{color:"var(--text-secondary)"}}>3 waiting for you</span></span>
      <span style={{color:"var(--text-secondary)"}}>● ○ ○ 1 of 3</span></div>
    <div style={{display:"flex",gap:24,alignItems:"flex-start"}}>
      <div style={{width:220}}>
        <span style={{fontSize:11,background:"var(--status-error-bg)",color:"var(--status-error)",padding:"2px 6px",borderRadius:4}}>High risk</span>
        <div style={{marginTop:8,background:"var(--bg-card,#fff)",border:"1px solid var(--border-subtle)",borderRadius:12,padding:14}}>
          <div style={{fontSize:12,color:"var(--text-secondary)"}}>Incident bot · Claude</div>
          <div style={{fontWeight:600,fontSize:14,margin:"8px 0"}}>Checkout errors jumped to 18% after deploy #482. What should I do?</div>
          <div style={{fontSize:12,color:"var(--text-secondary)"}}>2,140 errors in 12 min</div></div></div>
      <div style={{display:"flex",flexDirection:"column",gap:8,width:190}}>
        {opts.map((x,i)=><button key={i} onClick={()=>{setSel(i);setDone(null)}} style={{textAlign:"left",padding:"8px 10px",borderRadius:10,border:"1px solid "+(i===sel?"var(--accent-primary,#D97757)":"var(--border-subtle)"),background:"var(--bg-card,#fff)",opacity:i===sel?1:.55,fontSize:13,cursor:"pointer"}}>
          <span style={{color:"var(--text-secondary)",marginRight:6}}>{x.n}</span>{x.t}{x.pick&&<div style={{fontSize:11,color:"var(--accent-primary,#D97757)"}}>Bot's pick</div>}</button>)}
        <div style={{padding:"8px 10px",fontSize:13,color:"var(--text-secondary)"}}>4 Other…</div></div>
      <div style={{width:260}}>
        {o.end? <div style={{fontSize:13,padding:10,border:"1px solid var(--border-subtle)",borderRadius:10,background:"var(--bg-card,#fff)"}}>{o.end}</div> : <>
        <div style={{fontSize:13,marginBottom:8}}>{o.q}</div>
        {o.sub.map((s,j)=><button key={j} onClick={()=>setDone(s.t)} style={{display:"block",width:"100%",textAlign:"left",marginBottom:8,padding:"8px 10px",borderRadius:10,border:"1px solid var(--border-subtle)",background:"var(--bg-card,#fff)",fontSize:13,cursor:"pointer"}}>
          {s.t} {s.pick&&<span style={{fontSize:11,color:"var(--accent-primary,#D97757)"}}>Bot's pick</span>}
          <div style={{fontSize:12,color:s.warn?"var(--status-warning)":"var(--text-secondary)"}}>{s.d}</div></button>)}</>}
        {done&&<div style={{fontSize:13,padding:10,borderRadius:10,border:"1px solid var(--status-success)"}}>✓ Approved · running — {done}</div>}
      </div></div>
    <div style={{fontSize:12,color:"var(--text-secondary)",marginTop:20}}>Pick a branch 1–4 · next →</div></div>;
}
```

## C Glance line: in the rail
```react css=src/design/theme.css h=300
export default function App(){
  const rows=[{t:"Standup update",g:"Next run tomorrow 1:40 PM"},{t:"Keep all my PRs green",g:"32 green CI · 32 review threads · 4 to close",live:true,on:true},{t:"Monitor approval blockers",g:"3 blocked · 2 waiting on review",live:true},{t:"Draft launch post",g:"Can we ship Friday?"}];
  return <div style={{fontFamily:"var(--font-sans, Inter, system-ui)",background:"var(--bg-secondary,#f4f4f3)",padding:12,width:300}}>
   {rows.map((r,i)=><div key={i} style={{padding:"8px 10px",borderRadius:10,marginBottom:4,background:r.on?"var(--bg-card,#fff)":"transparent",border:r.on?"1px solid var(--accent-primary,#D97757)":"1px solid transparent"}}>
    <div style={{fontSize:13,color:"var(--text-primary)"}}>{r.t}</div>
    <div style={{fontSize:12,color:r.live?"var(--text-primary)":"var(--text-secondary)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{r.live&&<span style={{color:"var(--status-success)"}}>● </span>}{r.g}</div></div>)}
   <div style={{fontSize:11,color:"var(--text-secondary)",marginTop:8}}>Live rows show the bot's glance line; others keep the last-message preview.</div></div>;
}
```

## D How it is built {span=2}
```flow LR
gizzi question tool -> + branches field: options, follow-up, risk, pick
+ branches field -> /api/v1/questions -> QuestionPrompt tree view
QuestionPrompt tree view -> Thread dock & Tasks Needs you deck
+ glance tool -> session metadata glance -> session-summary.ts -> Rail & phone drawer & overview & Tasks rows
```
1. Add `branches` to gizzi's `question` tool and the CLI MCP bridge. Old clients show the flat options.
2. Add a `glance` tool: one line, up to 80 chars, optional artifact id. Store it on the session; send it in the session list.
3. Build `DecisionTree` in `agent-elements/question/`; QuestionPrompt picks it when branches exist. Phone: columns stack, same keys.
4. Add the Decisions deck to TasksView and TasksBoardScreen; it reads pending questions across sessions.
5. `getSessionPreview` prefers the glance line. That one change covers rail, drawer and overview.
6. Docs: `guides/decisions.mdx` and `guides/glance.mdx`.

## E Decide
```ask
Ship both as planned?
* Yes, build both now | Tasks + thread + every sidebar row
- Decision trees first, glance after |
- Change placement | say where in a remark
```