@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/prompt-area/use-trigger-search.ts

@@ -3,10 +3,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { TriggerConfig, TriggerSuggestion } from './types.ts'
 
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
 type UseTriggerSearchReturn = {
   suggestions: TriggerSuggestion[]
   suggestionsLoading: boolean
@@ -17,10 +13,6 @@ type UseTriggerSearchReturn = {
   reset: () => void
 }
 
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
-
 /**
  * Manages async trigger search lifecycle: debouncing, AbortController
  * cancellation, race-condition prevention, loading/error state.
@@ -35,25 +27,28 @@ export function useTriggerSearch(): UseTriggerSearchReturn {
 
   // Version counter – belt-and-suspenders alongside AbortController
   const searchVersion = useRef(0)
-  // AbortController for cancelling in-flight async searches
   const abortController = useRef<AbortController | null>(null)
-  // Debounce timer for search queries
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const reset = useCallback(() => {
     abortController.current?.abort()
-    if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current)
+    }
     setSuggestions([])
     setSuggestionsLoading(false)
     setSuggestionsError(null)
   }, [])
 
   const search = useCallback((query: string, config: TriggerConfig) => {
-    if (!config.onSearch) return
+    if (!config.onSearch) {
+      return
+    }
 
-    // Cancel any previous in-flight request and pending debounce
     abortController.current?.abort()
-    if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current)
+    }
 
     setSuggestionsLoading(true)
     setSuggestionsError(null)
@@ -70,14 +65,20 @@ export function useTriggerSearch(): UseTriggerSearchReturn {
       if (result instanceof Promise) {
         void result.then(
           (items) => {
-            if (controller.signal.aborted || searchVersion.current !== version) return
+            if (controller.signal.aborted || searchVersion.current !== version) {
+              return
+            }
             setSuggestions(items)
             setSuggestionsLoading(false)
           },
           (error: unknown) => {
-            if (controller.signal.aborted || searchVersion.current !== version) return
+            if (controller.signal.aborted || searchVersion.current !== version) {
+              return
+            }
             // Silently ignore AbortError (expected when superseded)
-            if (error instanceof DOMException && error.name === 'AbortError') return
+            if (error instanceof DOMException && error.name === 'AbortError') {
+              return
+            }
             setSuggestionsError(error instanceof Error ? error.message : 'Search failed')
             setSuggestionsLoading(false)
             onSearchError?.(error)
@@ -97,11 +98,12 @@ export function useTriggerSearch(): UseTriggerSearchReturn {
     }
   }, [])
 
-  // Clean up on unmount
   useEffect(() => {
     return () => {
       abortController.current?.abort()
-      if (debounceTimer.current) clearTimeout(debounceTimer.current)
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current)
+      }
     }
   }, [])
 

package/src/components/terminal/PermissionPrompt.tsx

@@ -1,41 +1,22 @@
 import { useState } from 'react'
 import type { PermissionRequest } from '@workerdeck/protocol'
 import { toolInputPreview } from '../../lib/format.ts'
+import { planFromRequest } from '../../lib/plan-request.ts'
 import { TerminalDiff, previewPatch } from './diff.tsx'
+import { TerminalMarkdown } from './markdown.tsx'
 import { Choices, Hint, PromptInput, PromptTitle, Rule } from './prompt.tsx'
 import { Blank, Row } from './row.tsx'
 
-/**
- * The approval, as the CLI draws it: a rule, what is being asked and about what,
- * the change itself, a dashed rule, the question, numbered answers, and the keys.
- *
- * Two things it does that the card version does not, both taken from the CLI:
- *
- * - **It shows the change, not the payload.** For a file edit, `old_string` and
- *   `new_string` are a diff — so it renders one, rather than the JSON input a
- *   reader would have to diff in their head. Without line numbers, necessarily:
- *   the edit has not happened and this client has never read the file (see
- *   {@link previewPatch}). Everything else falls back to the input.
- * - **The heading is the engine's own sentence.** `displayName` ("Edit file")
- *   over `title`, never "wants to use {tool}" composed here — for codex an
- *   approval is an *escalation after a sandbox refusal*, and the runner has
- *   already written the sentence that says so.
- */
+const PLAN_SCROLL = { maxHeight: 'min(24rem, 50vh)', overflowY: 'auto' } as const
+
 export interface TerminalPermissionPromptProps {
   request: PermissionRequest
   onApprove: (requestId: string) => void
-  /** `message` is fed back to the agent, which can then try something else;
-   * `interrupt` also stops the turn. */
   onDeny: (requestId: string, message?: string, interrupt?: boolean) => void
   className?: string
 }
 
-export function TerminalPermissionPrompt({
-  request,
-  onApprove,
-  onDeny,
-  className,
-}: TerminalPermissionPromptProps) {
+export function TerminalPermissionPrompt({ request, onApprove, onDeny, className }: TerminalPermissionPromptProps) {
   const [focused, setFocused] = useState(0)
   const [denying, setDenying] = useState(false)
   const [reason, setReason] = useState('')
@@ -47,47 +28,61 @@ export function TerminalPermissionPrompt({
     setDenying(false)
   }
 
-  const patch = previewPatch(request.input)
-  const summary = toolInputPreview(request.input)
-  const heading = request.displayName ?? request.title ?? 'Permission needed'
-  // The path is the subject when there is one; otherwise the input preview says
-  // what this is about, which for a Bash approval is the command itself.
+  const plan = planFromRequest(request)
+  const patch = plan ? undefined : previewPatch(request.input)
+  const summary = plan ? '' : toolInputPreview(request.input)
+  const heading = plan ? 'Plan ready for review' : (request.displayName ?? request.title ?? 'Permission needed')
   const subject = patch?.path ?? (summary || undefined)
 
-  // "Deny" opens the reason field rather than acting, because a denial the agent
-  // can learn from is the one worth defaulting to — an empty field still denies.
-  const options = [
-    { key: 'allow', label: 'Yes' },
-    {
-      key: 'deny',
-      label: 'No, and tell the agent what to do differently',
-      detail: denying ? (
-        <PromptInput
-          value={reason}
-          onChange={setReason}
-          onSubmit={() => deny(false)}
-          onCancel={() => setDenying(false)}
-          placeholder='Reason (optional) — the agent reads this and can try something else'
-        />
-      ) : undefined,
-    },
-    { key: 'stop', label: 'No, and stop the turn', danger: true },
-  ]
+  const reasonInput = denying ? (
+    <PromptInput
+      value={reason}
+      onChange={setReason}
+      onSubmit={() => deny(false)}
+      onCancel={() => setDenying(false)}
+      placeholder={
+        plan
+          ? 'What should change? (optional) — the agent keeps planning and reads this'
+          : 'Reason (optional) — the agent reads this and can try something else'
+      }
+    />
+  ) : undefined
+
+  const options = plan
+    ? [
+        { key: 'allow', label: 'Approve plan' },
+        { key: 'deny', label: 'Keep planning — tell it what to change', detail: reasonInput },
+        { key: 'stop', label: 'No, and stop the turn', danger: true },
+      ]
+    : [
+        { key: 'allow', label: 'Yes' },
+        { key: 'deny', label: 'No, and tell the agent what to do differently', detail: reasonInput },
+        { key: 'stop', label: 'No, and stop the turn', danger: true },
+      ]
 
   return (
     <div
-      data-slot='permission-prompt'
+      data-slot="permission-prompt"
       className={className}
       onKeyDown={(event) => {
         if (event.key === 'Escape') {
           event.preventDefault()
           deny(false)
         }
-      }}>
+      }}
+    >
       <Rule />
       <PromptTitle title={heading} subject={subject} />
       <Blank />
-      {patch ? (
+      {plan ? (
+        <>
+          <div style={PLAN_SCROLL}>
+            <TerminalMarkdown>{plan}</TerminalMarkdown>
+          </div>
+          <Blank />
+          <Rule dashed />
+        </>
+      ) : patch ? (
         <>
           <TerminalDiff patch={patch} />
           <Blank />
@@ -95,14 +90,12 @@ export function TerminalPermissionPrompt({
         </>
       ) : request.description ? (
         <>
-          <Row tone='dim'>{request.description}</Row>
+          <Row tone="dim">{request.description}</Row>
           <Blank />
         </>
       ) : null}
-      {request.decisionReason ? <Row tone='faint'>{request.decisionReason}</Row> : null}
-      <Row>
-        {request.title ?? `Do you want to proceed?`}
-      </Row>
+      {request.decisionReason ? <Row tone="faint">{request.decisionReason}</Row> : null}
+      <Row>{plan ? 'Ready to implement this plan?' : (request.title ?? `Do you want to proceed?`)}</Row>
       <Choices
         label={heading}
         options={options}
@@ -110,9 +103,13 @@ export function TerminalPermissionPrompt({
         onFocus={setFocused}
         active={!denying}
         onChoose={(index) => {
-          if (index === 0) onApprove(request.id)
-          else if (index === 1) setDenying(true)
-          else deny(true)
+          if (index === 0) {
+            onApprove(request.id)
+          } else if (index === 1) {
+            setDenying(true)
+          } else {
+            deny(true)
+          }
         }}
       />
       <Blank />

package/src/components/terminal/QuestionPrompt.tsx

@@ -4,56 +4,29 @@ import { parseUserQuestions } from '../agent/QuestionPrompt.tsx'
 import { Box, Choices, Hint, PromptInput, Rule, TabStrip, type Choice } from './prompt.tsx'
 import { Blank, Ink, Row } from './row.tsx'
 
-/**
- * The AskUserQuestion form, in the CLI's shape: **one question at a time**,
- * behind a strip of chips, ending in a review step.
- *
- * The card version stacks every question on screen at once, which is right for a
- * dialog and wrong here for a reason worth stating: a terminal form is answered
- * with the keyboard, and a stacked form has no answer to "where does `Tab` go" —
- * it has as many focus targets as there are options across every question. One
- * question at a time makes the keys unambiguous (`↑↓` within, `Tab` between,
- * `Enter` to take), and it is why the chips exist: something has to say that
- * answering the first of three is not finishing.
- *
- * The review step is the other half of that. Answers given one screen at a time
- * are answers you cannot see together, so the last chip shows all of them and
- * asks once more before they go back to the model.
- */
-
 type Selection = { labels: string[]; other: string; otherActive: boolean }
 
 const EMPTY: Selection = { labels: [], other: '', otherActive: false }
 
-/** A question's answer: chosen label(s), comma-joined, with any free-text
- * "Other" appended — the shape the CLI's own UI puts in `updatedInput.answers`. */
 function answerFor(selection: Selection): string {
   const parts = [...selection.labels]
-  if (selection.otherActive && selection.other.trim()) parts.push(selection.other.trim())
+  if (selection.otherActive && selection.other.trim()) {
+    parts.push(selection.other.trim())
+  }
   return parts.join(', ')
 }
 
 export interface TerminalQuestionPromptProps {
-  /** A pending permission whose toolName is 'AskUserQuestion'. */
   request: PermissionRequest
-  /** Allow the tool with `updatedInput` (the original input plus `answers`). */
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void
-  /** Deny the tool — the model proceeds without an answer. */
   onDismiss: (requestId: string, message?: string) => void
   className?: string
 }
 
-export function TerminalQuestionPrompt({
-  request,
-  onAnswer,
-  onDismiss,
-  className,
-}: TerminalQuestionPromptProps) {
+export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className }: TerminalQuestionPromptProps) {
   const questions = parseUserQuestions(request.input)
   const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY))
   const [cursors, setCursors] = useState<number[]>(() => questions.map(() => 0))
-  // Tabs are the questions plus the review step, so `questions.length` is the
-  // review — one index space, which is what makes Tab a single `+1`.
   const [tab, setTab] = useState(0)
   const [reviewCursor, setReviewCursor] = useState(0)
 
@@ -65,19 +38,18 @@ export function TerminalQuestionPrompt({
   const update = (index: number, patch: Partial<Selection>) =>
     setSelections((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)))
 
-  // Functional, and it has to be: reading `selections` from the render closure
-  // means two toggles in one tick both compute from the same base and the second
-  // silently drops the first. A multi-select is exactly where that happens.
   const toggle = (index: number, label: string, multiSelect: boolean) => {
     setSelections((prev) =>
       prev.map((current, i) => {
-        if (i !== index) return current
-        if (!multiSelect) return { ...current, labels: [label], otherActive: false }
+        if (i !== index) {
+          return current
+        }
+        if (!multiSelect) {
+          return { ...current, labels: [label], otherActive: false }
+        }
         return {
           ...current,
-          labels: current.labels.includes(label)
-            ? current.labels.filter((l) => l !== label)
-            : [...current.labels, label],
+          labels: current.labels.includes(label) ? current.labels.filter((l) => l !== label) : [...current.labels, label],
         }
       }),
     )
@@ -93,12 +65,11 @@ export function TerminalQuestionPrompt({
 
   const dismiss = () => onDismiss(request.id, 'Question dismissed by user')
 
-  const move = (delta: number) =>
-    setTab((current) => Math.min(questions.length, Math.max(0, current + delta)))
+  const move = (delta: number) => setTab((current) => Math.min(questions.length, Math.max(0, current + delta)))
 
   return (
     <div
-      data-slot='question-prompt'
+      data-slot="question-prompt"
       className={className}
       onKeyDown={(event) => {
         if (event.key === 'Escape') {
@@ -110,7 +81,8 @@ export function TerminalQuestionPrompt({
           event.preventDefault()
           move(event.shiftKey ? -1 : 1)
         }
-      }}>
+      }}
+    >
       <Rule />
       <TabStrip
         tabs={[
@@ -137,10 +109,7 @@ export function TerminalQuestionPrompt({
         />
       ) : (
         <QuestionStep
-          // Keyed by question, and load-bearing: without it React reuses the
-          // step across a Tab and the option list never re-arms its focus, so
-          // the keyboard lands on nothing and the next `3` or `Esc` goes
-          // nowhere. Remounting is also what re-runs the focus takeover.
+          // Keyed by question and load-bearing: without it React reuses the step across a Tab and the option list never re-arms its focus.
           key={tab}
           question={questions[tab]!}
           selection={selection}
@@ -153,9 +122,7 @@ export function TerminalQuestionPrompt({
         />
       )}
       <Blank />
-      <Hint>
-        Enter to select · ↑/↓ to navigate · Tab to switch questions · Esc to cancel
-      </Hint>
+      <Hint>Enter to select · ↑/↓ to navigate · Tab to switch questions · Esc to cancel</Hint>
     </div>
   )
 }
@@ -188,21 +155,14 @@ function QuestionStep({
         key: option.label,
         label: option.label,
         description: option.description,
-        // Markers only where there is state to keep: a multi-select accumulates
-        // and has to show what is in the set, a one-of answers itself by being
-        // chosen and moves on — a column of empty radios in front of it would be
-        // three characters of nothing on every row. The CLI draws it the same way.
         checked: multiSelect ? selected : undefined,
         marker: 'check',
         selected: !multiSelect && selected,
-        // A preview shows on **focus**, not only on selection: walking a list
-        // with the arrow keys, "what does this one look like" is the question
-        // the cursor is asking.
         detail:
           option.preview && cursor === index ? (
             <Box>
               {option.preview.split('\n').map((line, row) => (
-                <Row key={row} columns={0} tone='dim'>
+                <Row key={row} columns={0} tone="dim">
                   {line || ' '}
                 </Row>
               ))}
@@ -213,8 +173,6 @@ function QuestionStep({
     {
       key: '__other',
       label: 'Other…',
-      // Always markered, in both kinds: this row is a *mode* (the field is open
-      // or it isn't), which the reader cannot see any other way.
       checked: selection.otherActive,
       marker: 'check' as const,
       detail: selection.otherActive ? (
@@ -223,20 +181,17 @@ function QuestionStep({
           onChange={(value) => onOther({ other: value })}
           onSubmit={onAdvance}
           onCancel={() => onOther({ otherActive: false, other: '' })}
-          placeholder='Type your own answer'
+          placeholder="Type your own answer"
         />
       ) : undefined,
     },
-    // Multi-select has no natural end — every toggle leaves the list where it
-    // was — so it needs a row that says "done with this one". A one-of answers
-    // itself by being chosen and advances on its own.
     ...(multiSelect ? [{ key: '__next', label: 'Submit' }] : []),
     { key: '__chat', label: 'Chat about this' },
   ]
 
   return (
     <>
-      <Row bold tone='bright'>
+      <Row bold tone="bright">
         {question.question}
       </Row>
       <Blank />
@@ -249,9 +204,9 @@ function QuestionStep({
         onChoose={(index) => {
           if (index < question.options.length) {
             onToggle(question.options[index]!.label)
-            // A one-of is finished the moment it is picked; making the reader
-            // press Tab as well would be a keystroke that answers nothing.
-            if (!multiSelect) onAdvance()
+            if (!multiSelect) {
+              onAdvance()
+            }
             return
           }
           if (index === question.options.length) {
@@ -269,7 +224,6 @@ function QuestionStep({
   )
 }
 
-/** The last chip: every answer together, and one more chance to change it. */
 function ReviewStep({
   questions,
   answers,
@@ -289,30 +243,25 @@ function ReviewStep({
 }) {
   return (
     <>
-      <Row bold tone='bright'>
+      <Row bold tone="bright">
         Review your answers
       </Row>
       <Blank />
       {questions.map((question, index) => (
         <div key={index}>
-          <Row glyph='●' glyphTone='dim'>
+          <Row glyph="●" glyphTone="dim">
             {question.question}
           </Row>
-          <Row indent={1} glyph='→' glyphTone='green'>
-            <Ink tone={answers[index] ? 'green' : 'faint'}>
-              {answers[index] || 'not answered'}
-            </Ink>
+          <Row indent={1} glyph="→" glyphTone="green">
+            <Ink tone={answers[index] ? 'green' : 'faint'}>{answers[index] || 'not answered'}</Ink>
           </Row>
         </div>
       ))}
       <Blank />
       <Row>{complete ? 'Ready to submit your answers?' : 'Some questions are unanswered.'}</Row>
       <Choices
-        label='Submit answers'
+        label="Submit answers"
         options={[
-          // Offered even when incomplete: an unanswered question is a legitimate
-          // answer to give, and the model is told which ones were skipped. What
-          // it must not do is *look* finished, which is what the row above says.
           { key: 'submit', label: complete ? 'Submit answers' : 'Submit anyway' },
           { key: 'cancel', label: 'Cancel', danger: true },
         ]}

package/src/components/terminal/StatusLine.tsx

@@ -12,25 +12,6 @@ import {
 } from '../../lib/status.ts'
 import { Ink, Row, type Tone } from './row.tsx'
 
-/**
- * The session's readings, as one line.
- *
- * The styled bar puts each of these in its own affordance — a progress ring, a
- * badge, a tooltip — which is right for a dashboard and wrong here for the usual
- * reason: a terminal has one line height, and five widgets of five different
- * heights is five different rhythms in a row that is supposed to be quiet. So
- * they are words, `·`-separated, exactly as the CLI's own status line writes
- * them.
- *
- * The readings themselves come from the same helpers the styled bar uses
- * (`lib/status.ts`), and that matters more than it looks: `statusPresentation`
- * is where the rule lives that **a dropped socket outranks the session status**,
- * because a status held over a dead socket is a stale reading being presented as
- * a live one. Re-deriving that here would be a second answer to a question that
- * already has one.
- */
-
-/** Severity → tone. The 80/95 thresholds are `lib/status.ts`'s, not new ones. */
 const SEVERITY_TONE: Record<StatusSeverity, Tone> = {
   none: 'dim',
   warning: 'yellow',
@@ -40,36 +21,19 @@ const SEVERITY_TONE: Record<StatusSeverity, Tone> = {
 export interface TerminalStatusLineProps {
   className?: string
   state: TranscriptState
-  /** Plan windows to read from, when they should not be the session's own — the
-   * gateway's per-profile state merged over this transcript's. See
-   * {@link StatusBarProps.rateLimits}. Absent = `state.rateLimits`. */
   rateLimits?: Record<string, RateLimitInfo>
-  /** How the client is doing at reaching the gateway. Wins the status slot when
-   * the socket is down — see above. */
   connection?: ConnectionState
-  /** Opens the panel that answers each reading's own question. Omit and the
-   * reading is text rather than something to press. */
   onOpenStatus?: () => void
   onOpenContext?: () => void
   onOpenUsage?: () => void
 }
 
-/** One reading. A button only when it leads somewhere — a segment that looks
- * pressable and does nothing is worse than plain text. */
-function Reading({
-  tone,
-  onPress,
-  label,
-  children,
-}: {
-  tone?: Tone
-  onPress?: () => void
-  label?: string
-  children: React.ReactNode
-}) {
-  if (!onPress) return <Ink tone={tone}>{children}</Ink>
+function Reading({ tone, onPress, label, children }: { tone?: Tone; onPress?: () => void; label?: string; children: React.ReactNode }) {
+  if (!onPress) {
+    return <Ink tone={tone}>{children}</Ink>
+  }
   return (
-    <button type='button' className='term-reading' onClick={onPress} title={label}>
+    <button type="button" className="term-reading" onClick={onPress} title={label}>
       <Ink tone={tone}>{children}</Ink>
     </button>
   )
@@ -90,22 +54,14 @@ export function TerminalStatusLine({
   const model = modelLabel({ model: state.model, models: state.models ?? [] })
 
   const parts: React.ReactNode[] = [
-    <Reading
-      key='status'
-      tone={SEVERITY_TONE[presentation.severity]}
-      onPress={onOpenStatus}
-      label='Session status'>
+    <Reading key="status" tone={SEVERITY_TONE[presentation.severity]} onPress={onOpenStatus} label="Session status">
       {presentation.label}
     </Reading>,
   ]
 
   if (usage) {
     parts.push(
-      <Reading
-        key='context'
-        tone={SEVERITY_TONE[contextSeverity(usage)]}
-        onPress={onOpenContext}
-        label='Context window'>
+      <Reading key="context" tone={SEVERITY_TONE[contextSeverity(usage)]} onPress={onOpenContext} label="Context window">
         {Math.round(usage.percentage)}% ctx ({formatTokens(usage.totalTokens)})
       </Reading>,
     )
@@ -113,21 +69,15 @@ export function TerminalStatusLine({
 
   if (window) {
     parts.push(
-      <Reading
-        key='usage'
-        tone={SEVERITY_TONE[meterSeverity(window.info.utilization)]}
-        onPress={onOpenUsage}
-        label='Plan usage'>
+      <Reading key="usage" tone={SEVERITY_TONE[meterSeverity(window.info.utilization)]} onPress={onOpenUsage} label="Plan usage">
         {Math.round(window.info.utilization ?? 0)}% {windowLabel(window.key)}
       </Reading>,
     )
   }
 
-  // Cost last of the numbers: it is the reading you check, never the one you act
-  // on, and nothing about a turn changes because of it.
   if (state.totalCostUsd > 0) {
     parts.push(
-      <Ink key='cost' tone='faint'>
+      <Ink key="cost" tone="faint">
         {formatCost(state.totalCostUsd)}
       </Ink>,
     )
@@ -135,24 +85,24 @@ export function TerminalStatusLine({
 
   if (model) {
     parts.push(
-      <Ink key='model' tone='faint'>
+      <Ink key="model" tone="faint">
         {model}
       </Ink>,
     )
   }
   if (state.permissionMode && state.permissionMode !== 'default') {
     parts.push(
-      <Ink key='mode' tone='yellow'>
+      <Ink key="mode" tone="yellow">
         {state.permissionMode}
       </Ink>,
     )
   }
 
   return (
-    <Row data-slot='status-line' tone='dim' className={className}>
+    <Row data-slot="status-line" tone="dim" className={className}>
       {parts.map((part, index) => (
         <span key={index}>
-          {index > 0 ? <Ink tone='faint'> · </Ink> : null}
+          {index > 0 ? <Ink tone="faint"> · </Ink> : null}
           {part}
         </span>
       ))}