Tighten live chat and Search after the cleanup passes

Refuse a personal secret save when its pre-save read fails, since saving replaces
the whole map. A query in the URL now outranks the remembered mode, and a search is
recorded on submit rather than on any URL change, Home's entry included. Keep typed
edits on undecided review cards. Use the owning design-system components for links,
secrets, notices and rows, and distinguish history loading from empty.

Author: waleedlatif1

apps/sim/hooks/queries/copilot-tool-permissions.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { requestJson } from '@/lib/api/client/request'
+import { copilotToolPermissionContract } from '@/lib/api/contracts/copilot'
+import { generalSettingsKeys } from '@/hooks/queries/current-user-data'
+
+type ToolDecision = 'allow' | 'allow_chat' | 'always_allow' | 'skip'
+
+/** Answers gated tool calls. "For every chat" is a saved preference, so settings read fresh after. */
+export function useDecideToolPermissions() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ ids, decision }: { ids: readonly string[]; decision: ToolDecision }) =>
+      requestJson(copilotToolPermissionContract, {
+        body: { decisions: ids.map((toolCallId) => ({ toolCallId, decision })) },
+      }),
+    onSuccess: (_result, { decision }) => {
+      if (decision === 'always_allow') {
+        void queryClient.invalidateQueries({ queryKey: generalSettingsKeys.settings() })
+      }
+    },
+  })
+}

apps/sim/platform/app/(shell)/_components/chat/cards/assistant-review.tsx

@@ -141,7 +141,10 @@ export function AssistantReview({ turnId }: { turnId: string }) {
     setFailure('')
     try {
       await decide(ids, decision, decision === 'allow' ? edits : undefined)
-      setEdits({})
+      // The cards not decided stay on screen, with whatever was typed into them.
+      setEdits((current) =>
+        Object.fromEntries(Object.entries(current).filter(([id]) => !ids.includes(id)))
+      )
     } catch (error) {
       setFailure(error instanceof Error ? error.message : 'Could not save this review')
     }

apps/sim/platform/app/(shell)/_components/chat/cards/cards.module.css

@@ -30,11 +30,6 @@
   min-inline-size: 0;
   overflow-wrap: anywhere;
 }
-.glyph {
-  display: inline-flex;
-  flex: none;
-  color: var(--ui-secondary);
-}
 .quiet,
 .fields dt {
   color: var(--ui-secondary);
@@ -47,6 +42,3 @@
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
-.link {
-  text-decoration: underline;
-}

apps/sim/platform/app/(shell)/_components/chat/cards/live-credential-card.tsx

@@ -1,14 +1,15 @@
 'use client'
 
 import { useState } from 'react'
+import Link from 'next/link'
 import styles from '@/platform/app/(shell)/_components/chat/cards/cards.module.css'
 import type {
   CredentialCardProps,
   UsageNoticeProps,
 } from '@/platform/app/(shell)/_components/chat/message/message-segments'
 import type { PlatformCredentialRequest } from '@/platform/app/(shell)/_components/chat/model'
-import { Button, InlineNotice } from '@/platform/design-system/components'
-import { Input } from '@/platform/design-system/components/field/inputs'
+import { Button, InlineNotice, SecretField } from '@/platform/design-system/components'
+import { ControlRow } from '@/platform/design-system/components/button/control-row'
 import {
   CredentialWorkspaceProvider,
   useCredentialWorkspace,
@@ -31,31 +32,35 @@ interface RowProps {
   onConnected: () => void
 }
 
-function LinkRow({ item, controlId, onConnected }: RowProps) {
+function LinkRow({ item, url, controlId, onConnected }: RowProps & { url: string }) {
   const name = serviceName(item)
   const connection = useOAuthChipConnection({
-    connectUrl: item.value ?? '',
+    connectUrl: url,
     provider: item.provider ?? '',
     displayName: name,
     controlId,
     onConnected,
   })
   if (connection.connected) return <p data-type='T048'>Connected {name}</p>
   return (
-    <a
-      className={styles.link}
-      data-type='T048'
-      href={item.value}
-      target='_blank'
-      rel='noopener noreferrer'
-      onClick={connection.onConnectClick}
-    >
-      {connection.status === 'pending'
-        ? `Waiting for ${name} connection`
-        : connection.reconnectCredentialId
-          ? `Reconnect ${name}`
-          : `Connect ${name}`}
-    </a>
+    <ControlRow
+      render={
+        <Link
+          href={url}
+          target='_blank'
+          rel='noopener noreferrer'
+          onClick={connection.onConnectClick}
+        />
+      }
+      label={
+        connection.status === 'pending'
+          ? `Waiting for ${name} connection`
+          : connection.reconnectCredentialId
+            ? `Reconnect ${name}`
+            : `Connect ${name}`
+      }
+      trailingIcon='I030'
+    />
   )
 }
 
@@ -200,10 +205,11 @@ export function LiveCredentialCard({
                   controlId={controlId}
                   onConnected={markConnected}
                 />
-              ) : canEdit ? (
+              ) : canEdit && item.safeUrl ? (
                 <LinkRow
                   key={controlId}
                   item={item}
+                  url={item.safeUrl}
                   controlId={controlId}
                   onConnected={markConnected}
                 />
@@ -216,35 +222,30 @@ export function LiveCredentialCard({
                   {item.name} added
                 </p>
               ) : (
-                <Input
+                <SecretField
                   key={controlId}
                   label={item.name ?? 'Secret'}
                   placeholder={item.name}
-                  type='password'
                   value={drafts[index] ?? ''}
                   onChange={(value) => setDrafts((current) => ({ ...current, [index]: value }))}
                 />
               )
             case 'service_account':
               return canEdit ? (
-                <a
+                <ControlRow
                   key={controlId}
-                  className={styles.link}
-                  data-type='T048'
-                  href={integrationsHref}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                >
-                  Connect {serviceName(item)} in Integrations
-                </a>
+                  render={
+                    <Link href={integrationsHref} target='_blank' rel='noopener noreferrer' />
+                  }
+                  label={`Connect ${serviceName(item)} in Integrations`}
+                  trailingIcon='I030'
+                />
               ) : null
             case 'folder_access':
               return <FolderRow key={controlId} item={item} />
             case 'sim_key':
               return item.value ? (
-                <code key={controlId} data-type='T009'>
-                  {item.value}
-                </code>
+                <SecretField key={controlId} label='Sim key' value={item.value} readOnly copyable />
               ) : null
             default:
               return null
@@ -284,9 +285,11 @@ export function LiveUsageNotice({ action, reason, message }: UsageNoticeProps) {
       }
       action={
         canManage ? (
-          <a className={styles.link} data-type='T048' href={href}>
-            {upgrade ? 'Upgrade Plan' : 'Increase Limit'}
-          </a>
+          <ControlRow
+            render={<Link href={href} />}
+            label={upgrade ? 'Upgrade Plan' : 'Increase Limit'}
+            trailingIcon='I030'
+          />
         ) : undefined
       }
     />

apps/sim/platform/app/(shell)/_components/chat/cards/question-card.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import styles from '@/platform/app/(shell)/_components/chat/cards/cards.module.css'
 import type { PlatformQuestion } from '@/platform/app/(shell)/_components/chat/model'
-import { Button, Checkbox, IconButton } from '@/platform/design-system/components'
+import { Button, Checkbox, Chip, IconButton } from '@/platform/design-system/components'
 import { Input } from '@/platform/design-system/components/field/inputs'
 
 /** One `Prompt — Answer` line per question, the shape the transcript pairs back to this card. */
@@ -126,14 +126,13 @@ export function QuestionCard({ questions, answers: stored, onSubmit }: QuestionC
               onCheckedChange={() => toggle(option.label)}
             />
           ) : (
-            <Button
+            <Chip
               key={option.id}
-              variant='muted'
-              size='compact'
+              selected={selected[step]?.includes(option.label) ?? false}
               onClick={() => choose(option.label)}
             >
               {option.label}
-            </Button>
+            </Chip>
           )
         )}
       </div>

apps/sim/platform/app/(shell)/_components/chat/cards/tool-approval.tsx

@@ -7,6 +7,7 @@ import type { PlatformTool, ToolDecision } from '@/platform/app/(shell)/_compone
 import { usePlatformNotices } from '@/platform/app/(shell)/_components/notification-tray/notification-tray'
 import { useChatRuntime } from '@/platform/app/(shell)/_components/session/chat-runtime'
 import { ActionMenu, Button, Icon } from '@/platform/design-system/components'
+import { ActivityBody } from '@/platform/design-system/components/activity-row/activity-body'
 
 const BROWSER_TOOL = /^browser[_-]/
 
@@ -17,14 +18,12 @@ const BROWSER_TOOL = /^browser[_-]/
 export function ToolApproval({ tool }: { tool: PlatformTool }) {
   const { approvals, registerApproval, decideTools } = useChatRuntime()
   const { notify } = usePlatformNotices()
-  const [submitting, setSubmitting] = useState(false)
   const [expired, setExpired] = useState(false)
   useEffect(() => registerApproval(tool.id), [registerApproval, tool.id])
   const { outstanding, submitted } = approvals
-  const busy = submitting || submitted.includes(tool.id)
+  const busy = submitted.includes(tool.id)
   const browser = BROWSER_TOOL.test(tool.name)
   async function submit(decision: ToolDecision, ids: readonly string[]) {
-    setSubmitting(true)
     try {
       const result = await decideTools(ids, decision)
       if (result === 'gone') setExpired(true)
@@ -34,7 +33,6 @@ export function ToolApproval({ tool }: { tool: PlatformTool }) {
         icon: 'I047',
         title: 'Could not record your choice. Please try again.',
       })
-      setSubmitting(false)
     }
   }
   if (expired)
@@ -45,14 +43,11 @@ export function ToolApproval({ tool }: { tool: PlatformTool }) {
     )
   return (
     <div className={styles.card}>
-      <div className={styles.row}>
-        <span className={styles.glyph}>
-          <Icon name='I084' />
-        </span>
+      <ActivityBody leading={<Icon name='I084' />} decorativeLeading>
         <span className={styles.title} data-type='T048' title={tool.input}>
           {tool.title}
         </span>
-      </div>
+      </ActivityBody>
       <div className={styles.actions}>
         <Button
           variant='primary'
@@ -69,11 +64,13 @@ export function ToolApproval({ tool }: { tool: PlatformTool }) {
             {
               id: 'chat',
               label: browser ? 'Browser actions in this chat' : 'For this chat',
+              disabled: busy,
               onSelect: () => void submit('allow_chat', [tool.id]),
             },
             {
               id: 'every',
               label: browser ? 'Browser actions in every chat' : 'For every chat',
+              disabled: busy,
               onSelect: () => void submit('always_allow', [tool.id]),
             },
           ]}

apps/sim/platform/app/(shell)/_components/chat/message/lane-activity.tsx

@@ -5,7 +5,7 @@ import {
   ToolInteraction,
 } from '@/platform/app/(shell)/_components/chat/message/tool-activity'
 import type { PlatformLane } from '@/platform/app/(shell)/_components/chat/model'
-import { Disclosure } from '@/platform/design-system/components'
+import { Disclosure, InlineNotice } from '@/platform/design-system/components'
 
 /** One subagent's work under its own disclosure. A held approval renders outside the collapse. */
 export function LaneActivity({ lane }: { lane: PlatformLane }) {
@@ -39,7 +39,7 @@ export function LaneActivity({ lane }: { lane: PlatformLane }) {
           })}
         </div>
       </Disclosure>
-      {lane.error && <p data-type='T048'>{lane.error}</p>}
+      {lane.error && <InlineNotice intent='danger' message={lane.error} />}
       {held.map((tool) => (
         <ToolInteraction key={tool.id} tool={tool} />
       ))}

apps/sim/platform/app/(shell)/_components/chat/model.ts

@@ -64,6 +64,8 @@ export interface PlatformCredentialRequest {
   workspaceId?: string
   /** The parsed tag item this row came from, which the submission message is built from. */
   source: CredentialItemData
+  /** The connect link, present only when it is safe to open as http(s). */
+  safeUrl?: string
   /** Present when this row connects a Search source rather than a workspace credential. */
   searchTarget?: SearchConnectionTarget
 }

apps/sim/platform/app/(shell)/_components/chat/panel/panel-tabs.tsx

@@ -45,7 +45,7 @@ export function PanelTabs({
           <span className={styles.title} data-type='T046'>
             {active && <OverflowText text={active.label}>{active.label}</OverflowText>}
           </span>
-          <IconButton icon='I074' label='New panel tab' onClick={onAdd} />
+          {onAdd && <IconButton icon='I074' label='New panel tab' onClick={onAdd} />}
           <div className={styles.actions}>
             <div className={styles.expand}>
               <IconButton

apps/sim/platform/app/(shell)/_components/chat/panel/panels.module.css

@@ -149,7 +149,3 @@
     display: none;
   }
 }
-.outlink {
-  justify-self: center;
-  text-decoration: underline;
-}