apps/web/app/components/agents/builder.tsx · flagon-io/g1t

"w-full rounded-md border border-line bg-bg px-3 py-2 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim";

27

const PRIMARY = "inline-flex h-9 items-center justify-center gap-2 rounded-md bg-accent px-4 text-sm font-medium text-bg transition-colors hover:bg-accent-hover disabled:opacity-60";

28

const QUIET =

29

"inline-flex h-9 items-center justify-center gap-2 rounded-md border border-line px-3.5 text-sm font-medium text-fg/85 transition-colors hover:border-line-strong hover:bg-raised hover:text-fg disabled:opacity-60";

30

31

/** What the builder's actions answer. */

32

export type BuilderAnswer =

33

| { intent: "draft"; ok: true; proposal: AgentProposal }

34

| { intent: "try"; ok: true; text: string; charged_micros: number }

35

| { intent: "redraft"; ok: true; redraft: AgentRedraft }

36

| { intent: string; ok: false; error: string };

37

38

/** Things people ask agents to do, to start the box when it is empty. */

39

const EXAMPLES = [

40

"Every Monday, read last week's merged pull requests and write release notes in our Releases space.",

41

"Triage new bug reports: reproduce them from the steps, label them, and ask for what's missing.",

42

"Keep me on top of my week: summarise what I'm mentioned in and what's waiting on me.",

43

"Review database migrations for locking, data loss and missing indexes before they merge.",

44

];

45

46

// ── Describe it ───────────────────────────────────────────────────────────

47

48

/**

49

* The first thing New agent shows: one box, "What should this agent do?",

50

* the roles to start from under it, and the full form for those who want it.

51

*/

52

export function DescribeBox({

slug,

owner,

mayCreate,

templates,

fetcher,

initial,

}: {

slug: string;

owner: boolean;

/** Whether the viewer may create an agent here at all. */

63

mayCreate: boolean;

64

templates: AgentTemplate[];

65

fetcher: ReturnType<typeof useFetcher<BuilderAnswer>>;

66

initial?: string;

67

}) {

68

const [text, setText] = useState(initial ?? "");

69

const [scope, setScope] = useState<"workspace" | "personal">(owner ? "workspace" : "personal");

70

const busy = fetcher.state !== "idle";

71

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok && fetcher.data.intent === "draft" ? fetcher.data.error : null;

72

return (

73

<div>

74

<fetcher.Form method="post" className="relative">

What should this agent do?

</label>

<div

className={cn(

"rounded-2xl border border-line bg-surface p-1.5 shadow-sm transition-colors focus-within:border-accent/60 focus-within:ring-4 focus-within:ring-accent/10",

83

!mayCreate && "opacity-60",

)}

>

<textarea

id="description"

name="description"

value={text}

onChange={(event) => setText(event.target.value)}

91

onKeyDown={(event) => {

92

if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && text.trim().length >= 3) event.currentTarget.form?.requestSubmit();

93

}}

94

disabled={!mayCreate || busy}

95

rows={4}

96

maxLength={2000}

97

placeholder="Describe the job: what it does, for whom, and what good looks like."

98

className="block w-full resize-none bg-transparent px-3 pt-2.5 pb-1 text-base leading-relaxed outline-none placeholder:text-faint sm:text-[0.9375rem]"

/>

{owner ? (

{(

[

["workspace", "The workspace", <Users key="w" size={13} />],

106

["personal", "Just me", <Lock key="p" size={13} />],

107

] as const

108

).map(([value, label, icon]) => (

<button

key={value}

type="button"

role="radio"

aria-checked={scope === value}

114

onClick={() => setScope(value)}

115

className={cn(

116

"inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors",

117

scope === value ? "bg-raised text-fg shadow-sm ring-1 ring-line-strong" : "text-muted hover:text-fg",

)}

>

{icon}

{label}

</button>

))}

</div>

) : (

Your personal agent

</span>

)}

<span className="hidden text-xs text-faint sm:inline">{busy ? "Drafting…" : "Ctrl+Enter"}</span>

133

134

135

{busy ? "Drafting…" : "Draft it"}

</button>

</div>

</div>

</fetcher.Form>

{error && <p className="mt-3 rounded-lg border border-danger/40 bg-danger/10 px-4 py-2.5 text-sm text-danger">{error}</p>}

141

142

{scope === "personal"

143

? "Only you can talk to it, in your direct message with it. It spends from your own budget: $20 a month and $2 a session to start."

144

: "Everyone in the workspace can talk to it. It starts with the workspace's budget for a new agent."}{" "}

145

Drafting is a quick model call charged to you; nothing is saved until you create it.

146

</p>

147

{!text && mayCreate && (

148

149

<p className="text-xs font-medium text-faint">For example</p>

150

151

{EXAMPLES.map((example) => (

<button

type="button"

onClick={() => setText(example)}

156

className="w-full rounded-lg border border-line bg-bg px-3 py-2 text-left text-[0.8125rem] leading-snug text-muted transition-colors hover:border-line-strong hover:text-fg"

>

{example}

</button>

</li>

))}

</ul>

</div>

)}

{templates.length > 0 && (

166

167

<p className="text-xs font-medium text-faint">or start from a role</p>

168

169

{templates.map((template) => (

170

171

<Link

172

to={`?template=${encodeURIComponent(template.id)}`}

173

preventScrollReset

174

className="inline-flex h-8 items-center gap-2 rounded-full border border-line bg-surface pr-3 pl-1 text-[0.8125rem] text-fg/85 transition-colors hover:border-line-strong hover:text-fg"

>

{template.title}

</Link>

</li>

))}

<li>

<Link

to="?template=blank"

preventScrollReset

className="inline-flex h-8 items-center gap-1.5 rounded-full border border-dashed border-line-strong px-3 text-[0.8125rem] text-muted transition-colors hover:text-fg"

>

Edit all fields

</Link>

</li>

</ul>

Read each role in full

</Link>

</p>

</div>

)}

</div>

);

}

// ── The drafted agent ─────────────────────────────────────────────────────

203

204

function Label({ htmlFor, children, hint }: { htmlFor?: string; children: ReactNode; hint?: ReactNode }) {

return (

{children}

</label>

{hint && <span className="text-xs text-faint">{hint}</span>}

</div>

);

}

function Section({ title, about, children }: { title: string; about?: ReactNode; children: ReactNode }) {

216

return (

217

218

<h3 className="text-xs font-semibold tracking-wide text-faint uppercase">{title}</h3>

219

{about && <p className="mt-1 text-xs text-muted">{about}</p>}

220

<div className="mt-3 space-y-3">{children}</div>

</section>

);

}

/**

* The drafted agent as a card to edit: who it is, its job, what it is

227

* responsible for, its voice, the skills it keeps on, what it needs

228

* connected, routines that would suit it, its model limits and budget.

229

* Only the name and the job are required.

230

*/

231

export function ProposalCard({

slug,

owner,

proposal,

value,

onChange,

joinable = [],

teams = [],

onTeams,

}: {

slug: string;

owner: boolean;

proposal: AgentProposal;

244

value: BuilderDefinition;

245

onChange: (next: BuilderDefinition) => void;

246

/** The teams the person may add it to; a workspace agent only. */

247

joinable?: { slug: string; name: string }[];

248

/** The teams chosen to add it to: memberships, posted with Create, never part of the draft. */

249

teams?: string[];

250

onTeams?: (next: string[]) => void;

251

}) {

252

const ideas = [proposal.definition.display_name, ...proposal.name_ideas];

253

const [idea, setIdea] = useState(0);

254

const [handleEdited, setHandleEdited] = useState(false);

255

const set = (patch: Partial<BuilderDefinition>) => onChange({ ...value, ...patch });

256

const rename = (name: string) => set({ display_name: name, ...(handleEdited ? {} : { handle: cleanHandle(name) }) });

257

const off = new Set(value.skills_off ?? []);

258

const suggested = new Set(proposal.skills);

259

const hints = proposal.integrations.map((s) => integrationHint(slug, s, owner)).filter((h) => h !== null);

260

const seed = value.avatar_seed || value.handle || "agent";

return (

<button

type="button"

aria-label="Another face"

270

onClick={() => set({ avatar_seed: `${value.handle || "agent"}-${Math.random().toString(36).slice(2, 7)}` })}

271

className="absolute -right-1.5 -bottom-1.5 flex size-6 items-center justify-center rounded-full border border-line bg-bg text-muted shadow-sm transition-colors hover:text-fg"

>

</button>

</Hint>

</div>

<div>

<input id="b-name" value={value.display_name} onChange={(e) => rename(e.target.value)} className={FIELD} autoComplete="off" data-1p-ignore required />

282

{ideas.length > 1 && (

<button

type="button"

aria-label="Another name"

287

onClick={() => {

288

const next = (idea + 1) % ideas.length;

289

setIdea(next);

290

rename(ideas[next]!);

291

}}

292

className="flex size-9.5 shrink-0 items-center justify-center rounded-md border border-line text-muted transition-colors hover:border-line-strong hover:bg-raised hover:text-fg"

>

</button>

</Hint>

)}

</div>

</div>

<div>

<Label htmlFor="b-handle">Handle</Label>

<input

id="b-handle"

value={value.handle}

onChange={(e) => {

setHandleEdited(true);

309

set({ handle: e.target.value });

310

}}

311

className="min-w-0 grow bg-transparent py-2 pr-3 pl-0.5 font-mono text-sm outline-none"

autoComplete="off"

data-1p-ignore

/>

</div>

</div>

<div>

<Label htmlFor="b-title">Title</Label>

319

<input id="b-title" value={value.title ?? ""} onChange={(e) => set({ title: e.target.value })} placeholder="Release Manager" className={FIELD} autoComplete="off" />

</div>

</div>

</div>

{onTeams && (

{value.scope === "personal" ? null : <TeamPicker teams={joinable} value={teams} onChange={onTeams} />}

</Section>

)}

<textarea

aria-label="Job"

value={value.instructions}

334

onChange={(e) => set({ instructions: e.target.value })}

335

rows={8}

336

required

337

className={`${FIELD} resize-y font-mono text-[0.8125rem] leading-relaxed`}

/>

<div>

Responsibilities

</Label>

<textarea

id="b-duties"

value={(value.responsibilities ?? []).join("\n")}

346

onChange={(e) => set({ responsibilities: e.target.value.split("\n").slice(0, 8) })}

347

onBlur={() => set({ responsibilities: (value.responsibilities ?? []).map((d) => d.trim()).filter(Boolean) })}

348

rows={Math.max(3, (value.responsibilities ?? []).length)}

349

className={`${FIELD} resize-y`}

/>

</div>

</Section>

{PRESETS.map((option) => (

<button

key={option.value}

type="button"

role="radio"

aria-checked={value.personality_preset === option.value}

362

onClick={() => set({ personality_preset: option.value })}

363

className={cn(

364

"h-8 rounded-md text-[0.8125rem] font-medium transition-colors",

365

value.personality_preset === option.value ? "bg-raised text-fg shadow-sm ring-1 ring-line-strong" : "text-muted hover:text-fg",

)}

>

{option.label}

</button>

))}

</div>

<input aria-label="In its own words" value={value.personality ?? ""} onChange={(e) => set({ personality: e.target.value })} placeholder="In its own words (optional)" className={FIELD} />

</Section>

{FOUNDATIONAL_SKILLS.map((skill) => {

378

const on = !off.has(skill.id);

return (

<label

key={skill.id}

className="flex min-h-10 cursor-pointer items-center gap-2.5 rounded-lg border border-line bg-bg px-3 py-2 text-sm has-[[data-state=checked]]:border-accent/50 has-[[data-state=checked]]:bg-accent/5"

>

<Checkbox

checked={on}

onCheckedChange={() => {

387

const next = new Set(off);

388

if (on) next.add(skill.id);

389

else next.delete(skill.id);

390

set({ skills_off: FOUNDATIONAL_SKILLS.map((s) => s.id).filter((id) => next.has(id)) });

391

}}

392

/>

393

<span className="min-w-0 grow truncate">{skill.name}</span>

394

{suggested.has(skill.id) && suggested.size < FOUNDATIONAL_SKILLS.length && (

Suggested

</Badge>

)}

</label>

);

})}

</div>

</Section>

{hints.length > 0 && (

406

407

408

{hints.map((hint) => (

{hint.why && <span className="block text-xs text-muted">{hint.why}</span>}

414

</span>

415

{hint.action === "soon" ? (

) : (

{hint.action === "connect" ? "Connect" : "Ask an owner"}

</Link>

)}

</li>

))}

</ul>

</Section>

)}

{proposal.routines.length > 0 && (

429

<Section

430

title="Routines that would suit it"

431

about={value.scope === "personal" ? "Personal agents can't run routines yet. An owner can promote it to a workspace agent, which can." : "Set them up on its Routines tab once it exists."}

432

>

433

434

{proposal.routines.map((routine) => (

435

436

437

{routine.name} <span className="font-normal text-muted">· {routine.when}</span>

438

</p>

439

{routine.instructions && <p className="mt-0.5 text-xs text-muted">{routine.instructions}</p>}

</li>

))}

</ul>

</Section>

)}

{(["floor", "ceiling"] as const).map((key) => (

449

450

<Label htmlFor={`b-${key}`}>{key === "floor" ? "Floor" : "Ceiling"}</Label>

451

<Select

452

value={value.routing?.[key] ?? "none"}

453

onValueChange={(tier) =>

454

set({ routing: { floor: null, ceiling: null, providers: [], pinned: null, ...value.routing, [key]: tier === "none" ? null : (tier as "small") } })

}

>

</SelectTrigger>

<SelectItem value="none">{key === "floor" ? "No floor" : "No ceiling"}</SelectItem>

462

{(["small", "large", "frontier"] as const).map((tier) => (

463

464

{TIER_LABELS[tier].split(":")[0]}

</SelectItem>

))}

</SelectContent>

</Select>

</div>

))}

{(

[

["monthly_micros", "Monthly"],

474

["task_micros", "Per session"],

475

] as const

476

).map(([key, label]) => (

{label}

</Label>

<input

id={`b-${key}`}

inputMode="decimal"

defaultValue={dollarsField(value.budget?.[key])}

487

onBlur={(e) => {

488

const micros = microsFromDollars(e.target.value);

489

set({ budget: { ...value.budget, [key]: micros == null || Number.isNaN(micros) ? null : micros } });

490

}}

491

placeholder="No cap"

492

className="min-w-0 grow bg-transparent px-2 py-2 text-sm tabular-nums outline-none placeholder:text-faint"

autoComplete="off"

data-1p-ignore

/>

</div>

</div>

))}

</div>

</Section>

</div>

);

}

// ── Try it ────────────────────────────────────────────────────────────────

506

507

/**

508

* A test chat with the drafted agent, as it is in the card right now:

509

* charged to the person trying it, and nothing kept once they leave.

510

*/

511

export function TryChat({ definition, onReset }: { definition: BuilderDefinition; onReset?: () => void }) {

512

const fetcher = useFetcher<BuilderAnswer>({ key: "agent-try" });

513

const [turns, setTurns] = useState<DraftTurn[]>([]);

514

const [text, setText] = useState("");

515

const [spent, setSpent] = useState(0);

516

const handled = useRef<unknown>(null);

517

const log = useRef<HTMLDivElement>(null);

518

const busy = fetcher.state !== "idle";

519

useEffect(() => {

520

if (fetcher.state !== "idle" || !fetcher.data || handled.current === fetcher.data) return;

521

handled.current = fetcher.data;

522

if (fetcher.data.ok && fetcher.data.intent === "try") {

523

const answer = fetcher.data;

524

setTurns((now) => [...now, { role: "assistant", content: answer.text }]);

525

setSpent((n) => n + answer.charged_micros);

526

}

527

}, [fetcher.state, fetcher.data]);

528

// The newest message in view, scrolling only the conversation, never the page.

529

useEffect(() => {

530

if (log.current) log.current.scrollTop = log.current.scrollHeight;

531

}, [turns.length, busy]);

532

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok && fetcher.data.intent === "try" ? fetcher.data.error : null;

533

const send = () => {

534

const body = text.trim();

535

if (!body || busy) return;

536

const next: DraftTurn[] = [...turns, { role: "user", content: body }];

537

setTurns(next);

538

setText("");

539

fetcher.submit({ intent: "try", definition: JSON.stringify(definition), messages: JSON.stringify(next.slice(-24)) }, { method: "post" });

540

};

541

const name = definition.display_name || "your agent";

return (

<p className="truncate text-xs text-muted">Talk to {name} as it is drafted. Charged to you; nothing is saved.</p>

549

</div>

550

{turns.length > 0 && (

<button

type="button"

aria-label="Start over"

onClick={() => {

setTurns([]);

onReset?.();

}}

className="flex size-8 items-center justify-center rounded-md text-faint transition-colors hover:bg-raised hover:text-fg"

>

</button>

</Hint>

)}

</div>

{turns.length === 0 && (

568

569

570

<p className="mt-3 text-sm font-medium">Ask {name} something it would get asked</p>

571

<p className="mt-1 max-w-xs text-xs text-muted">It answers from its job and voice. It has no tools or memory until you create it.</p>

572

</div>

573

)}

574

{turns.map((turn, at) =>

575

turn.role === "user" ? (

576

577

<p className="max-w-[85%] rounded-2xl rounded-br-md bg-accent/15 px-3.5 py-2 text-sm whitespace-pre-wrap text-fg">{turn.content}</p>

</div>

) : (

</div>

</div>

),

)}

{busy && (

{name} is typing…

</div>

)}

{error && <p className="rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-xs text-danger">{error}</p>}

595

</div>

596

<form

597

className="flex items-end gap-2 border-t border-line p-2.5"

598

onSubmit={(event) => {

599

event.preventDefault();

send();

}}

>

Message {name}

</label>

<textarea

id="try-message"

value={text}

onChange={(e) => setText(e.target.value)}

610

onKeyDown={(e) => {

611

if (e.key === "Enter" && !e.shiftKey) {

e.preventDefault();

send();

}

}}

rows={1}

maxLength={4000}

placeholder={`Message ${name}`}

619

className="max-h-32 min-h-9 min-w-0 grow resize-none rounded-md border border-line bg-bg px-3 py-2 text-sm outline-none placeholder:text-faint focus:border-accent-dim"

/>

</button>

</form>

{spent > 0 && <p className="border-t border-line px-4 py-1.5 text-[0.6875rem] text-faint tabular-nums">Trying it has cost you {money(spent)} so far.</p>}

</div>

);

}

// ── Create ────────────────────────────────────────────────────────────────

631

632

/** Saves the drafted agent: its hello is waiting in a direct message. */

633

export function CreateDraft({ definition, teams = [], onEditAll }: { definition: BuilderDefinition; teams?: string[]; onEditAll: () => void }) {

634

const navigation = useNavigation();

635

const busy = navigation.state !== "idle" && navigation.formData?.get("intent") === "create_draft";

636

const ready = definition.display_name.trim() && definition.instructions.trim() && definition.handle.trim();

return (

{teams.map((slug) => (

))}

Edit all fields

</button>

{busy ? "Creating…" : `Create ${definition.display_name.trim() || "agent"}`}

</button>

</Form>

);

}

// ── Change it in words ────────────────────────────────────────────────────

656

657

/**

658

* "Tell <name> what to change": the change is drafted, shown field by

659

* field with the job as a diff, and saved as a new version only when the

660

* person says so.

661

*/

662

export function RedraftBox({ agent }: { agent: WorkspaceAgent }) {

663

const fetcher = useFetcher<BuilderAnswer>({ key: `redraft:${agent.id}` });

664

const save = useFetcher<{ ok?: boolean; saved?: boolean; errors?: Record<string, string> }>({ key: `redraft-save:${agent.id}` });

665

const [text, setText] = useState("");

666

const [shown, setShown] = useState<AgentRedraft | null>(null);

667

const handled = useRef<unknown>(null);

668

useEffect(() => {

669

if (fetcher.state !== "idle" || !fetcher.data || handled.current === fetcher.data) return;

670

handled.current = fetcher.data;

671

if (fetcher.data.ok && fetcher.data.intent === "redraft") setShown(fetcher.data.redraft);

672

}, [fetcher.state, fetcher.data]);

673

useEffect(() => {

674

if (save.state === "idle" && save.data?.saved) {

setShown(null);

setText("");

}

}, [save.state, save.data]);

679

const busy = fetcher.state !== "idle";

680

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok && fetcher.data.intent === "redraft" ? fetcher.data.error : null;

681

const saveError = save.state === "idle" && save.data && !save.data.saved ? (save.data.errors?.form ?? save.data.errors?.handle ?? null) : null;

682

const skillName = (id: string) => FOUNDATIONAL_SKILLS.find((s) => s.id === id)?.name ?? id;

683

const rows = shown ? changeRows(agent, shown.changes, skillName) : [];

684

return (

685

686

<fetcher.Form method="post" className="p-4 sm:p-5">

Tell {agent.display_name} what to change

691

</h2>

692

<p className="mt-1 text-xs text-muted">Say it in your own words. You'll see the change before it's saved as version {agent.version + 1}. Drafting it is charged to you.</p>

What should change

</label>

<textarea

id="redraft-request"

name="request"

value={text}

onChange={(e) => setText(e.target.value)}

702

onKeyDown={(e) => {

703

if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && text.trim().length >= 3) e.currentTarget.form?.requestSubmit();

}}

rows={2}

maxLength={1000}

placeholder={`Answer in Spanish, and keep replies under five sentences`}

708

className={`${FIELD} grow resize-y`}

/>

{busy ? "Drafting…" : "Draft the change"}

713

</button>

714

</div>

715

{error && <p className="mt-3 rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger">{error}</p>}

</fetcher.Form>

{shown && (

<span className="font-medium">{shown.summary}</span>{" "}

721

722

{rows.length} {rows.length === 1 ? "change" : "changes"} to version {shown.from_version}.

</span>

</p>

{saveError && <p className="mt-3 rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger">{saveError}</p>}

727

<save.Form method="post" className="mt-4 flex flex-wrap items-center justify-end gap-2">

<button type="button" onClick={() => setShown(null)} className={QUIET}>

Discard

</button>

{save.state !== "idle" ? "Saving…" : `Save as version ${agent.version + 1}`}

</button>

</save.Form>

</div>

)}

</section>

);

}

/** Each field a change touches, before and after; the job and duties as a line diff. */

746

export function ChangeList({ rows }: { rows: ChangeRow[] }) {

return (

{rows.map((row) => (

<dt className="text-xs font-medium text-faint">{row.label}</dt>

752

{row.lines ? (

753

754

{row.lines.map((line, at) => (

<div

key={at}

className={cn(

"flex gap-2 px-2 whitespace-pre-wrap",

759

line.kind === "added" && "bg-success/10 text-success",

760

line.kind === "removed" && "bg-danger/10 text-danger line-through decoration-danger/40",

761

line.kind === "same" && "text-muted",

)}

>

{line.kind === "added" ? "+" : line.kind === "removed" ? "−" : " "}

766

</span>

767

<span className="sr-only">{line.kind === "added" ? "Added: " : line.kind === "removed" ? "Removed: " : ""}</span>

</div>

))}

</dd>

) : (

<span className="text-muted line-through decoration-line-strong">{row.before}</span>

→

</span>

<span className="sr-only">becomes</span>

779

<span className="font-medium text-fg">{row.after}</span>

</dd>

)}

</div>

))}

</dl>

);

}

/** Whose personal agent it is, and, for owners, making it the workspace's. */

789

export function PersonalNotice({ agent, owner, mine }: { agent: WorkspaceAgent; owner: boolean; mine: boolean }) {

790

const navigation = useNavigation();

791

const [asking, setAsking] = useState(false);

792

const busy = navigation.state !== "idle" && navigation.formData?.get("intent") === "promote";

return (

{mine ? "Your personal agent" : `@${agent.personal_owner ?? "a member"}'s personal agent`}

</h2>

{mine

? "Only you can talk to it, in your direct message with it, and it spends from your budget. It isn't in channels, and other agents don't hand it work."

802

: `Only @${agent.personal_owner ?? "its member"} talks to it, and it spends from their budget. As an owner you can archive it, or make it a workspace agent everyone can talk to.`}

</p>

{owner && (

{asking ? (