fix(flow-chat): improve permission request previews

src/web-ui/src/flow_chat/components/CopyableTextPreview.scss

@@ -0,0 +1,68 @@
+.copyable-text-preview {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--tool-card-font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.copyable-text-preview.copyable-text-preview--theme-font {
+  font-family: var(--font-family-sans);
+}
+
+.copyable-text-preview--compact {
+  font-size: var(--flowchat-font-size-xs);
+  line-height: var(--flowchat-support-line-height);
+  font-weight: normal;
+  color: var(--color-text-muted);
+}
+
+.copyable-text-preview__empty {
+  color: color-mix(in srgb, var(--color-error) 72%, var(--color-static-white));
+  font-style: italic;
+}
+
+.copyable-text-preview-tooltip-content {
+  max-width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-gap-2);
+  font-family: var(--font-family-sans);
+  font-size: var(--flowchat-font-size-sm);
+  line-height: var(--flowchat-support-line-height);
+}
+
+.copyable-text-preview-tooltip-content__text {
+  min-width: 0;
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.copyable-text-preview-tooltip {
+  .bitfun-tooltip__content {
+    max-width: min(960px, calc(100vw - 32px));
+  }
+}
+
+.copyable-text-preview-tooltip__copy {
+  flex: none;
+  margin-top: 1px;
+  color: var(--color-text-muted);
+
+  &.icon-btn--xs {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.copied {
+    color: var(--color-success);
+  }
+}

src/web-ui/src/flow_chat/components/CopyableTextPreview.test.tsx

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { CopyableTextPreview } from './CopyableTextPreview';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => ({
+        'toolCards.common.copy': 'Copy',
+        'toolCards.common.copied': 'Copied',
+        'toolCards.common.copyFailed': 'Failed to copy',
+      })[key] ?? key,
+    }),
+  };
+});
+
+vi.mock('../../component-library', () => ({
+  Tooltip: ({ content, children }: { content: React.ReactNode; children: React.ReactElement }) => (
+    <>
+      {children}
+      {content}
+    </>
+  ),
+  IconButton: ({ children, tooltip: _tooltip, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { tooltip?: string }) => (
+    <button type="button" {...props}>{children}</button>
+  ),
+}));
+
+describe('CopyableTextPreview', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it('copies the complete interactive tooltip text', async () => {
+    const writeText = vi.fn(() => Promise.resolve());
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    });
+    const tooltipText = 'pnpm run type-check:web\npnpm run lint:web';
+
+    await act(async () => {
+      root.render(
+        <CopyableTextPreview
+          text="pnpm run type-check:web"
+          emptyText="No command"
+          tooltipContent={tooltipText}
+        />,
+      );
+    });
+
+    const copyButton = container.querySelector<HTMLButtonElement>('[aria-label="Copy"]');
+    expect(copyButton).not.toBeNull();
+    expect(container.querySelector('.copyable-text-preview-tooltip-content__text')?.textContent)
+      .toBe(tooltipText);
+
+    await act(async () => {
+      copyButton?.click();
+      await Promise.resolve();
+    });
+
+    expect(writeText).toHaveBeenCalledWith(tooltipText);
+  });
+});

src/web-ui/src/flow_chat/components/CopyableTextPreview.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Check, Copy } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { IconButton, Tooltip } from '../../component-library';
+import { useCopyTextAction } from '../hooks/useCopyTextAction';
+import './CopyableTextPreview.scss';
+
+interface CopyableTextPreviewProps extends React.HTMLAttributes<HTMLElement> {
+  text?: string | null;
+  emptyText: React.ReactNode;
+  as?: 'span' | 'code';
+  className?: string;
+  tooltipContent?: React.ReactNode;
+  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export const CopyableTextPreview = React.forwardRef<HTMLElement, CopyableTextPreviewProps>(({
+  text,
+  emptyText,
+  as = 'span',
+  className,
+  tooltipContent,
+  tooltipPlacement = 'bottom',
+  ...restProps
+}, ref) => {
+  const { t } = useTranslation('flow-chat');
+  const content = text?.trim()
+    ? text
+    : <span className="copyable-text-preview__empty">{emptyText}</span>;
+  const resolvedClassName = `copyable-text-preview${className ? ` ${className}` : ''}`;
+  const copyText = typeof tooltipContent === 'string' && tooltipContent.trim()
+    ? tooltipContent
+    : undefined;
+  const { copied, copy } = useCopyTextAction({
+    getText: () => copyText ?? '',
+    successMessage: t('toolCards.common.copied'),
+    failureMessage: t('toolCards.common.copyFailed'),
+    showSuccessNotification: false,
+  });
+  const copyTooltip = copied ? t('toolCards.common.copied') : t('toolCards.common.copy');
+  const node = as === 'code' ? (
+    <code ref={ref} className={resolvedClassName} {...restProps}>
+      {content}
+    </code>
+  ) : (
+    <span ref={ref} className={resolvedClassName} {...restProps}>
+      {content}
+    </span>
+  );
+
+  if (!tooltipContent) {
+    return node;
+  }
+
+  return (
+    <Tooltip
+      content={
+        <div className="copyable-text-preview-tooltip-content">
+          <span className="copyable-text-preview-tooltip-content__text">{tooltipContent}</span>
+          {copyText && (
+            <IconButton
+              className={`copyable-text-preview-tooltip__copy${copied ? ' copied' : ''}`}
+              variant="ghost"
+              size="xs"
+              onClick={copy}
+              tooltip={copyTooltip}
+              aria-label={copyTooltip}
+            >
+              {copied ? <Check size={12} /> : <Copy size={12} />}
+            </IconButton>
+          )}
+        </div>
+      }
+      placement={tooltipPlacement}
+      className="copyable-text-preview-tooltip"
+      interactive
+    >
+      {node}
+    </Tooltip>
+  );
+});
+
+CopyableTextPreview.displayName = 'CopyableTextPreview';

src/web-ui/src/flow_chat/components/modern/PermissionRequestPanel.scss

@@ -30,8 +30,7 @@
   background: color-mix(in srgb, var(--color-bg-elevated) 96%, var(--color-warning));
   box-shadow:
     0 16px 40px var(--color-overlay-black-30),
-    0 3px 10px var(--color-overlay-black-12),
-    inset 3px 0 0 color-mix(in srgb, var(--color-warning) 76%, transparent);
+    0 3px 10px var(--color-overlay-black-12);
   color: var(--color-text-primary);
   transform-origin: center bottom;
   animation: permission-request-panel-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
@@ -97,13 +96,19 @@
   height: 30px;
   padding: 0;
   border-radius: 5px;
+  border-color: transparent;
+  background: transparent;
 }
 
 .permission-request-panel__collapse:hover,
 .permission-request-panel__collapsed-trigger:hover {
   background: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg-primary));
 }
 
+.permission-request-panel__collapse:hover {
+  background: transparent;
+}
+
 .permission-request-panel__collapse:focus-visible,
 .permission-request-panel__collapsed-trigger:focus-visible {
   outline: 2px solid var(--color-warning);
@@ -231,6 +236,7 @@
   border: 1px solid var(--border-base);
   border-radius: 6px;
   padding: 7px 9px;
+  font-family: var(--font-family-sans);
   color: var(--color-text-primary);
   background: var(--color-bg-primary);
 }
@@ -301,13 +307,15 @@
 }
 
 .permission-request-panel__actions button:disabled {
-  cursor: wait;
   opacity: 0.6;
 }
 
-.permission-request-panel__batch-actions button:disabled {
+.permission-request-panel__actions button:disabled:not(.permission-request-panel__feedback-disabled) {
   cursor: wait;
-  opacity: 0.6;
+}
+
+.permission-request-panel__actions button.permission-request-panel__feedback-disabled {
+  cursor: not-allowed;
 }
 
 .permission-request-panel .permission-request-panel__reject {