New version 0.5.10

You have 0.5.5. Found when this page was made.

What's new:

Write a component as a :::callout … ::: block too; it renders like ```

Run in a terminal:

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

Or tell your agent:

Update answer-me-with-html

Code prompt — controls under the line

You picked A. It is built on branch feat/code-prompt-status-row, and the tests pass. Below: what Terminal opens, and the threads overview with both styles (Code sessions and Terminal sessions) in List, Grid and Deck.

A

1 Prompt (A, built)

React · Code session: prompt and status row

B

2 What Terminal opens

Press Terminal and the shells take the whole Code view, dark, edge to edge. The prompt and status row stay under them. Press Terminal again to go back to the session. Grid puts the shells side by side. Deck is the same Deck as the overviews: a sideways row of tall shells that scrolls and snaps. Each shell uses the terminal card's dark window (traffic lights, title, state).

React · Terminal view (Grid and Deck)

The terminal built today (#875) still uses light title bars, and its Deck shows one shell with tabs. This mockup replaces both.

C

3 Threads overview: both styles

Code sessions and Terminal sessions each have List, Grid and Deck. Deck is the codebase's Deck: a sideways row of tall cards (400 px on Desktop) that scrolls and snaps. Terminal sessions use the real terminal card styles (session-overview.css). Click the switches to compare.

React · Code overview (real card styles)

D

Pick

Is this the Terminal view and threads overview you want?Yes: build the dark Terminal view and the Code / Terminal sessions switch suggestedChange something (say what)

---
title: Code prompt — controls under the line
template: doc
---
You picked A. It is built on branch `feat/code-prompt-status-row`, and the tests pass. Below: what **Terminal** opens, and the threads overview with both styles (Code sessions and Terminal sessions) in List, Grid and Deck.

## 1 Prompt (A, built)
```react title="Code session: prompt and status row"
const mono='ui-monospace, Menlo, monospace';
const T=({c,a,dim})=><span style={{display:'inline-flex',alignItems:'center',gap:5,fontSize:12,color:a?'#D97757':dim?'#9a9da3':'#55595f',padding:'2px 6px'}}>{c}</span>;
export default function App(){return(
<div style={{background:'#fff',height:220,display:'flex',flexDirection:'column',fontFamily:'system-ui'}}>
 <div style={{flex:1,padding:16,color:'#9a9da3',fontSize:13}}>session output…</div>
 <div style={{margin:'0 0 14px'}}>
  <div style={{borderTop:'1px dashed #c9cbd0',borderBottom:'1px dashed #c9cbd0',display:'flex',alignItems:'center',padding:'9px 12px',gap:10}}>
   <span style={{color:'#6b6f76',fontSize:16}}>+</span><span style={{fontFamily:mono,color:'#D97757'}}>❯</span>
   <span style={{fontFamily:mono,fontSize:13,color:'#9a9da3',flex:1}}>Run a command or describe a task…</span><span style={{color:'#6b6f76'}}>🎙</span>
  </div>
  <div style={{display:'flex',alignItems:'center',padding:'6px 6px 0'}}>
   <T c="☁ This Mac"/><T c="▤ allternit-ai"/><T c="⑂ main"/><T c="Manual" a/><span style={{flex:1}}/><T c="Opus 5.5"/><T c="◔ 12%" dim/><T c=">_ Terminal"/>
  </div>
 </div>
</div>)}
```

## 2 What Terminal opens
Press **Terminal** and the shells take the whole Code view, dark, edge to edge. The prompt and status row stay under them. Press **Terminal** again to go back to the session. Grid puts the shells side by side. Deck is the same Deck as the overviews: a sideways row of tall shells that scrolls and snaps. Each shell uses the terminal card's dark window (traffic lights, title, state).
```react css=src/components/session-overview/session-overview.css title="Terminal view (Grid and Deck)"
const mono='ui-monospace, Menlo, monospace';
const shells=[{n:'allternit-ai',s:'running',w:'~/allternit-ai · main',l:['$ pnpm dev','  ➜  Local: http://127.0.0.1:8013/','  ready in 812 ms']},{n:'Factory · builder',s:'working',w:'~/allternit-ai · feat/x',l:['$ claude','  ● Reading src/views/code…','  ● Editing CodeCanvas.tsx']},{n:'logs',s:'idle',w:'~/api · main',l:['$ tail -f api.log','  200 GET /v1/me 4ms','  200 POST /v1/runs 31ms']}];
function Shell({s,w}){return(
 <div className="so-card so-term-card so-term-big" style={{display:'flex',flexDirection:'column',flex:w?'none':1,width:w,minWidth:0,height:'100%',borderRadius:w?16:0,overflow:'hidden',scrollSnapAlign:'center'}}>
  <div className="so-term-chrome"><span className="so-term-lights"><i/><i/><i/></span><span className="so-term-title">{s.n}</span><small>{s.s}</small></div>
  <span className="so-term-workspace">{s.w} · zsh</span>
  <div style={{padding:'12px',fontFamily:mono,fontSize:12,lineHeight:'19px',color:'#c8ccd2',flex:1}}>{s.l.map((x,i)=><div key={i}>{x}</div>)}<div><span style={{color:'#D97757'}}>❯</span> <span style={{background:'#c8ccd2',display:'inline-block',width:7,height:13,verticalAlign:'middle'}}/></div></div>
 </div>)}
export default function App(){const [mode,setMode]=React.useState('deck');
const btn=(m,l)=><button onClick={()=>setMode(m)} style={{fontSize:11,fontFamily:mono,padding:'3px 8px',borderRadius:4,border:'none',cursor:'pointer',background:mode===m?'#333':'transparent',color:mode===m?'#fff':'#8b919a'}}>{l}</button>;
return(
<div style={{height:420,display:'flex',flexDirection:'column',background:'#161616',fontFamily:'system-ui'}}>
 <div style={{display:'flex',alignItems:'center',gap:6,padding:'6px 10px',borderBottom:'1px solid #2a2a2a'}}>
  <span style={{fontFamily:mono,fontSize:11,color:'#d6d9de'}}>Terminal · 3 shells</span><span style={{flex:1}}/>{btn('grid','▦ Grid')}{btn('deck','▥ Deck')}<span style={{color:'#8b919a',fontSize:13,padding:'0 6px'}}>+</span>
 </div>
 {mode==='grid'
  ?<div style={{flex:1,display:'flex',minHeight:0,gap:1,background:'#2a2a2a'}}>{shells.map((s,i)=><Shell key={i} s={s}/>)}</div>
  :<div style={{flex:1,display:'flex',minHeight:0,gap:20,overflowX:'auto',scrollSnapType:'x mandatory',padding:'14px 32px'}}>{shells.map((s,i)=><Shell key={i} s={s} w={400}/>)}</div>}
 <div style={{background:'#fff',padding:'0 0 8px'}}>
  <div style={{borderTop:'1px dashed #c9cbd0',borderBottom:'1px dashed #c9cbd0',padding:'8px 12px',fontFamily:mono,fontSize:13,color:'#9a9da3'}}><span style={{color:'#D97757'}}>❯</span> Run a command or describe a task…</div>
  <div style={{display:'flex',padding:'5px 8px 0',fontSize:12,color:'#55595f',gap:12}}><span>☁ This Mac</span><span>▤ allternit-ai</span><span>⑂ main</span><span style={{color:'#D97757'}}>Manual</span><span style={{flex:1}}/><span>Opus 5.5</span><span style={{background:'#f1ece9',borderRadius:4,padding:'0 6px',color:'#26282c'}}>&gt;_ Terminal</span></div>
 </div>
</div>)}
```
The terminal built today (#875) still uses light title bars, and its Deck shows one shell with tabs. This mockup replaces both.
## 3 Threads overview: both styles
**Code sessions** and **Terminal sessions** each have List, Grid and Deck. Deck is the codebase's Deck: a sideways row of tall cards (400 px on Desktop) that scrolls and snaps. Terminal sessions use the real terminal card styles (`session-overview.css`). Click the switches to compare.
```react css=src/components/session-overview/session-overview.css title="Code overview (real card styles)"
const code=[{n:'Fix status row spacing',r:'allternit-ai',t:'Working',ask:'Tighten the gap under the prompt',p:'Editing ChatComposer.tsx: moved the status row under the input line.'},{n:'Docs for Terminal button',r:'allternit',t:'Done',ask:'Document the Terminal button',p:'Merged #1944. check_links: 0 problems.'},{n:'Phone drawer bug',r:'allternit-ai',t:'Needs you',ask:'Why does the drawer close?',p:'Which surface do you see it on: PWA or ai.allternit.com?'}];
const term=[{n:'allternit-ai · pnpm dev',w:'~/allternit-ai · main',s:'running',ask:'$ pnpm dev',l:['➜ Local: http://127.0.0.1:8013/','ready in 812 ms'],live:'Running',h:'zsh'},{n:'Factory · builder',w:'~/allternit-ai · feat/x',s:'working',ask:'Fix the status row spacing',l:['● Reading src/views/code…','● Editing CodeCanvas.tsx'],live:'Working',h:'claude'},{n:'logs',w:'~/api · main',s:'idle',ask:'$ tail -f api.log',l:['200 GET /v1/me 4ms','200 POST /v1/runs 31ms'],h:'zsh'}];
const tone=t=>t==='Needs you'?'#D97757':t==='Working'?'#16a34a':'#9a9da3';
function TermCard({x,big,w,h}){return(<div className={'so-card so-term-card'+(big?' so-term-big':'')} style={{display:'flex',flexDirection:'column',borderRadius:16,overflow:'hidden',width:w,height:h,flexShrink:0,scrollSnapAlign:'center'}}>
 <div className="so-term-chrome"><span className="so-term-lights"><i/><i/><i/></span><span className="so-term-title">{x.n}</span><small>{x.s}</small></div>
 <span className="so-term-workspace">{x.w}</span>
 <div className="so-term-body"><span className="so-term-kind">Terminal session</span><span className="so-term-ask">{x.ask}</span>{x.l.map((y,i)=><span key={i} className="so-term-log">{y}</span>)}{x.live?<span className="so-term-live"><span/>{x.live}</span>:null}</div>
 <div className="so-term-composer"><span className="so-term-prompt">› <span className="so-term-caret"/></span><span className="so-term-harness">▸▸ {x.h}</span></div></div>)}
function CodeCard({x,deck,w,h}){return(<div style={{display:'flex',flexDirection:'column',gap:6,background:'#fff',border:'1px solid #e3e4e7',borderRadius:16,padding:deck?20:14,width:w,height:h,flexShrink:0,boxShadow:deck?'0 10px 30px rgba(0,0,0,.10)':'none',scrollSnapAlign:'center'}}>
 <div style={{fontSize:deck?15:13,fontWeight:600,color:'#26282c'}}>{x.n}</div><div style={{fontSize:11,color:'#9a9da3'}}>{x.r}</div>
 <div style={{flex:1,display:'flex',flexDirection:'column',gap:6,marginTop:6}}>{deck?<div style={{marginLeft:'auto',maxWidth:'88%',background:'#ececee',borderRadius:14,padding:'6px 10px',fontSize:13}}>{x.ask}</div>:null}<p style={{margin:0,fontSize:deck?14:12,lineHeight:1.5,color:'#55595f'}}>{x.p}</p></div>
 <div style={{fontSize:11,color:tone(x.t)}}>● {x.t}</div></div>)}
export default function App(){const [kind,setKind]=React.useState('term');const [lay,setLay]=React.useState('deck');
const items=kind==='code'?code:term;
const seg=(v,set,opts)=><div style={{display:'inline-flex',background:'#f1f1f3',borderRadius:8,padding:2}}>{opts.map(([k,l])=><button key={k} onClick={()=>set(k)} style={{border:'none',cursor:'pointer',fontSize:12,padding:'4px 10px',borderRadius:6,background:v===k?'#fff':'transparent',color:v===k?'#26282c':'#6b6f76',boxShadow:v===k?'0 1px 2px rgba(0,0,0,.08)':'none'}}>{l}</button>)}</div>;
const card=(x,i,mode)=>kind==='code'?<CodeCard key={i} x={x} deck={mode==='deck'} w={mode==='deck'?400:undefined} h={mode==='deck'?420:170}/>:<TermCard key={i} x={x} big={mode==='deck'} w={mode==='deck'?400:undefined} h={mode==='deck'?420:200}/>;
return(<div style={{background:'#fafafa',padding:14,fontFamily:'system-ui'}}>
 <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:12,flexWrap:'wrap'}}><span style={{fontSize:15,fontWeight:600}}>Code</span>{seg(kind,setKind,[['code','Code sessions · 3'],['term','Terminal sessions · 3']])}<span style={{flex:1}}/>{seg(lay,setLay,[['list','List'],['grid','Grid'],['deck','Deck']])}</div>
 {lay==='list'&&<div style={{display:'flex',flexDirection:'column',gap:2}}>{items.map((x,i)=><div key={i} style={{display:'flex',gap:10,alignItems:'center',padding:'12px 16px',borderRadius:12,background:'#fff',fontSize:13}}><span style={{color:'#9a9da3',fontFamily:'monospace'}}>{kind==='term'?'>_':'◇'}</span><div style={{flex:1}}><div style={{color:'#26282c'}}>{x.n}</div><div style={{color:'#6b6f76',fontSize:12}}>{kind==='term'?x.l[x.l.length-1]:x.p}</div></div><span style={{fontSize:12,color:'#9a9da3'}}>{kind==='term'?'Terminal session':x.r}</span></div>)}</div>}
 {lay==='grid'&&<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))',gap:16}}>{items.map((x,i)=>card(x,i,'grid'))}</div>}
 {lay==='deck'&&<div style={{display:'flex',gap:20,overflowX:'auto',scrollSnapType:'x mandatory',padding:'12px 32px 16px'}}>{items.map((x,i)=>card(x,i,'deck'))}</div>}
</div>)}
```
## Pick
```ask
Is this the Terminal view and threads overview you want?
* Yes: build the dark Terminal view and the Code / Terminal sessions switch
- Change something (say what)
```