Skip to content

Dato Agent: setup checklist, "⋮" menu, and a remembered Agent tab width #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roger-datocms merged 17 commits into from
Nov 5, 2026
Merged

Dato Agent: setup checklist, "⋮" menu, and a remembered Agent tab width #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
031672c
Dato Agent: resync package-lock.json so npm ci works again
roger-datocms Nov 4, 2026
d47d58d
Dato Agent: explain why chats are blocked until an AI provider is set up
roger-datocms Nov 4, 2026
5f1dda7
Dato Agent: split model limit parsing out to satisfy Biome's complexi…
roger-datocms Nov 4, 2026
fe9a834
Dato Agent: keep the provider name out of the setup notice
roger-datocms Nov 4, 2026
414ce3a
Dato Agent: lay out setup as numbered steps and hide chats until it's…
roger-datocms Nov 4, 2026
d43bbbe
Dato Agent: tidy the setup steps and explain the access choices
roger-datocms Nov 5, 2026
7bdbe89
Dato Agent: clearer auto-approve toggle, no access flash on load
roger-datocms Nov 5, 2026
6dc7895
Dato Agent: one button per job in the DatoCMS step, and correct guidance
roger-datocms Nov 5, 2026
26ea39d
Dato Agent: "Reconnect to change access" goes straight to the consent…
roger-datocms Nov 5, 2026
fb66faa
Dato Agent: move settings and access into a "⋮" menu; chats panel is …
roger-datocms Nov 5, 2026
eff38c8
Dato Agent: cover the Agent tab's chat when it is too narrow to use
roger-datocms Nov 5, 2026
bf42676
Dato Agent: start the Agent tab's chat at 300px, and cover it below that
roger-datocms Nov 5, 2026
941a4b4
Dato Agent: clearer names in the options menu
roger-datocms Nov 5, 2026
ece1467
Dato Agent: remember the Agent tab's chat width per project
roger-datocms Nov 5, 2026
c60e8e3
Dato Agent: remember the Agent tab width per browser, across projects
roger-datocms Nov 5, 2026
4acdc91
Dato Agent: hint at the record pane and cap the chat's line length
roger-datocms Nov 5, 2026
0b14c8f
Dato Agent: keep the Agent tab's record list filled, so Back never spins
roger-datocms Nov 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions dato-agent/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions dato-agent/src/components/AgentIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,27 @@ export function BoltIcon({ className }: IconProps) {
);
}

/** Three vertical dots: the "more options" menu. */
export function MoreIcon({ className }: IconProps) {
return (
<Icon className={className}>
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="19" r="1" />
</Icon>
);
}

/** The bolt with a slash through it: auto-approve is off. */
export function BoltOffIcon({ className }: IconProps) {
return (
<Icon className={className}>
<path d="M13.4 2 5.5 13h6l-.9 9L18.5 11h-6l.9-9Z" />
<path d="M3 3l18 18" />
</Icon>
);
}

export function RetryIcon({ className }: IconProps) {
return (
<Icon className={className}>
Expand Down
184 changes: 170 additions & 14 deletions dato-agent/src/components/AgentSurface.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,69 @@
background-color 0.2s var(--material-ease);
}

.utilityActions {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
}

.dialogBackdrop {
position: fixed;
z-index: 20;
display: grid;
inset: 0;
padding: var(--spacing-m);
place-items: center;
background: var(--color--backdrop--surface, rgb(0 0 0 / 40%));
}

.dialog {
display: grid;
width: min(360px, 100%);
gap: var(--spacing-m);
padding: var(--spacing-l, 18px);
border: 1px solid var(--color--border);
border-radius: 6px;
color: var(--color--ink);
background: var(--color--surface);
box-shadow: var(--shadow--lifted, 0 12px 32px rgb(0 0 0 / 30%));
}

.dialog h2 {
margin: 0;
font-size: var(--font-size-m);
}

.dialog p {
margin: 0;
color: var(--color--ink-subtle);
font-size: var(--font-size-xs);
line-height: 1.45;
}

.dialogActions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-s);
}

.optionsButton {
width: 30px;
height: 30px;
}

.optionsAccess {
display: grid;
gap: 2px;
max-width: 240px;
white-space: normal;
}

.optionsAccess span {
color: var(--color--ink-subtle);
}

.autoApproveControl {
display: flex;
height: 30px;
Expand Down Expand Up @@ -327,29 +390,122 @@
font-weight: var(--font-weight-bold);
}

.configurationNotice {
.setupSteps {
display: grid;
gap: var(--spacing-m);
margin: var(--spacing-m) 0 0;
padding: 0;
list-style: none;
}

.setupStep {
display: grid;
gap: var(--spacing-s);
}

.setupStepHeader {
display: flex;
min-height: 34px;
min-height: 24px;
align-items: center;
gap: 8px;
margin-top: var(--spacing-m);
padding: 6px 8px;
}

.setupStepNumber {
display: grid;
width: 20px;
height: 20px;
flex: none;
place-items: center;
border: 1px solid var(--color--border);
background: var(--color--surface-muted);
font-size: var(--font-size-s);
border-radius: var(--radius-full, 999px);
color: var(--color--ink-subtle);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
}

.configurationNotice + .connectionForm {
margin-top: var(--spacing-s);
.setupStepTitle {
flex: 1;
min-width: 0;
}

.configurationNotice svg {
width: 15px;
height: 15px;
flex: none;
.setupStepDone,
.setupStepToDo {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
border-radius: var(--radius-full, 999px);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
}

.setupStepDone {
background: var(--color--success-soft--surface);
color: var(--color--success-soft--ink);
}

.setupStepToDo {
background: var(--color--warning-soft--surface);
color: var(--color--warning-soft--ink);
}

.setupStepDone svg,
.setupStepToDo svg {
width: 12px;
height: 12px;
}

.setupStepBody {
display: grid;
justify-items: start;
gap: var(--spacing-m);
margin-left: 28px;
color: var(--color--ink-subtle);
font-size: var(--font-size-xs);
}

.setupStepBody p {
margin: 0;
}

/* The access notices line up with the step's own text inside a setup step. */
.setupStepBody .authorizationNotice {
display: grid;
justify-items: start;
gap: var(--spacing-s);
margin: 0;
}

.accessChoices {
display: grid;
gap: 4px;
}

.accessChoices ul {
margin: 0;
padding-left: 16px;
}

.accessChoices li + li {
margin-top: 2px;
}

.chatsAfterSetup {
display: grid;
gap: var(--spacing-s);
margin-top: 6px;
}

.chatsAfterSetup textarea {
resize: none;
}

.chatHistory .recentChats {
margin-top: 0;
padding-top: 0;
border-top: 0;
}

.recentChats {
margin-top: 18px;
padding-top: 14px;
Expand Down Expand Up @@ -485,7 +641,7 @@

.transcriptInner {
box-sizing: border-box;
width: 100%;
width: min(100%, 760px);
min-height: 100%;
margin: 0 auto;
padding: 14px 14px 18px;
Expand Down Expand Up @@ -1170,7 +1326,7 @@

.composerInner {
box-sizing: border-box;
width: 100%;
width: min(100%, 760px);
margin: 0 auto;
padding: 10px 14px 12px;
}
Expand Down
Loading