@linxin666/dsh-remote-web-ui 0.1.12 → 0.1.14

package/src/client/settings-card.module.css

@@ -1,76 +1,83 @@
+/* Plugin settings card chrome + staged form fields.
+ * Aligned with the official ui-settings-plugins PluginCard / fields CSS:
+ * same semantic tokens, radius, typography and states so family cards read
+ * as siblings of the built-in Shell / Agent loop / Web search cards. */
+
 .card {
-  list-style: none;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
   background: var(--dsw-alias-bg-layer-3);
-  overflow: hidden;
+  border-radius: 12px;
+  list-style: none;
   transition: border-color 0.16s, background 0.16s;
 }
 
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
 .cardOpen {
   background: var(--dsw-alias-bg-layer-2);
   border-color: var(--dsw-alias-label-dimmed);
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  appearance: none;
   width: 100%;
-  padding: 10px 14px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
   font: inherit;
-  border-radius: 8px;
-  transition: background-color 120ms ease, box-shadow 120ms ease;
-}
-
-.header:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.header:active:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-active);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
 }
 
 .header:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
-}
-
-.header:disabled {
-  opacity: 0.5;
-  cursor: default;
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
 }
 
 .headText {
-  display: flex;
   flex-direction: column;
-  gap: 2px;
   flex: 1;
+  gap: 4px;
   min-width: 0;
+  display: flex;
 }
 
 .name {
-  font-weight: 600;
   color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 .description {
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .pending {
-  font-size: 12px;
-  color: var(--dsw-alias-state-warn-primary);
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  flex: none;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .chevron {
-  transition: transform 120ms ease;
   color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
 }
 
 .chevronOpen {
@@ -78,52 +85,59 @@
 }
 
 .body {
-  padding: 0 14px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
 }
 
 .readOnly {
-  margin: 0;
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .notExposed {
-  margin: 0;
+  color: var(--dsw-alias-state-warn-primary);
+  margin: 12px 0 0;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--dsw-alias-state-warn-primary);
 }
 
 .footer {
-  display: flex;
-  align-items: center;
+  border-top: 1px solid var(--dsw-alias-border-l2);
   justify-content: flex-end;
+  align-items: center;
   gap: 8px;
+  padding: 12px 0 4px;
+  display: flex;
 }
 
 .failed {
-  margin: 0 auto 0 0;
+  min-width: 0;
+  color: var(--dsw-alias-label-error);
+  flex: 1;
+  margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
 .discard,
 .save {
-  padding: 5px 12px;
-  border-radius: 6px;
+  appearance: none;
   font: inherit;
-  font-size: 13px;
   cursor: pointer;
-  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .discard {
-  border: 1px solid var(--dsw-alias-border-l2);
-  background: transparent;
+  border-color: var(--dsw-alias-border-l2);
   color: var(--dsw-alias-label-secondary);
+  background: transparent;
 }
 
 .discard:hover:not(:disabled) {
@@ -131,173 +145,154 @@
   border-color: var(--dsw-alias-label-dimmed);
 }
 
-.discard:active:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-active);
-}
-
-.discard:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
-}
-
 .save {
-  border: 1px solid var(--dsw-alias-button-info-fill);
-  background: var(--dsw-alias-button-info-fill);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-.save:hover:not(:disabled) {
-  border-color: var(--dsw-alias-button-info-hover);
-  background: var(--dsw-alias-button-info-hover);
-}
-
-.save:active:not(:disabled) {
-  border-color: var(--dsw-alias-button-info-hover);
-  background: var(--dsw-alias-button-info-hover);
-  filter: brightness(0.96);
-}
-
-.save:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
 }
 
 .discard:disabled,
 .save:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: default;
 }
 
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
 .field {
-  display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.field + .field {
+  border-top: 1px solid var(--dsw-alias-border-l2);
 }
 
 .head {
-  display: flex;
   align-items: center;
   gap: 8px;
+  display: flex;
 }
 
 .label {
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+  flex: 1;
   font-size: 13px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary);
+  line-height: 1.5;
 }
 
 .badges {
-  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  display: inline-flex;
 }
 
 .badge {
-  flex: none;
-  min-width: 0;
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: var(--dsw-alias-interactive-bg-hover-accent);
-  color: var(--dsw-alias-state-business-primary);
   white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .reset {
-  flex: none;
-  font-size: 11px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--dsw-alias-state-business-primary);
+  font: inherit;
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
-  padding: 1px 2px;
-  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .reset:hover:not(:disabled) {
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.reset:active:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-active);
+.reset:disabled {
+  cursor: default;
 }
 
 .reset:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
-}
-
-.reset:disabled {
-  opacity: 0.5;
-  cursor: default;
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
 }
 
 .input,
 .select {
-  padding: 6px 8px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
   font: inherit;
-  font-size: 13px;
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-specific-input-major);
-  transition: border-color 120ms ease, box-shadow 120ms ease;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .input:focus-visible,
 .select:focus-visible {
-  outline: none;
   border-color: var(--dsw-alias-brand-primary);
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-brand-primary);
+  outline: none;
+}
+
+.input:disabled,
+.select:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
 }
 
 .inputInvalid {
-  padding: 6px 8px;
-  border: 1px solid var(--dsw-alias-state-error-primary);
-  border-radius: 6px;
+  border: 1px solid var(--dsw-alias-label-error);
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
   font: inherit;
-  font-size: 13px;
   color: var(--dsw-alias-label-primary);
-  transition: border-color 120ms ease, box-shadow 120ms ease;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .inputInvalid:focus-visible {
-  outline: none;
-  border-color: var(--dsw-alias-state-error-primary);
-  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-3), 0 0 0 4px var(--dsw-alias-state-error-primary);
+  outline: 2px solid var(--dsw-alias-label-error);
+  outline-offset: 1px;
+  border-color: var(--dsw-alias-label-error);
 }
 
-.input:disabled,
-.select:disabled {
-  opacity: 0.6;
-}
-
-.hint {
+.invalid {
+  color: var(--dsw-alias-label-error);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary);
+  line-height: 1.5;
 }
 
-.invalid {
+.hint {
+  color: var(--dsw-alias-label-tertiary);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
-/* Accessibility: collapse the interaction transitions for reduced-motion
-   users; the card chrome itself stays static. */
 @media (prefers-reduced-motion: reduce) {
   .card,
   .header,
   .chevron,
+  .chevronOpen,
   .discard,
-  .save,
-  .reset,
-  .input,
-  .select,
-  .inputInvalid {
+  .save {
     transition: none;
   }
 }

package/src/client/update-api.ts

@@ -6,14 +6,34 @@
 
 import type { UpdateRunResult, UpdateStatus } from '../update.ts'
 
+/**
+ * Error thrown when the update status probe fails: carries the HTTP status
+ * so the panel can tell "the update route is not mounted" (404 — the host
+ * process runs an older plugin build) apart from real network failures.
+ */
+export class UpdateStatusError extends Error {
+  /** HTTP status of the failed response (0 when the fetch never returned). */
+  readonly status: number
+  constructor(status: number) {
+    super('update status unavailable (HTTP ' + String(status) + ')')
+    this.status = status
+  }
+}
+
 /**
  * Probe the update status: install mode, owning profile, and the
  * current-vs-latest comparison for every family package.
  * @returns the status snapshot.
  */
 export async function fetchUpdateStatus(): Promise<UpdateStatus> {
-  const response = await fetch('/api/update/status')
-  if (!response.ok) throw new Error('update status unavailable')
+  let response: Response
+  try {
+    response = await fetch('/api/update/status')
+  } catch {
+    // Network-level failure: nothing came back at all.
+    throw new UpdateStatusError(0)
+  }
+  if (!response.ok) throw new UpdateStatusError(response.status)
   return await response.json() as UpdateStatus
 }
 

package/src/index.ts

@@ -96,6 +96,13 @@ export interface Config {
    * tunnel setup. The manual `publicBaseUrl` is ignored while this is on.
    */
   autoTunnel?: boolean
+  /**
+   * Mobile composer behavior: when true (default), a plain Enter in the
+   * phone chat textarea sends the prompt and Shift+Enter inserts a newline.
+   * When false, plain Enter inserts a newline and only the send button
+   * sends (Shift+Enter keeps inserting a newline).
+   */
+  mobileEnterToSend?: boolean
   /** Master switch for the plugin (browser half + host pairing surfaces). */
   enabled?: boolean
 }
@@ -108,6 +115,7 @@ export const Config: z<Config> = z.object({
   requirePairingForLan: z.boolean().default(true),
   publicBaseUrl: z.string(),
   autoTunnel: z.boolean().default(false),
+  mobileEnterToSend: z.boolean().default(true),
   enabled: z.boolean().default(true),
 })
 
@@ -130,6 +138,7 @@ const DEFAULTS: ResolvedConfig = {
   requirePairingForLan: true,
   publicBaseUrl: undefined,
   autoTunnel: false,
+  mobileEnterToSend: true,
   enabled: true,
 }
 
@@ -147,6 +156,7 @@ export function apply(ctx: Context, config?: Config): void {
     requirePairingForLan: config?.requirePairingForLan ?? DEFAULTS.requirePairingForLan,
     publicBaseUrl: config?.publicBaseUrl,
     autoTunnel: config?.autoTunnel ?? DEFAULTS.autoTunnel,
+    mobileEnterToSend: config?.mobileEnterToSend ?? DEFAULTS.mobileEnterToSend,
     enabled: config?.enabled ?? DEFAULTS.enabled,
   }
   // The live source the pairing service and the gate read: the settings
@@ -163,6 +173,7 @@ export function apply(ctx: Context, config?: Config): void {
       requirePairingForLan: value.requirePairingForLan ?? DEFAULTS.requirePairingForLan,
       publicBaseUrl: value.publicBaseUrl,
       autoTunnel: value.autoTunnel ?? DEFAULTS.autoTunnel,
+      mobileEnterToSend: value.mobileEnterToSend ?? DEFAULTS.mobileEnterToSend,
       enabled: value.enabled ?? DEFAULTS.enabled,
     }
   }
@@ -267,7 +278,9 @@ export function apply(ctx: Context, config?: Config): void {
   const routes = [
     ...makeRoutes({ service, lanAddresses }),
     ...makeMobileRoutes(),
-    ...(apiProxy !== undefined ? makeMobileApiRoutes({ service, apiProxy }) : []),
+    ...(apiProxy !== undefined
+      ? makeMobileApiRoutes({ service, apiProxy, mobileEnterToSend: () => resolve().mobileEnterToSend })
+      : []),
     ...updateRoutes,
   ]
   const gate = makeGateListener(service, () => resolve().requirePairingForLan, () => resolve().enabled)

package/src/mobile/api.ts

@@ -35,12 +35,23 @@ export interface HistoryPage {
   projections?: SessionProjectionsBlock
 }
 
+/** Read-only display preferences the plugin answers locally on `/m/api`. */
+export interface MobilePreferences {
+  /** Plain Enter sends the drafted prompt (false: Enter inserts a newline). */
+  mobileEnterToSend: boolean
+}
+
 /** The workspace roster (session ids come back per workspace). */
 export async function listWorkspaces(): Promise<WorkspaceView[]> {
   const { items } = await callUnary<{ items: WorkspaceView[] }>('workspace.list', {})
   return items
 }
 
+/** Read-only mobile display preferences (answered by the plugin, not the host proxy). */
+export async function fetchMobilePreferences(): Promise<MobilePreferences> {
+  return await callUnary<MobilePreferences>('mobile.preferences', {})
+}
+
 /** One session.list page; omit the cursor for the first page. */
 export async function listSessions(cursor?: string): Promise<SessionPage> {
   return await callUnary<SessionPage>('session.list', cursor === undefined ? {} : { cursor })
@@ -56,17 +67,18 @@ export async function createSession(
   return await callUnary<CreatedSession>('session.create', options)
 }
 
-/** One history window; omit beforeSeq for the tail page. */
+/** One history window; omit beforeSeq for the tail page, pass a signal to abort. */
 export async function history(
   sessionId: string,
   beforeSeq?: number,
   maxMessages = 30,
+  signal?: AbortSignal,
 ): Promise<HistoryPage> {
   return await callUnary<HistoryPage>('session.history', {
     sessionId,
     maxMessages,
     ...(beforeSeq !== undefined ? { beforeSeq } : {}),
-  })
+  }, signal)
 }
 
 /** Send one text prompt (queued: the agent picks it up in order). */

package/src/mobile/mobile-styles.ts

@@ -765,6 +765,9 @@ body {
   min-width: 0;
   min-height: 40px;
   max-height: 120px;
+  /* Grow with the content (still bounded by min/max-height); browsers
+     without field-sizing support ignore this line and keep the old size. */
+  field-sizing: content;
   padding: 9px 12px;
   border: 1px solid var(--m-border);
   border-radius: 10px;

package/src/mobile/views/App.tsx

@@ -42,6 +42,12 @@ export interface RenderMessage {
   toolSummary?: string
 }
 
+/** Read the optional workspace target carried from the pairing QR flow. */
+export function mobileWorkspaceTarget(search: string): string | undefined {
+  const value = new URLSearchParams(search).get('workspace')
+  return value === null || value === '' ? undefined : value
+}
+
 /** Map a list row to the surface model; the title comes from projections when present. */
 export function toSessionView(item: {
   sessionId: string
@@ -83,6 +89,9 @@ export function formatTime(epochMs: number): string {
  */
 export function App() {
   const [route, setRoute] = useState<Route>({ kind: 'workspaces' })
+  const [initialWorkspaceId, setInitialWorkspaceId] = useState<string | undefined>(
+    () => mobileWorkspaceTarget(window.location.search),
+  )
   const muxRef = useRef<MuxClient | undefined>(undefined)
 
   // The mux stream lives for the page lifetime: session events keep the
@@ -113,10 +122,20 @@ export function App() {
     setRoute({ kind: 'chat', session, workspace })
   }, [])
 
+  const openWorkspace = useCallback((workspace: WorkspaceRow) => {
+    if (initialWorkspaceId !== undefined) {
+      const url = new URL(window.location.href)
+      url.searchParams.delete('workspace')
+      window.history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`)
+      setInitialWorkspaceId(undefined)
+    }
+    setRoute({ kind: 'sessions', workspace })
+  }, [initialWorkspaceId])
+
   return (
     <div className="mobile">
       {route.kind === 'workspaces'
-        ? <WorkspaceRoster onPick={(workspace) => { setRoute({ kind: 'sessions', workspace }) }} />
+        ? <WorkspaceRoster initialWorkspaceId={initialWorkspaceId} onPick={openWorkspace} />
         : route.kind === 'sessions'
           ? (
             <SessionListView
@@ -152,8 +171,8 @@ export function staleHostHint(message: string): string | undefined {
 }
 
 /** Fetch one history page (tail by default) — thin wrapper so views share the call shape. */
-export function loadHistory(sessionId: string, beforeSeq?: number) {
-  return fetchHistory(sessionId, beforeSeq)
+export function loadHistory(sessionId: string, beforeSeq?: number, signal?: AbortSignal) {
+  return fetchHistory(sessionId, beforeSeq, undefined, signal)
 }
 
 export { listSessions, listWorkspaces, prompt }