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

Allternit Bots layout options

How bots.allternit.com could look different from Bot Mode in the full app

Today bots.allternit.com shows the same Bot Home as the full app, minus the mode wheel. These are three ways to make it feel like its own app. All three reuse the parts we already ship, so the full app does not change.

A

Today: Bot Home without the wheel

React

B

Main bot first (recommended, closest to Duet)

Opens straight into your main bot's chat, which is where everything goes. The left rail lists channels (group chats, projects) and your other bots. On a computer, Tasks stays open on the right with Needs you, Working and Up next. Quiet hours and location show as small chips at the top.

React

C

Tasks first

Opens on Tasks across all bots, with a quick ask box on top. Chats live in the rail. Good for people who mostly hand off work, but it is less like Duet's "one chat for everything".

React

D

Phone, option B

m.allternit.com/bots and bots.allternit.com

React

Which layout should bots.allternit.com use?B Main bot first suggestedopens on your main bot's chat, Tasks panel on the right, channels in the railC Tasks firstopens on a task board across all botsA Keep today'sBot Home without the mode wheel

---
title: Allternit Bots layout options
subtitle: How bots.allternit.com could look different from Bot Mode in the full app
cols: 1
---
Today bots.allternit.com shows the same Bot Home as the full app, minus the mode wheel. These are three ways to make it feel like its own app. All three reuse the parts we already ship, so the full app does not change.

## A Today: Bot Home without the wheel
```react css=src/design/theme.css h=360
export default function A() {
  const v = (n) => `var(--${n})`;
  return (
    <div style={{display:'flex',height:340,background:v('bg-primary'),color:v('text-primary'),fontFamily:'system-ui',fontSize:13,border:`1px solid ${v('border-default')}`,borderRadius:12,overflow:'hidden'}}>
      <div style={{width:200,borderRight:`1px solid ${v('border-default')}`,padding:12,display:'flex',flexDirection:'column',gap:8}}>
        <b>Home</b>
        <div style={{border:`1px dashed ${v('border-default')}`,borderRadius:10,padding:10,textAlign:'center',color:v('text-secondary')}}>Set up your main bot</div>
        <small style={{color:v('text-secondary'),letterSpacing:1}}>PROJECTS</small>
        <small style={{color:v('text-secondary'),letterSpacing:1}}>BOTS</small>
        <div>Gizzi · Drop · Pixel</div>
        <div style={{marginTop:'auto',color:v('text-secondary')}}>↗ Open full Allternit</div>
      </div>
      <div style={{flex:1,padding:'28px 40px'}}>
        <div style={{fontFamily:'Georgia,serif',fontSize:24}}>What should the team work on?</div>
        <div style={{color:v('text-secondary'),marginTop:6}}>Describe it once. A:// splits it into threads and picks the bots.</div>
        <div style={{marginTop:24,border:`1px solid ${v('border-default')}`,borderRadius:12,padding:14,color:v('text-secondary')}}>e.g. Get the pricing page ready for Monday…</div>
        <div style={{display:'flex',gap:8,marginTop:16}}>{['Researcher','Finance analyst','Chief of staff'].map(t=><span key={t} style={{border:`1px solid ${v('border-default')}`,borderRadius:99,padding:'4px 10px'}}>{t}</span>)}</div>
      </div>
    </div>
  );
}
```

## B Main bot first (recommended, closest to Duet)
Opens straight into your main bot's chat, which is where everything goes. The left rail lists channels (group chats, projects) and your other bots. On a computer, Tasks stays open on the right with Needs you, Working and Up next. Quiet hours and location show as small chips at the top.
```react css=src/design/theme.css h=420
export default function B() {
  const v = (n) => `var(--${n})`;
  const row = (t, s, dot) => <div style={{display:'flex',alignItems:'center',gap:8,padding:'6px 8px',borderRadius:8}}>{dot && <span style={{width:8,height:8,borderRadius:99,background:dot}}/>}<span>{t}</span>{s && <small style={{marginLeft:'auto',color:v('text-secondary')}}>{s}</small>}</div>;
  return (
    <div style={{display:'flex',height:400,background:v('bg-primary'),color:v('text-primary'),fontFamily:'system-ui',fontSize:13,border:`1px solid ${v('border-default')}`,borderRadius:12,overflow:'hidden'}}>
      <div style={{width:200,borderRight:`1px solid ${v('border-default')}`,padding:10,display:'flex',flexDirection:'column',gap:2}}>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:8,background:v('neutral-fill'),borderRadius:10}}><span style={{width:26,height:26,borderRadius:8,background:'#D97757'}}/><div><b>Gizzi</b><div style={{fontSize:11,color:v('text-secondary')}}>Main chat</div></div></div>
        <small style={{color:v('text-secondary'),letterSpacing:1,margin:'10px 8px 2px'}}>CHANNELS</small>
        {row('# launch-week','3')}{row('# inbox')}{row('# family trip')}
        <small style={{color:v('text-secondary'),letterSpacing:1,margin:'10px 8px 2px'}}>BOTS</small>
        {row('Drop',null,'#4C9A6A')}{row('Pixel',null,'#6B6BD6')}{row('Grok',null,'#D6457F')}
        <div style={{marginTop:'auto',color:v('text-secondary'),padding:8}}>⚙ Settings · ↗ Full app</div>
      </div>
      <div style={{flex:1,display:'flex',flexDirection:'column'}}>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'10px 16px',borderBottom:`1px solid ${v('border-default')}`}}><b>Gizzi</b><small style={{color:v('text-secondary')}}>· working on 2 tasks</small><span style={{marginLeft:'auto',border:`1px solid ${v('border-default')}`,borderRadius:99,padding:'2px 8px',fontSize:11}}>☾ Quiet 22:00</span><span style={{border:`1px solid ${v('border-default')}`,borderRadius:99,padding:'2px 8px',fontSize:11}}>⌖ Location on</span></div>
        <div style={{flex:1,padding:16,display:'flex',flexDirection:'column',gap:10}}>
          <div style={{alignSelf:'flex-end',background:v('neutral-fill'),borderRadius:12,padding:'8px 12px'}}>Reply to Sam about Thursday</div>
          <div>Here's a draft in your style:</div>
          <div style={{border:`1px solid ${v('border-default')}`,borderRadius:12,padding:12,maxWidth:380}}><small style={{color:v('text-secondary')}}>Draft · email to Sam</small><div style={{margin:'6px 0 10px'}}>hey Sam — Thursday works, 2pm at yours?</div><div style={{display:'flex',gap:8}}><span style={{background:v('text-primary'),color:v('bg-primary'),borderRadius:8,padding:'4px 10px'}}>Send</span><span style={{border:`1px solid ${v('border-default')}`,borderRadius:8,padding:'4px 10px'}}>Discard</span></div></div>
        </div>
        <div style={{margin:12,border:`1px solid ${v('border-default')}`,borderRadius:12,padding:12,color:v('text-secondary')}}>Message Gizzi…</div>
      </div>
      <div style={{width:210,borderLeft:`1px solid ${v('border-default')}`,padding:12,display:'flex',flexDirection:'column',gap:6}}>
        <b>Tasks</b>
        <small style={{color:v('text-secondary'),letterSpacing:1,marginTop:6}}>NEEDS YOU</small><div>Approve Stripe refund</div>
        <small style={{color:v('text-secondary'),letterSpacing:1,marginTop:6}}>WORKING</small><div>Launch week plan · Drop</div><div>Inbox sweep · Pixel</div>
        <small style={{color:v('text-secondary'),letterSpacing:1,marginTop:6}}>UP NEXT</small><div style={{color:v('text-secondary')}}>Book flights? · Go ahead / Not now</div>
      </div>
    </div>
  );
}
```

## C Tasks first
Opens on Tasks across all bots, with a quick ask box on top. Chats live in the rail. Good for people who mostly hand off work, but it is less like Duet's "one chat for everything".
```react css=src/design/theme.css h=360
export default function C() {
  const v = (n) => `var(--${n})`;
  const card = (t, s) => <div style={{border:`1px solid ${v('border-default')}`,borderRadius:10,padding:10}}><div>{t}</div><small style={{color:v('text-secondary')}}>{s}</small></div>;
  return (
    <div style={{display:'flex',height:340,background:v('bg-primary'),color:v('text-primary'),fontFamily:'system-ui',fontSize:13,border:`1px solid ${v('border-default')}`,borderRadius:12,overflow:'hidden'}}>
      <div style={{width:180,borderRight:`1px solid ${v('border-default')}`,padding:12,display:'flex',flexDirection:'column',gap:6}}><b>Chats</b><div>Gizzi · main</div><div># launch-week</div><div>Drop</div><div>Pixel</div></div>
      <div style={{flex:1,padding:20}}>
        <div style={{border:`1px solid ${v('border-default')}`,borderRadius:12,padding:12,color:v('text-secondary')}}>Ask your bots to do something…</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12,marginTop:16}}>
          <div><small style={{color:v('text-secondary'),letterSpacing:1}}>NEEDS YOU</small>{card('Approve Stripe refund','Gizzi · 5 min ago')}</div>
          <div style={{display:'flex',flexDirection:'column',gap:6}}><small style={{color:v('text-secondary'),letterSpacing:1}}>WORKING</small>{card('Launch week plan','Drop · 3 of 6')}{card('Inbox sweep','Pixel')}</div>
          <div><small style={{color:v('text-secondary'),letterSpacing:1}}>UP NEXT</small>{card('Book flights?','Go ahead / Not now')}</div>
        </div>
      </div>
    </div>
  );
}
```

## D Phone, option B {meta="m.allternit.com/bots and bots.allternit.com"}
```react css=src/design/theme.css h=520
export default function D() {
  const v = (n) => `var(--${n})`;
  return (
    <div style={{width:300,height:500,margin:'0 auto',background:v('bg-primary'),color:v('text-primary'),fontFamily:'system-ui',fontSize:13,border:`1px solid ${v('border-default')}`,borderRadius:28,overflow:'hidden',display:'flex',flexDirection:'column'}}>
      <div style={{display:'flex',alignItems:'center',gap:8,padding:'14px 14px 8px'}}><span>☰</span><span style={{width:24,height:24,borderRadius:7,background:'#D97757'}}/><b>Gizzi</b><small style={{marginLeft:'auto',color:v('text-secondary')}}>☾ ⌖</small></div>
      <div style={{display:'flex',gap:6,padding:'0 14px 8px'}}>{['Chat','Threads','Tasks','Bot'].map((t,i)=><span key={t} style={{padding:'3px 9px',borderRadius:99,background:i===0?v('neutral-fill'):'transparent',border:`1px solid ${v('border-default')}`,fontSize:12}}>{t}</span>)}</div>
      <div style={{flex:1,padding:14,display:'flex',flexDirection:'column',gap:10}}>
        <div style={{alignSelf:'flex-end',background:v('neutral-fill'),borderRadius:12,padding:'8px 12px'}}>Reply to Sam about Thursday</div>
        <div style={{border:`1px solid ${v('border-default')}`,borderRadius:12,padding:10}}><small style={{color:v('text-secondary')}}>Draft · email</small><div style={{margin:'4px 0 8px'}}>hey Sam — Thursday works, 2pm?</div><span style={{background:v('text-primary'),color:v('bg-primary'),borderRadius:8,padding:'3px 9px',fontSize:12}}>Send</span></div>
      </div>
      <div style={{margin:10,border:`1px solid ${v('border-default')}`,borderRadius:16,padding:10,color:v('text-secondary')}}>Message Gizzi…</div>
    </div>
  );
}
```

```ask
Which layout should bots.allternit.com use?
* B Main bot first | opens on your main bot's chat, Tasks panel on the right, channels in the rail
- C Tasks first | opens on a task board across all bots
- A Keep today's | Bot Home without the mode wheel
```