fix(ux): 10 UI/UX bugs from pre-release audit (toward no-bug launch gate)
Found via parallel screen audit; each confirmed in code: - AuthGate: auto-prompt biometrics on lock (useEffect was imported but unused) - CodeBlock: horizontal scroll for long code lines (were wrapped/mangled) - DiffView: horizontal scroll instead of numberOfLines=1 truncation - chat: biometric-cancel on send shows feedback instead of silently dropping msg - chat: send failure restores input + attachments and alerts - chat: removed dead /compact + /clear builtin commands (advertised, no-op) - sessions: delete + rename failures alert instead of silent; rename guarded against double-submit - sessions: onRefresh spinner no longer hangs forever if a refresh rejects - add/edit connection: validate URL has http(s):// scheme before save/test typecheck clean, 65/65 unit tests pass. Runtime UI behavior still needs on-device verification per the pre-posting test gate (HANDOFF §0b). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -111,6 +111,7 @@ export default function SessionsScreen() {
|
||||
const [isCreating, setIsCreating] = useState(false)
|
||||
const [renaming, setRenaming] = useState<Session | null>(null)
|
||||
const [renameText, setRenameText] = useState("")
|
||||
const renamingInFlight = useRef(false)
|
||||
|
||||
const { sessions, isLoading, error, loadSessions, createSession, deleteSession } = useSessions()
|
||||
const {
|
||||
@@ -149,9 +150,14 @@ export default function SessionsScreen() {
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
setRefreshing(true)
|
||||
await Promise.all([loadSessions(), refreshProject()])
|
||||
setRefreshing(false)
|
||||
}, [])
|
||||
try {
|
||||
await Promise.all([loadSessions(), refreshProject()])
|
||||
} catch (err) {
|
||||
console.error("Refresh failed:", err)
|
||||
} finally {
|
||||
setRefreshing(false)
|
||||
}
|
||||
}, [loadSessions, refreshProject])
|
||||
|
||||
const handleRename = useCallback((session: Session) => {
|
||||
setRenameText(session.title || "")
|
||||
@@ -160,13 +166,21 @@ export default function SessionsScreen() {
|
||||
|
||||
const submitRename = useCallback(async () => {
|
||||
const title = renameText.trim()
|
||||
if (!title || !renaming) return
|
||||
if (!title || !renaming || renamingInFlight.current) return
|
||||
const renameClient = renaming.directory ? (clientForDirectory(renaming.directory) ?? client) : client
|
||||
if (!renameClient) return
|
||||
await renameClient.session.update(renaming.id, { title })
|
||||
setRenaming(null)
|
||||
setRenameText("")
|
||||
loadSessions()
|
||||
renamingInFlight.current = true
|
||||
try {
|
||||
await renameClient.session.update(renaming.id, { title })
|
||||
setRenaming(null)
|
||||
setRenameText("")
|
||||
loadSessions()
|
||||
} catch (err) {
|
||||
console.error("Rename failed:", err)
|
||||
Alert.alert("Rename failed", "Could not rename the session. Please try again.")
|
||||
} finally {
|
||||
renamingInFlight.current = false
|
||||
}
|
||||
}, [renaming, renameText, client, clientForDirectory, loadSessions])
|
||||
|
||||
const handleDelete = useCallback(
|
||||
@@ -177,7 +191,12 @@ export default function SessionsScreen() {
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
await deleteSession(session.id)
|
||||
try {
|
||||
await deleteSession(session.id)
|
||||
} catch (err) {
|
||||
console.error("Delete failed:", err)
|
||||
Alert.alert("Delete failed", "Could not delete the session. Please try again.")
|
||||
}
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
@@ -16,6 +16,7 @@ import { useConnections } from "../../src/stores/connections"
|
||||
import type { ConnectionType } from "../../src/lib/types"
|
||||
import { probeConnection, shareReport } from "../../src/lib/diagnostics"
|
||||
import { captureDiagnostic } from "../../src/lib/sentry"
|
||||
import { parseUrl } from "../../src/lib/diagnostics-classify"
|
||||
|
||||
const CONNECTION_TYPES: Array<{
|
||||
type: ConnectionType
|
||||
@@ -68,6 +69,10 @@ export default function EditConnectionScreen() {
|
||||
Alert.alert("Error", "Please enter a server URL")
|
||||
return
|
||||
}
|
||||
if (!parseUrl(url).valid) {
|
||||
Alert.alert("Invalid URL", "Enter a full URL including http:// or https://, e.g. http://192.168.1.100:4096")
|
||||
return
|
||||
}
|
||||
|
||||
setIsTesting(true)
|
||||
const result = await testConnection(
|
||||
@@ -111,6 +116,10 @@ export default function EditConnectionScreen() {
|
||||
Alert.alert("Error", "Please enter a server URL")
|
||||
return
|
||||
}
|
||||
if (!parseUrl(url).valid) {
|
||||
Alert.alert("Invalid URL", "Enter a full URL including http:// or https://, e.g. http://192.168.1.100:4096")
|
||||
return
|
||||
}
|
||||
|
||||
setIsSaving(true)
|
||||
await updateConnection(connection.id, {
|
||||
|
||||
@@ -17,6 +17,7 @@ import { useConnections } from "../../src/stores/connections"
|
||||
import type { ConnectionType } from "../../src/lib/types"
|
||||
import { probeConnection, shareReport } from "../../src/lib/diagnostics"
|
||||
import { captureDiagnostic } from "../../src/lib/sentry"
|
||||
import { parseUrl } from "../../src/lib/diagnostics-classify"
|
||||
|
||||
export default function AddConnectionScreen() {
|
||||
const colorScheme = useColorScheme()
|
||||
@@ -121,6 +122,10 @@ export default function AddConnectionScreen() {
|
||||
Alert.alert("Error", "Please enter a server URL")
|
||||
return
|
||||
}
|
||||
if (!parseUrl(url).valid) {
|
||||
Alert.alert("Invalid URL", "Enter a full URL including http:// or https://, e.g. http://192.168.1.100:4096")
|
||||
return
|
||||
}
|
||||
|
||||
setIsConnecting(true)
|
||||
await addConnection(
|
||||
|
||||
@@ -61,14 +61,6 @@ const BUILTIN_COMMANDS: SlashCommand[] = [
|
||||
icon: "person-outline",
|
||||
type: "builtin",
|
||||
},
|
||||
{
|
||||
trigger: "compact",
|
||||
title: "Compact",
|
||||
description: "Summarize conversation",
|
||||
icon: "contract-outline",
|
||||
type: "builtin",
|
||||
},
|
||||
{ trigger: "clear", title: "Clear", description: "Clear the session", icon: "trash-outline", type: "builtin" },
|
||||
]
|
||||
|
||||
function getShortDir(dir?: string): string | null {
|
||||
@@ -214,12 +206,6 @@ export default function SessionScreen() {
|
||||
setInput("")
|
||||
cycleAgent()
|
||||
return
|
||||
case "compact":
|
||||
setInput("")
|
||||
return
|
||||
case "clear":
|
||||
setInput("")
|
||||
return
|
||||
}
|
||||
}
|
||||
setInput(`/${cmd.trigger} `)
|
||||
@@ -316,7 +302,10 @@ export default function SessionScreen() {
|
||||
const handleSend = async () => {
|
||||
if (!input.trim() && attachments.length === 0) return
|
||||
const authenticated = await authenticateForMessage()
|
||||
if (!authenticated) return
|
||||
if (!authenticated) {
|
||||
Alert.alert("Authentication required", "Biometric authentication is required to send. Please try again.")
|
||||
return
|
||||
}
|
||||
|
||||
const text = input.trim()
|
||||
const files = [...attachments]
|
||||
@@ -343,7 +332,15 @@ export default function SessionScreen() {
|
||||
|
||||
// Messages are queued server-side when the session is busy.
|
||||
// No need to abort - just send and it will be processed after current response.
|
||||
await sendMessage(text, model || undefined, agent || undefined, files)
|
||||
try {
|
||||
await sendMessage(text, model || undefined, agent || undefined, files)
|
||||
} catch (err) {
|
||||
console.error("Send failed:", err)
|
||||
// Restore the user's text and attachments so their input isn't lost.
|
||||
setInput((prev) => (prev ? prev : text))
|
||||
setAttachments((prev) => (prev.length ? prev : files))
|
||||
Alert.alert("Message not sent", "Could not send your message. Check your connection and try again.")
|
||||
}
|
||||
}
|
||||
|
||||
// In inverted mode, offset 0 = bottom. Show scroll button when scrolled away from bottom.
|
||||
|
||||
Reference in New Issue
Block a user