diff --git a/packages/client/ui-conversation/src/client/contract/slots.ts b/packages/client/ui-conversation/src/client/contract/slots.ts
index 0b39634249..3e5ffb766d 100644
--- a/packages/client/ui-conversation/src/client/contract/slots.ts
+++ b/packages/client/ui-conversation/src/client/contract/slots.ts
@@ -86,11 +86,15 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
* The default composer body: a single slot rendered as the composer
* chain's fallback (decision 20 — a real entry, not a chain rider, so a
* takeover election hides rather than unmounts it and the textarea DOM
- * survives). InputBar registers here from this package's apply; its
- * machine state arrives through the standard provide channel (useInput +
- * inputActions), the keyboard command face through its own inject.
+ * survives). Session-maybe: the bar stays mounted across the
+ * no-session/session transition — the no-workspace hero renders the SAME
+ * textarea DOM disabled instead of a parallel inert tree — with the
+ * machine hooks absent until a session is current. InputBar registers
+ * here from this package's apply; its machine state arrives through the
+ * standard provide channel (useInput + inputActions), the keyboard
+ * command face through its own inject.
*/
- 'conversation.composer.bar': { kind: 'single'; scope: 'session'; owner: ComposerBarOwnerProps }
+ 'conversation.composer.bar': { kind: 'single'; scope: 'session-maybe'; owner: ComposerBarOwnerProps }
/**
* The Plan-mode status seat in the composer tool row (left group,
* right of the access-mode control). Declared by the composer-bar
@@ -255,6 +259,12 @@ export interface ConversationSessionInjected {
export interface ComposerBarOwnerProps {
/** Hero = empty-state centered card; composer = resident bottom bar. */
variant: 'hero' | 'composer'
+ /**
+ * Inert no-workspace state: the bar renders its normal DOM fully disabled
+ * (textarea, add, send) so the workspace pick transitions in place instead
+ * of swapping component trees.
+ */
+ disabled?: boolean
placeholder?: string
/** Optional content rendered above the textarea. */
accessory?: ReactNode
@@ -272,25 +282,30 @@ export interface ComposerBarOwnerProps {
/** Injected share of the composer-bar entry (package-internal faces). */
export interface ComposerBarInjected {
- /** The InputBar-exclusive keyboard/DOM command face (decision 20 private plane). */
- keyboard: ComposerKeyboard
- /** Create browser previews and append their ids to the session input state. */
- addImages: (files: readonly File[]) => string | null
- /** Release one browser preview and remove its id from the session input state. */
- removeImage: (id: DraftAttachmentId) => void
- /** Resolve ordered input-state ids to browser-owned draft attachments. */
- draftImages: (ids: readonly DraftAttachmentId[]) => readonly ComposerAttachment[]
- /** Cancel the in-flight turn. */
- stop: () => void
+ /** The InputBar-exclusive keyboard/DOM command face (decision 20 private plane); absent with the session. */
+ keyboard: ComposerKeyboard | undefined
+ /** Create browser previews and append their ids to session input; absent with the session. */
+ addImages: ((files: readonly File[]) => string | null) | undefined
+ /** Release one browser preview and remove its id from session input; absent with the session. */
+ removeImage: ((id: DraftAttachmentId) => void) | undefined
+ /** Resolve ordered input-state ids to browser-owned draft attachments; absent with the session. */
+ draftImages: ((ids: readonly DraftAttachmentId[]) => readonly ComposerAttachment[]) | undefined
+ /** Cancel the in-flight turn; absent with the session. */
+ stop: (() => void) | undefined
/**
* Submit one slash-command line against this session's agent (the chrome
- * controls' write path — the permission chip submits `/permission
`).
+ * controls' write path — the permission chip submits `/permission `);
+ * absent with the session.
* Resolves admission: false = rejected/unmatched/transport failure.
*/
- command: (line: string) => Promise
- /** Locale-aware hint translator for claimed command placeholders. */
+ command: ((line: string) => Promise) | undefined
+ /** Locale-aware hint translator for claimed command placeholders (session-independent — always present). */
translateHint: (key: string) => string
- /** Registrant hooks compartment: the renderer binds these to useNotices/useLexicon. */
+ /**
+ * Registrant hooks compartment: the renderer binds these to
+ * useNotices/useLexicon (static absent sources without a session — hook
+ * order stays constant).
+ */
hooks: {
/** Latest surfaced notice (null after none; seq keys re-render of repeats). */
notices: ObservableSnapshot
diff --git a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx
index bec3bb1fde..3f9635bb48 100644
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx
@@ -1,13 +1,12 @@
-// Resident conversation skeleton. Hero chrome, composer positioning, and the
-// chain stay mounted across no-session/session transitions. Only the inert
-// input body swaps for the strict session InputBar.
+// Resident conversation skeleton. Hero chrome, composer positioning, the
+// chain, AND the composer bar (session-maybe slot) stay mounted across
+// no-session/session transitions — the bar renders inert via owner props.
import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
import clsx from 'clsx'
import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
import type { ConversationSlotProps, InputZone } from '../contract/slots.ts'
import { HeroGlow, HeroShell, WorkspaceChip, workspaceLabel } from './EmptyHero.tsx'
-import { DisabledInputBar } from './DisabledInputBar.tsx'
import css from './ConversationRoot.module.css'
/** Full props composed from the slot contract. */
@@ -113,20 +112,23 @@ export function ConversationRoot({
)
// The placeholder chip ("Choose workspace") and the inert input travel
- // together: a blank session whose workspace vanished (deleted from the
- // sidebar) reverts to the same disabled bar as the initial no-session state.
- const inputBar = sessionId === undefined || (hero && chipTitle === undefined)
- ?
- : renderSlot('conversation.composer.bar', {
- variant: hero ? 'hero' : 'composer',
- ...(hero ? { placeholder: 'Describe what you want to build' } : {}),
- overlay: renderSlot('conversation.input.overlay', {}),
- leftItems: zone === undefined ? null : renderSlot('conversation.input.left', zone),
- rightItems: zone === undefined ? null : renderSlot('conversation.input.right', zone),
- // Stats band under the card, inside the bar's width column so both
- // share one constraint (composer.dock = stats-line family).
- footer: !hero && zone !== undefined ? renderSlot('conversation.composer.dock', zone) : null,
- })
+ // together: no workspace picked yet (cold start, no session at all), or a
+ // blank session whose workspace vanished (deleted from the sidebar). The
+ // bar is ONE session-maybe slot rendered unconditionally — inert is a prop,
+ // not a different tree, so the textarea DOM survives the transition.
+ const inert = sessionId === undefined || (hero && chipTitle === undefined)
+ const inputBar = renderSlot('conversation.composer.bar', {
+ variant: hero ? 'hero' : 'composer',
+ ...(inert
+ ? { disabled: true, placeholder: 'Choose a workspace to start' }
+ : hero ? { placeholder: 'Describe what you want to build' } : {}),
+ overlay: renderSlot('conversation.input.overlay', {}),
+ leftItems: zone === undefined ? null : renderSlot('conversation.input.left', zone),
+ rightItems: zone === undefined ? null : renderSlot('conversation.input.right', zone),
+ // Stats band under the card, inside the bar's width column so both
+ // share one constraint (composer.dock = stats-line family).
+ footer: !hero && zone !== undefined ? renderSlot('conversation.composer.dock', zone) : null,
+ })
const composerBar = (
@@ -176,7 +178,7 @@ export function ConversationRoot({
'conversation.session',
{ wrapActiveBody },
)}
- {sessionId === undefined ? composerSeat : null}
+ {sessionId === undefined ? wrapActiveBody(null) : null}
)
}
diff --git a/packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx b/packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx
deleted file mode 100644
index bfaa0b8d02..0000000000
--- a/packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/** Inert no-session input body; the resident Hero shell renders around it. */
-
-import clsx from 'clsx'
-import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
-import css from './InputBar.module.css'
-
-/** Disabled visual twin of the session-bound InputBar. */
-export function DisabledInputBar() {
- return (
-
- )
-}
diff --git a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
index 16883b7a37..9b6323d40d 100644
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -7,7 +7,7 @@
* (running/removed/promptError) are self-selected via useSession. */
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { ChangeEvent, ClipboardEvent, DragEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
+import type { ChangeEvent, DragEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
import clsx from 'clsx'
import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
// Type-only: the `plan` projection key merge (the TodoDock posture — the
@@ -17,10 +17,14 @@ import type {} from '@deepseek-ai/dsh-plan-mode/client'
import type {} from '@deepseek-ai/dsh-goal/client'
import type { ComposerAttachment, ComposerBarProps } from '../contract/slots.ts'
import { deriveDecorations } from '../input/decorations.ts'
+import type { DraftDecorations } from '../input/decorations.ts'
import { ImageLightbox } from './ImageLightbox.tsx'
import { PermissionSelect } from './PermissionSelect.tsx'
import css from './InputBar.module.css'
+/** Decoration product of the no-session state (no machine, empty draft). */
+const INERT_DECORATIONS: DraftDecorations = { token: null, chips: [], textRefs: [], hint: null }
+
/** Prompt failure surface (derived from promptError). */
export interface InputBarError {
op: 'send' | 'stop'
@@ -32,14 +36,15 @@ export type InputBarProps = ComposerBarProps
export function InputBar({
useSession, useInput, inputActions, keyboard, addImages, removeImage, draftImages,
stop, command, translateHint, renderSlot, useNotices, useLexicon, useProjection,
- variant, placeholder, accessory, overlay, leftItems, rightItems, footer, onAdd, addLabel = 'Add attachment',
+ sessionId, variant, disabled: inert = false, placeholder, accessory, overlay, leftItems, rightItems, footer,
+ onAdd, addLabel = 'Add attachment',
}: InputBarProps) {
const input = useInput(s => s)
const notice = useNotices(s => s)
const lexicon = useLexicon(s => s)
- const promptError = useSession(s => s.promptError)
- const running = useSession(s => s.running)
- const disabled = useSession(s => s.removed)
+ const promptError = useSession(s => s.promptError) ?? null
+ const running = useSession(s => s.running) ?? false
+ const removed = useSession(s => s.removed) ?? false
// Plan mode swaps the textarea placeholder (the projection is the folded
// host value; owner-prop placeholders — hero, session-unavailable — win).
const planActive = useProjection('plan', plan => plan !== undefined && (plan.pending ? !plan.active : plan.active))
@@ -51,8 +56,14 @@ export function InputBar({
const error: InputBarError | null = promptError === null
? null
: { op: promptError.op, message: `${promptError.error.message} (${promptError.error.code})` }
- const draft = input.draft
- const attachments = useMemo(() => draftImages(input.imageIds), [draftImages, input.imageIds])
+ // Session-maybe: the machine faces are absent together while no session is
+ // current; the bar renders the same DOM inert instead of a parallel tree.
+ const live = input !== undefined && keyboard !== undefined && inputActions !== undefined
+ const draft = input?.draft ?? ''
+ const attachments = useMemo(
+ () => input === undefined || draftImages === undefined ? [] : draftImages(input.imageIds),
+ [draftImages, input?.imageIds],
+ )
const empty = draft.trim() === '' && attachments.length === 0
const [preview, setPreview] = useState(null)
const [dragActive, setDragActive] = useState(false)
@@ -75,17 +86,20 @@ export function InputBar({
// (undefined = capability absent → the chip renders nothing).
const permissions = useProjection('permissions')
- // Queue cut 1: running input stays free; locked = session disabled only.
- // The transient machine locks (adjudicating pending / submitting) render
+ // Queue cut 1: running input stays free; locked = session removed, the
+ // inert no-workspace state, or the machine faces absent (no session). The
+ // transient machine locks (adjudicating pending / submitting) render
// read-only — the draft stays visible and focused, keystrokes drop.
+ const disabled = removed || inert || !live
const locked = disabled
- const machineBusy = input.phase === 'adjudicating' || input.phase === 'submitting'
+ const machineBusy = input?.phase === 'adjudicating' || input?.phase === 'submitting'
useEffect(() => {
+ if (input === undefined || inputActions === undefined) return
if (attachments.length !== input.imageIds.length) {
inputActions.pruneImages(attachments.map(attachment => attachment.id))
}
- }, [attachments, input.imageIds, inputActions])
+ }, [attachments, input?.imageIds, inputActions])
useEffect(() => {
if (preview !== null && !attachments.some(attachment => attachment.id === preview.id)) setPreview(null)
@@ -94,7 +108,7 @@ export function InputBar({
// Unlock (mount / session switch) returns focus to the box.
useEffect(() => {
if (!locked) inputRef.current?.focus()
- }, [locked])
+ }, [locked, sessionId])
// Active conversation scrollport: chain the wheel. While the textarea (capped
// at 14 lines with overflow-y:auto) can still move in this direction, keep
@@ -118,6 +132,9 @@ export function InputBar({
}, [])
const onKeyDown = (e: KeyboardEvent): void => {
+ // Absent machine (no session): the textarea is disabled so events cannot
+ // fire; the guard narrows the faces for the paths below.
+ if (keyboard === undefined || inputActions === undefined) return
// Shift+Enter is the native newline UNCONDITIONALLY — decided before the
// IME guard so a composition-closing Shift+Enter still breaks the line.
if (e.key === 'Enter' && e.shiftKey) return
@@ -179,6 +196,7 @@ export function InputBar({
}
const onChange = (e: ChangeEvent): void => {
+ if (keyboard === undefined) return // absent machine: disabled textarea, no events
if (machineBusy) return // submitting is the read-only span; adjudicating holds the pending lock
const next = e.target.value
keyboard.setDraft(next)
@@ -204,6 +222,7 @@ export function InputBar({
/* oxlint-enable typescript/no-unnecessary-condition */
const onCopyOrCut = (e: React.ClipboardEvent, cut: boolean): void => {
+ if (input === undefined || keyboard === undefined) return // absent machine: disabled textarea, no events
const el = e.currentTarget
const { start, end } = selectionOf(el)
if (start === end) return
@@ -227,13 +246,14 @@ export function InputBar({
void slice
}
- const onPaste = (e: ClipboardEvent): void => {
+ const onPaste = (e: React.ClipboardEvent): void => {
+ if (keyboard === undefined) return // absent machine: disabled textarea, no events
if (machineBusy || locked) return
const files = [...e.clipboardData.items]
.filter(item => item.kind === 'file')
.map(item => item.getAsFile())
.filter((file): file is File => file !== null)
- if (files.length > 0) {
+ if (files.length > 0 && addImages !== undefined) {
setDropError(addImages(files))
}
const text = e.clipboardData.getData('text/plain')
@@ -257,14 +277,14 @@ export function InputBar({
const onSelect = (e: React.SyntheticEvent): void => {
// Any caret/selection gesture ends a live paste attempt (the machine
// cannot observe DOM selection). Cheap no-op when none is live.
- if (keyboard.snapshot.paste !== undefined) keyboard.invalidatePaste()
+ if (keyboard !== undefined && keyboard.snapshot.paste !== undefined) keyboard.invalidatePaste()
void e
}
const onDragEnter = (event: DragEvent): void => {
if (!event.dataTransfer.types.includes('Files')) return
event.preventDefault()
- if (locked || machineBusy) return
+ if (locked || machineBusy || addImages === undefined) return
dragDepthRef.current += 1
setDropError(null)
setDragActive(true)
@@ -303,6 +323,7 @@ export function InputBar({
const primaryLabel = running ? 'Stop generating' : 'Send message'
const onPrimary = (): void => {
+ if (inputActions === undefined || stop === undefined) return // absent machine: the button is disabled
if (running) {
stop()
return
@@ -312,16 +333,17 @@ export function InputBar({
}
// The Access seat: the projection-fed permission chip (renders nothing
- // while the permissions key is absent — permission-less host or Draft).
- const accessSelect: ReactNode = (
-
- )
+ // while the permissions key is absent — permission-less host or Draft —
+ // or while the command face is absent with the session).
+ const accessSelect: ReactNode = command === undefined
+ ? null
+ :
// Mirror-layer decorations: a visible backdrop with transparent text. The
// claim token highlights through behind the textarea glyphs; each U+FFFC
// placeholder renders as a chip (the textarea's own glyph is invisible, the
// backdrop chip supplies the visual); the claim hint is ghost text.
- const deco = deriveDecorations(input, lexicon)
+ const deco = input === undefined ? INERT_DECORATIONS : deriveDecorations(input, lexicon)
const backdrop: ReactNode[] = []
{
// Segment boundaries: the token range end, every chip offset, and every
@@ -383,7 +405,7 @@ export function InputBar({
pushPlain(draft.length)
if (deco.hint !== null) {
// Claim tokens are shaped `/name ` (trailing space); trim to the bare name.
- const commandName = input.claim?.token.slice(1).trim() ?? ''
+ const commandName = input?.claim?.token.slice(1).trim() ?? ''
const hintKey = commandName === 'goal' && hasGoal ? 'goal.active' : commandName
const translated = translateHint(hintKey)
const displayHint = translated !== hintKey ? translated : deco.hint
@@ -433,7 +455,7 @@ export function InputBar({
aria-label={`移除图片 ${attachment.file.name || ''}`}
onClick={() => {
setDropError(null)
- removeImage(attachment.id)
+ removeImage?.(attachment.id)
}}
>×