@linxin666/dsh-remote-web-ui 0.2.8 → 0.3.0

package/src/mobile/api.ts

@@ -129,3 +129,94 @@ export async function selectModel(
     ...(selection.reasoningEffort !== undefined ? { reasoningEffort: selection.reasoningEffort } : {}),
   })
 }
+
+/* ── pending approvals / questions (#1025) ───────────────────────────── */
+
+/** One pending tool approval awaiting the user's decision. */
+export interface PendingApproval {
+  approvalId: string
+  toolName: string
+  callId?: string
+  reason?: string
+}
+
+/** One pending question group awaiting the user's answer. */
+export interface PendingQuestionItem {
+  id: string
+  question: string
+  detail?: string
+  header?: string
+  options?: Array<{ label: string; description?: string }>
+  multiSelect?: boolean
+}
+
+/** The pending state for one session. */
+export interface PendingState {
+  approvals: PendingApproval[]
+  questions: PendingQuestionItem[]
+}
+
+/** Fetch pending approvals and questions for one session (polling fallback data source). */
+export async function fetchPending(sessionId: string): Promise<PendingState> {
+  return await callUnary<PendingState>('mobile.pending', { sessionId })
+}
+
+/** Submit an approval decision (allowed-once or rejected). */
+export async function respondApproval(
+  sessionId: string,
+  approvalId: string,
+  outcome: 'allowed-once' | 'rejected',
+): Promise<void> {
+  await callUnary<unknown>('mobile.respond', {
+    sessionId,
+    type: 'approval',
+    approvalId,
+    outcome,
+  })
+}
+
+/** Submit answers to a question group. */
+export async function respondQuestion(
+  sessionId: string,
+  answers: Array<{ id: string; selected: string[]; custom?: string }>,
+): Promise<void> {
+  await callUnary<unknown>('mobile.respond', {
+    sessionId,
+    type: 'question',
+    answers,
+  })
+}
+
+/* ── directory browsing / workspace creation (#977) ──────────────────── */
+
+/** One entry in a directory listing. */
+export interface DirectoryEntry {
+  name: string
+  path: string
+  hidden: boolean
+}
+
+/** The host directory listing result (one level, with ancestor breadcrumbs). */
+export interface DirectoryListing {
+  path: string
+  home: string
+  crumbs: DirectoryEntry[]
+  entries: DirectoryEntry[]
+  truncated: boolean
+}
+
+/** The result of creating a workspace from an existing directory. */
+export interface WorkspaceCreateResult {
+  workspace: WorkspaceView
+  created: boolean
+}
+
+/** Browse one directory level on the host (defaults to home directory). */
+export async function listDirectory(path?: string): Promise<DirectoryListing> {
+  return await callUnary<DirectoryListing>('host.listDirectory', path === undefined ? {} : { path })
+}
+
+/** Create a workspace from an existing host directory (does not mkdir). */
+export async function createWorkspace(path: string): Promise<WorkspaceCreateResult> {
+  return await callUnary<WorkspaceCreateResult>('workspace.create', { path })
+}

package/src/mobile/markdown.test.ts

@@ -79,4 +79,13 @@ describe('escapeHtml', () => {
   it('escapes all five HTML-significant characters', () => {
     expect(escapeHtml('<&>"\'')).toBe('&lt;&amp;&gt;&quot;&#39;')
   })
+
+  it('equals the five sequential passes on mixed, pre-escaped and plain input', () => {
+    // Single-pass map replacement must never diverge from the sequential
+    // five-pass escape (including double-escaping of literal entities).
+    expect(escapeHtml('a & b < c > d " e \' f')).toBe('a &amp; b &lt; c &gt; d &quot; e &#39; f')
+    expect(escapeHtml('&amp; &lt; &gt;')).toBe('&amp;amp; &amp;lt; &amp;gt;')
+    expect(escapeHtml('plain text 123')).toBe('plain text 123')
+    expect(escapeHtml('')).toBe('')
+  })
 })

package/src/mobile/markdown.ts

@@ -10,14 +10,24 @@
  * @module dsh-remote-web-ui/mobile/markdown
  */
 
-/** Escape HTML special characters. */
+/** HTML special-character map for {@link escapeHtml}. */
+const HTML_ESCAPE_MAP: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+}
+
+/**
+ * Escape HTML special characters. One regex pass replaces all five
+ * characters through the map; the output is identical to five sequential
+ * passes (each replacement string contains none of the escaped characters),
+ * and the common no-special-character case scans the string only once
+ * instead of five times.
+ */
 export function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
+  return text.replace(/[&<>"']/g, char => HTML_ESCAPE_MAP[char] ?? char)
 }
 
 /**

package/src/mobile/mobile-styles.ts

@@ -588,16 +588,33 @@ body {
   gap: 8px;
 }
 
-.chat-tool-item {
+.chat-tool-card {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
+  padding: 6px 8px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-raised);
 }
 
-.chat-tool-name {
-  color: var(--m-text);
-  font-size: 12.5px;
+.chat-tool-pills {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.chat-tool-pill {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--m-accent-soft);
+  color: var(--m-accent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
   font-weight: 600;
+  white-space: nowrap;
 }
 
 .chat-tool-args {
@@ -611,8 +628,245 @@ body {
   line-height: 1.5;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* ── turn status indicator (#1017) ───────────────────────────────────── */
+
+.chat-turn-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  color: var(--m-accent);
+  font-size: 13px;
+  font-weight: 600;
+  background: linear-gradient(
+    90deg,
+    var(--m-accent) 0%,
+    color-mix(in srgb, var(--m-accent) 60%, #ffffff) 50%,
+    var(--m-accent) 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: dsh-shimmer 1.8s linear infinite;
+}
+
+.chat-turn-dots {
+  display: inline-flex;
+  gap: 3px;
+}
+
+.chat-turn-dots span {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--m-accent);
+  animation: dsh-dot-bounce 1.2s ease-in-out infinite;
+}
+
+.chat-turn-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.chat-turn-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes dsh-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+@keyframes dsh-dot-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40% { transform: translateY(-4px); opacity: 1; }
+}
+
+/* ── approval panel (#1025) ──────────────────────────────────────────── */
+
+.chat-approval-panel {
+  margin: 8px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--m-accent);
+  border-radius: var(--m-radius);
+  background: var(--m-bg-raised);
+  box-shadow: var(--m-shadow);
+}
+
+.chat-approval-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 
+.chat-approval-reason {
+  color: var(--m-text-secondary);
+  font-size: 12.5px;
+}
+
+.chat-approval-error {
+  margin: 4px 0;
+  color: var(--m-danger);
+  font-size: 12px;
+}
+
+.chat-approval-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.chat-approval-allow {
+  flex: 1;
+  height: 34px;
+  border: none;
+  border-radius: 8px;
+  background: var(--m-accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.chat-approval-allow:disabled {
+  opacity: 0.6;
+}
+
+.chat-approval-reject {
+  flex: 1;
+  height: 34px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-raised);
+  color: var(--m-text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.chat-approval-reject:disabled {
+  opacity: 0.6;
+}
+
+/* ── question panel (#1025) ──────────────────────────────────────────── */
+
+.chat-question-panel {
+  margin: 8px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--m-accent);
+  border-radius: var(--m-radius);
+  background: var(--m-bg-raised);
+  box-shadow: var(--m-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chat-question-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chat-question-header {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--m-text);
+}
+
+.chat-question-text {
+  font-size: 13px;
+  color: var(--m-text);
+  line-height: 1.5;
+}
+
+.chat-question-detail {
+  font-size: 12px;
+  color: var(--m-text-secondary);
+  line-height: 1.5;
+}
+
+.chat-question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chat-question-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: border-color 0.12s, background 0.12s;
+}
+
+.chat-question-option input {
+  margin: 2px 0 0;
+  flex: none;
+}
+
+.chat-question-option-selected {
+  border-color: var(--m-accent);
+  background: var(--m-accent-soft);
+}
+
+.chat-question-option-label {
+  color: var(--m-text);
+  font-weight: 500;
+}
+
+.chat-question-option-desc {
+  display: block;
+  color: var(--m-text-tertiary);
+  font-size: 12px;
+}
+
+.chat-question-custom {
+  width: 100%;
+  min-height: 40px;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-input);
+  color: var(--m-text);
+  font: inherit;
+  font-size: 13px;
+  resize: vertical;
+  outline: none;
+}
+
+.chat-question-custom:focus-visible {
+  border-color: var(--m-accent);
+}
+
+.chat-question-submit {
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: var(--m-accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.chat-question-submit:disabled {
+  opacity: 0.6;
+}
+
+
 /* ── composer toolbar (model / permission chips) ─────────────────────── */
 
 .chat-tools {
@@ -1053,10 +1307,16 @@ body {
   .sheet-confirm-danger,
   .sheet-toggle-switch,
   .sheet-toggle-switch-knob,
-  .chat-input {
+  .chat-input,
+  .chat-turn-status,
+  .chat-turn-dots span {
     animation: none;
     transition: none;
   }
+  .chat-turn-status {
+    background: none;
+    -webkit-text-fill-color: var(--m-accent);
+  }
 }
 
 /* ── installed-app pairing ───────────────────────────────────────────── */
@@ -1106,4 +1366,64 @@ body {
 .mobile-pairSubmit {
   width: 100%;
 }
+
+/* ── directory browser ─────────────────────────────────────────────── */
+
+.dir-browser {
+  display: flex;
+  flex-direction: column;
+}
+
+.dir-crumbs {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  padding: 12px 16px;
+  background: var(--m-bg-raised);
+  border-bottom: 1px solid var(--m-border);
+  white-space: nowrap;
+}
+
+.dir-crumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.dir-crumb {
+  border: none;
+  background: transparent;
+  padding: 4px 6px;
+  color: var(--m-text);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dir-crumb:active {
+  background: var(--m-bg-input);
+  border-radius: 4px;
+}
+
+.dir-crumb-separator {
+  color: var(--m-text-tertiary);
+  margin: 0 4px;
+  font-size: 14px;
+}
+
+.dir-entry {
+  padding-left: 16px;
+}
+
+.dir-entry-hidden {
+  opacity: 0.5;
+}
+
+.dir-select {
+  padding: 16px;
+  background: var(--m-bg);
+  border-top: 1px solid var(--m-border);
+}
+
+.dir-empty {
+  padding: 40px 0;
+}
 `
+