@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.3

package/dist/pages/SharedSessionPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharedSessionPage.js","names":[],"sources":["../../src/pages/SharedSessionPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Terminal,\n  Loader2,\n  AlertCircle,\n  Lock,\n  Eye,\n  Gamepad2,\n  Users,\n  Clock,\n  ArrowLeft,\n  LogIn,\n} from 'lucide-react';\nimport {\n  useValidateShareLinkQuery,\n  useJoinSharedSessionMutation,\n  useLeaveSharedSessionMutation,\n  useRequestSessionControlMutation,\n  useReleaseSessionControlMutation,\n  useGetSessionCollaboratorsQuery,\n  useCollaboratorJoinedSubscription,\n  useCollaboratorLeftSubscription,\n  useSessionControlChangedSubscription,\n  type SessionCollaboratorFieldsFragment,\n} from '@/generated/wspace-operations';\nimport { SessionSharePermission } from '@/generated/wspace-types';\nimport { SharedTerminalPanel } from '@/components/sessions/SharedTerminalPanel';\nimport { CollaboratorsList } from '@/components/sessions/CollaboratorsList';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\n\ninterface PasswordFormProps {\n  onSubmit: (password: string) => void;\n  isLoading: boolean;\n  error?: string | null;\n}\n\n/**\n * Password entry form for protected share links\n */\nfunction PasswordForm({ onSubmit, isLoading, error }: PasswordFormProps) {\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (password.trim()) {\n      onSubmit(password);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-4 w-full max-w-sm\">\n      <div>\n        <label\n          htmlFor=\"shared-session-password\"\n          className=\"block text-sm font-medium text-text-primary mb-2\"\n        >\n          This session is password protected\n        </label>\n        <div className=\"relative\">\n          <Lock className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary\" />\n          <input\n            aria-label=\"Enter password\"\n            id=\"shared-session-password\"\n            type=\"password\"\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Enter password\"\n            className=\"w-full pl-10 pr-4 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          />\n        </div>\n      </div>\n      {error && (\n        <div className=\"flex items-center gap-2 p-3 bg-status-error-bg/10 border border-status-error-bg/30 rounded-lg\">\n          <AlertCircle className=\"size-4 text-status-error-text\" />\n          <span className=\"text-sm text-status-error-text\">{error}</span>\n        </div>\n      )}\n      <button\n        type=\"submit\"\n        disabled={isLoading || !password.trim()}\n        className=\"w-full px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n      >\n        {isLoading ? (\n          <span className=\"flex items-center justify-center gap-2\">\n            <Loader2 className=\"size-4 animate-spin\" />\n            Joining...\n          </span>\n        ) : (\n          'Join Session'\n        )}\n      </button>\n    </form>\n  );\n}\n\n/**\n * SharedSessionPage - Page for accessing shared terminal sessions via link\n *\n * URL: /share/:token\n *\n * Flow:\n * 1. Validate the share link token\n * 2. If password required, show password form\n * 3. Join the shared session\n * 4. Display terminal with collaboration UI\n */\nexport function SharedSessionPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n  const { token } = useParams<{ token: string }>();\n  const { currentUser } = useVibeControls();\n  // State\n  const [joined, setJoined] = useState(false);\n  const [sessionId, setSessionId] = useState<string | null>(null);\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState<string | null>(null);\n  const [joinError, setJoinError] = useState<string | null>(null);\n  const [hasLeft, setHasLeft] = useState(false);\n  const joiningRef = useRef(false);\n  const hasJoinedRef = useRef(false);\n\n  // Get currentUserId from auth context\n  const currentUserId = currentUser?.id ?? '';\n\n  // Validate the share link\n  const {\n    data: validationData,\n    loading: validating,\n    error: validationError,\n    refetch: refetchValidation,\n  } = useValidateShareLinkQuery({\n    variables: { token: token || '' },\n    skip: !token,\n  });\n\n  const validation = validationData?.validateShareLink;\n\n  // Mutations\n  const [joinSession, { loading: joining }] = useJoinSharedSessionMutation();\n  const [leaveSession] = useLeaveSharedSessionMutation();\n  const [requestControl, { loading: requestingControl }] = useRequestSessionControlMutation();\n  const [releaseControl, { loading: releasingControl }] = useReleaseSessionControlMutation();\n\n  // Get collaborators once joined\n  const { data: collaboratorsData, refetch: refetchCollaborators } =\n    useGetSessionCollaboratorsQuery({\n      variables: { sessionId: sessionId || '' },\n      skip: !sessionId || !joined,\n      // Subscription handles the primary signal (collaboratorJoined /\n      // collaboratorLeft). Poll is a slow safety-net to recover if the\n      // SSE stream drops silently — 60s is enough since presence flips\n      // are pushed through the subscription.\n      pollInterval: 60_000,\n    });\n\n  const collaborators = collaboratorsData?.sessionCollaborators || [];\n\n  // Real-time subscriptions for collaboration events\n  const { data: joinedData } = useCollaboratorJoinedSubscription({\n    variables: { sessionId: sessionId || '' },\n    skip: !sessionId || !joined,\n  });\n\n  const { data: leftData } = useCollaboratorLeftSubscription({\n    variables: { sessionId: sessionId || '' },\n    skip: !sessionId || !joined,\n  });\n\n  const { data: controlChangedData } = useSessionControlChangedSubscription({\n    variables: { sessionId: sessionId || '' },\n    skip: !sessionId || !joined,\n  });\n\n  // Refetch collaborators when subscription events arrive\n  useEffect(() => {\n    if (joinedData || leftData || controlChangedData) {\n      refetchCollaborators();\n    }\n  }, [joinedData, leftData, controlChangedData, refetchCollaborators]);\n\n  // Cleanup: Leave session only on unmount, and only if we actually joined\n  useEffect(() => {\n    return () => {\n      if (hasJoinedRef.current && sessionId) {\n        leaveSession({ variables: { sessionId } }).catch(console.error);\n      }\n    };\n  }, [sessionId, leaveSession]);\n\n  const handleJoinSession = useCallback(\n    async (passwordInput?: string) => {\n      if (!token || joiningRef.current) return;\n\n      joiningRef.current = true;\n      const pwd = passwordInput || password;\n      setPasswordError(null);\n      setJoinError(null);\n\n      try {\n        const result = await joinSession({\n          variables: {\n            input: {\n              shareToken: token,\n              password: pwd || undefined,\n            },\n          },\n        });\n\n        if (result.data?.joinSharedSession) {\n          hasJoinedRef.current = true;\n          setJoined(true);\n          setSessionId(result.data.joinSharedSession.sessionId);\n          void refetchValidation();\n        }\n      } catch (err) {\n        const message = err instanceof Error ? err.message : 'Failed to join session';\n        if (message.toLowerCase().includes('password')) {\n          setPasswordError('Incorrect password');\n        } else {\n          setPasswordError(message);\n          setJoinError(message);\n        }\n      } finally {\n        joiningRef.current = false;\n      }\n    },\n    [joinSession, password, refetchValidation, token]\n  );\n\n  // Auto-join if no password required and link is valid\n  useEffect(() => {\n    if (\n      validation?.isValid &&\n      !validation.requiresPassword &&\n      !joined &&\n      !hasLeft &&\n      !joiningRef.current &&\n      token\n    ) {\n      // Set sessionId early from validation so collaborators query can start\n      if (validation.sessionId && !sessionId) {\n        setSessionId(validation.sessionId);\n      }\n      void handleJoinSession();\n    }\n  }, [\n    validation?.isValid,\n    validation?.requiresPassword,\n    validation?.sessionId,\n    joined,\n    hasLeft,\n    token,\n    sessionId,\n    handleJoinSession,\n  ]);\n\n  const handleRequestControl = useCallback(async () => {\n    if (!sessionId) return;\n    try {\n      await requestControl({ variables: { sessionId } });\n      refetchCollaborators();\n    } catch (err) {\n      console.error('Failed to request control:', err);\n    }\n  }, [sessionId, requestControl, refetchCollaborators]);\n\n  const handleReleaseControl = useCallback(async () => {\n    if (!sessionId) return;\n    try {\n      await releaseControl({ variables: { sessionId } });\n      refetchCollaborators();\n    } catch (err) {\n      console.error('Failed to release control:', err);\n    }\n  }, [sessionId, releaseControl, refetchCollaborators]);\n\n  const handleLeaveSession = useCallback(async () => {\n    if (!sessionId) return;\n    try {\n      await leaveSession({ variables: { sessionId } });\n      hasJoinedRef.current = false; // Prevent cleanup from firing a second leave\n      setHasLeft(true);\n      setJoined(false);\n      setSessionId(null);\n      window.history.back();\n    } catch (err) {\n      console.error('Failed to leave session:', err);\n    }\n  }, [sessionId, leaveSession]);\n\n  // Determine current user's collaborator entry\n  const currentCollaborator = collaborators.find(\n    (c: SessionCollaboratorFieldsFragment) => c.userId === currentUserId\n  );\n  const permission = validation?.permission || SessionSharePermission.View;\n\n  // Stabilize terminal URL to prevent iframe reloads on parent re-render\n  const terminalUrl = useMemo(() => validation?.ttydUrl || null, [validation?.ttydUrl]);\n\n  // Loading state\n  if (validating) {\n    return (\n      <div className=\"min-h-screen bg-bg-surface flex items-center justify-center\">\n        <div className=\"text-center\">\n          <Loader2 className=\"size-8 text-action-primary-bg animate-spin mx-auto mb-4\" />\n          <p className=\"text-text-secondary\">\n            {tr('sharedSession.validating', 'Validating share link...')}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (validationError || !validation) {\n    return (\n      <div className=\"min-h-screen bg-bg-surface flex items-center justify-center p-4\">\n        <div className=\"text-center max-w-md\">\n          <div className=\"size-16 bg-status-error-bg/10 rounded-full flex items-center justify-center mx-auto mb-4\">\n            <AlertCircle className=\"size-8 text-status-error-text\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr('sharedSession.unableToLoad', 'Unable to Load Session')}\n          </h2>\n          <p className=\"text-text-secondary mb-6\">\n            {validationError?.message ||\n              tr('sharedSession.failedValidate', 'Failed to validate the share link')}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => window.history.back()}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n          >\n            <ArrowLeft className=\"size-4\" />\n            {tr('sharedSession.goBack', 'Go Back')}\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // Invalid link\n  if (!validation.isValid) {\n    return (\n      <div className=\"min-h-screen bg-bg-surface flex items-center justify-center p-4\">\n        <div className=\"text-center max-w-md\">\n          <div className=\"size-16 bg-status-warning-bg/10 rounded-full flex items-center justify-center mx-auto mb-4\">\n            <AlertCircle className=\"size-8 text-status-warning-text\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr('sharedSession.invalidExpiredLink', 'Invalid or Expired Link')}\n          </h2>\n          <p className=\"text-text-secondary mb-6\">\n            {validation.error ||\n              tr('sharedSession.linkNoLongerValid', 'This share link is no longer valid.')}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => window.history.back()}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n          >\n            <ArrowLeft className=\"size-4\" />\n            {tr('sharedSession.goBack', 'Go Back')}\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // Password required - show password form\n  if (validation.requiresPassword && !joined) {\n    return (\n      <div className=\"min-h-screen bg-bg-surface flex items-center justify-center p-4\">\n        <div className=\"w-full max-w-md\">\n          <div className=\"bg-bg-surface border border-border-default rounded-lg p-6\">\n            {/* Header */}\n            <div className=\"text-center mb-6\">\n              <div className=\"size-12 bg-action-primary-bg/10 rounded-full flex items-center justify-center mx-auto mb-4\">\n                <Terminal className=\"size-6 text-action-primary-bg\" />\n              </div>\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {validation.sessionName || 'Shared Session'}\n              </h2>\n              {validation.ownerName && (\n                <p className=\"text-sm text-text-secondary mt-1\">\n                  {tr('sharedSession.sharedBy', 'Shared by')} {validation.ownerName}\n                </p>\n              )}\n            </div>\n\n            {/* Permission badge */}\n            <div className=\"flex justify-center mb-6\">\n              <div\n                className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm ${\n                  validation.permission === SessionSharePermission.View\n                    ? 'bg-bg-sunken text-text-secondary'\n                    : 'bg-action-primary-bg/10 text-action-primary-bg'\n                }`}\n              >\n                {validation.permission === SessionSharePermission.View ? (\n                  <>\n                    <Eye className=\"size-4\" />\n                    {tr('sharedSession.viewOnly', 'View Only')}\n                  </>\n                ) : (\n                  <>\n                    <Gamepad2 className=\"size-4\" />\n                    {tr('sharedSession.canControl', 'Can Control')}\n                  </>\n                )}\n              </div>\n            </div>\n\n            {/* Expiry info */}\n            {validation.expiresAt && (\n              <div className=\"flex items-center justify-center gap-2 mb-6 text-xs text-text-secondary\">\n                <Clock className=\"size-3.5\" />\n                <span>\n                  {tr('sharedSession.expires', 'Expires')}{' '}\n                  {new Date(validation.expiresAt).toLocaleString()}\n                </span>\n              </div>\n            )}\n\n            {/* Password form */}\n            <PasswordForm\n              onSubmit={(pwd) => {\n                setPassword(pwd);\n                handleJoinSession(pwd);\n              }}\n              isLoading={joining}\n              error={passwordError}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Post-leave state — user explicitly left, don't show join spinner\n  if (hasLeft) {\n    return (\n      <div className=\"min-h-screen bg-bg-surface flex items-center justify-center p-4\">\n        <div className=\"text-center max-w-md\">\n          <div className=\"size-16 bg-bg-sunken rounded-full flex items-center justify-center mx-auto mb-4\">\n            <LogIn className=\"size-8 text-text-secondary\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr('sharedSession.youLeft', 'You left the session')}\n          </h2>\n          <p className=\"text-text-secondary mb-6\">\n            {tr('sharedSession.rejoinHint', 'You can rejoin using the same share link.')}\n          </p>\n          <div className=\"flex items-center justify-center gap-3\">\n            <button\n              type=\"button\"\n              onClick={() => window.history.back()}\n              className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n            >\n              <ArrowLeft className=\"size-4\" />\n              {tr('sharedSession.goBack', 'Go Back')}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => {\n                setHasLeft(false);\n                setJoinError(null);\n                handleJoinSession();\n              }}\n              disabled={joining}\n              className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n            >\n              <LogIn className=\"size-4\" />\n              {tr('sharedSession.rejoin', 'Rejoin')}\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Joining state - show error if join failed, otherwise spinner\n  if (!joined && !validation.requiresPassword) {\n    if (joinError) {\n      return (\n        <div className=\"min-h-screen bg-bg-surface flex items-center justify-center p-4\">\n          <div className=\"text-center max-w-md\">\n            <div className=\"size-16 bg-status-error-bg/10 rounded-full flex items-center justify-center mx-auto mb-4\">\n              <AlertCircle className=\"size-8 text-status-error-text\" />\n            </div>\n            <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n              {tr('sharedSession.failedJoin', 'Failed to Join Session')}\n            </h2>\n            <p className=\"text-text-secondary mb-6\">{joinError}</p>\n            <div className=\"flex items-center justify-center gap-3\">\n              <button\n                type=\"button\"\n                onClick={() => window.history.back()}\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n              >\n                <ArrowLeft className=\"size-4\" />\n                {tr('sharedSession.goBack', 'Go Back')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setJoinError(null);\n                  handleJoinSession();\n                }}\n                disabled={joining}\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n              >\n                <LogIn className=\"size-4\" />\n                {tr('sharedSession.retry', 'Retry')}\n              </button>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"min-h-screen bg-bg-surface flex items-center justify-center\">\n        <div className=\"text-center\">\n          <Loader2 className=\"size-8 text-action-primary-bg animate-spin mx-auto mb-4\" />\n          <p className=\"text-text-secondary\">{tr('sharedSession.joining', 'Joining session...')}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // Main shared session view\n  return (\n    <MotionPage className=\"min-h-screen bg-bg-surface flex flex-col\">\n      {/* Header */}\n      <header className=\"bg-bg-surface border-b border-border-default px-4 py-3\">\n        <div className=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 max-w-screen-2xl mx-auto\">\n          <div className=\"flex items-center gap-4\">\n            <button\n              type=\"button\"\n              onClick={handleLeaveSession}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors\"\n              title=\"Leave session\"\n              aria-label=\"Leave session\"\n            >\n              <ArrowLeft className=\"size-5\" />\n            </button>\n            <div className=\"flex items-center gap-3\">\n              <div className=\"p-2 bg-action-primary-bg/10 rounded-lg\">\n                <Terminal className=\"size-5 text-action-primary-bg\" />\n              </div>\n              <div>\n                <h1 className=\"font-semibold text-text-primary\">\n                  {validation.sessionName || 'Shared Session'}\n                </h1>\n                {validation.ownerName && (\n                  <p className=\"text-xs text-text-secondary\">\n                    {tr('sharedSession.sharedBy', 'Shared by')} {validation.ownerName}\n                  </p>\n                )}\n              </div>\n            </div>\n          </div>\n\n          {/* Permission and collaborator count */}\n          <div className=\"flex items-center gap-3\">\n            <div\n              className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${\n                permission === SessionSharePermission.View\n                  ? 'bg-bg-sunken text-text-secondary'\n                  : 'bg-action-primary-bg/10 text-action-primary-bg'\n              }`}\n            >\n              {permission === SessionSharePermission.View ? (\n                <>\n                  <Eye className=\"size-3.5\" />\n                  {tr('sharedSession.viewOnly', 'View Only')}\n                </>\n              ) : (\n                <>\n                  <Gamepad2 className=\"size-3.5\" />\n                  {tr('sharedSession.interactive', 'Interactive')}\n                </>\n              )}\n            </div>\n            <div className=\"flex items-center gap-1.5 px-2.5 py-1 bg-bg-sunken rounded-full text-xs text-text-secondary\">\n              <Users className=\"size-3.5\" />\n              <span>{collaborators.length}</span>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Main content */}\n      <div className=\"flex-1 flex\">\n        {/* Terminal area */}\n        <div className=\"flex-1 flex flex-col\">\n          <SharedTerminalPanel\n            isShared={true}\n            collaborators={collaborators}\n            currentUserId={currentUserId}\n            permission={permission}\n            onRequestControl={handleRequestControl}\n            onReleaseControl={handleReleaseControl}\n            isRequestingControl={requestingControl}\n            isReleasingControl={releasingControl}\n            className=\"flex-1\"\n          >\n            {/* Terminal iframe - in production this would be the ttyd URL */}\n            <div className=\"w-full h-full bg-bg-inverse text-text-inverse flex items-center justify-center\">\n              {terminalUrl ? (\n                <iframe\n                  src={terminalUrl}\n                  title=\"Shared Terminal\"\n                  className=\"w-full h-full border-0\"\n                  allow=\"clipboard-read; clipboard-write\"\n                  sandbox=\"allow-scripts allow-same-origin allow-forms\"\n                />\n              ) : (\n                <div className=\"text-center\">\n                  <Terminal className=\"size-12 text-text-secondary mx-auto mb-4\" />\n                  <p className=\"text-text-tertiary\">\n                    {tr('sharedSession.terminalLoading', 'Terminal loading...')}\n                  </p>\n                  <p className=\"text-text-secondary text-sm mt-1\">Session ID: {sessionId}</p>\n                </div>\n              )}\n            </div>\n          </SharedTerminalPanel>\n        </div>\n\n        {/* Sidebar - Collaborators */}\n        <aside className=\"w-72 bg-bg-surface border-l border-border-default p-4 hidden lg:block\">\n          <CollaboratorsList\n            collaborators={collaborators}\n            currentUserId={currentUserId}\n            onRequestControl={\n              permission === SessionSharePermission.Interact ? handleRequestControl : undefined\n            }\n            isRequestingControl={requestingControl}\n          />\n\n          {/* Session info */}\n          <div className=\"mt-6 pt-6 border-t border-border-default\">\n            <h4 className=\"text-xs font-medium text-text-secondary uppercase tracking-wide mb-3\">\n              {tr('sharedSession.sessionInfo', 'Session Info')}\n            </h4>\n            <div className=\"space-y-2 text-sm\">\n              {validation.expiresAt && (\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-text-secondary\">\n                    {tr('sharedSession.expires', 'Expires')}\n                  </span>\n                  <span className=\"text-text-primary\">\n                    {new Date(validation.expiresAt).toLocaleTimeString()}\n                  </span>\n                </div>\n              )}\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-text-secondary\">\n                  {tr('sharedSession.yourRole', 'Your role')}\n                </span>\n                <span className=\"text-text-primary capitalize\">\n                  {currentCollaborator?.role?.toLowerCase() || tr('sharedSession.viewer', 'Viewer')}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-text-secondary\">{tr('sharedSession.status', 'Status')}</span>\n                <span className=\"text-status-success-text\">\n                  {tr('sharedSession.connected', 'Connected')}\n                </span>\n              </div>\n            </div>\n          </div>\n        </aside>\n      </div>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SharedSessionPage.js","names":[],"sources":["../../src/pages/SharedSessionPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Terminal,\n  Loader2,\n  AlertCircle,\n  Lock,\n  Eye,\n  Gamepad2,\n  Users,\n  Clock,\n  ArrowLeft,\n  LogIn,\n} from 'lucide-react';\nimport {\n  useValidateShareLinkQuery,\n  useJoinSharedSessionMutation,\n  useLeaveSharedSessionMutation,\n  useRequestSessionControlMutation,\n  useReleaseSessionControlMutation,\n  useGetSessionCollaboratorsQuery,\n  useCollaboratorJoinedSubscription,\n  useCollaboratorLeftSubscription,\n  useSessionControlChangedSubscription,\n  type SessionCollaboratorFieldsFragment,\n} from '@/generated/wspace-operations';\nimport { SessionSharePermission } from '@/generated/wspace-types';\nimport { SharedTerminalPanel } from '@/components/sessions/SharedTerminalPanel';\nimport { CollaboratorsList } from '@/components/sessions/CollaboratorsList';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\n\ninterface PasswordFormProps {\n  onSubmit: (password: string) => void;\n  isLoading: boolean;\n  error?: string | null;\n}\n\n/**\n * Password entry form for protected share links\n */\nfunction PasswordForm({ onSubmit, isLoading, error }: PasswordFormProps) {\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (password.trim()) {\n      onSubmit(password);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-4 w-full max-w-sm\">\n      <div>\n        <label\n          htmlFor=\"shared-session-password\"\n          className=\"block text-sm font-medium text-text-primary mb-2\"\n        >\n          This session is password protected\n        </label>\n        <div className=\"relative\">\n          <Lock className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary\" />\n          <input\n            aria-label=\"Enter password\"\n            id=\"shared-session-password\"\n            type=\"password\"\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Enter password\"\n            className=\"w-full pl-10 pr-4 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          />\n        </div>\n      </div>\n      {error && (\n        <div className=\"flex items-center gap-2 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-lg\">\n          <AlertCircle className=\"size-4 text-status-error-text\" />\n          <span className=\"text-sm text-status-error-text\">{error}</span>\n        </div>\n      )}\n      <button\n        type=\"submit\"\n        disabled={isLoading || !password.trim()}\n        className=\"w-full px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n      >\n        {isLoading ? (\n          <span className=\"flex items-center justify-center gap-2\">\n            <Loader2 className=\"size-4 animate-spin\" />\n            Joining...\n          </span>\n        ) : (\n          'Join Session'\n        )}\n      </button>\n    </form>\n  );\n}\n\n/**\n * SharedSessionPage - Page for accessing shared terminal sessions via link\n *\n * URL: /share/:token\n *\n * Flow:\n * 1. Validate the share link token\n * 2. If password required, show password form\n * 3. Join the shared session\n * 4. Display terminal with collaboration UI\n */\nexport function SharedSessionPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n  const { token } = useParams<{ token: string }>();\n  const { currentUser } = useVibeControls();\n  // State\n  const [joined, setJoined] = useState(false);\n  const [sessionId, setSessionId] = useState<string | null>(null);\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState<string | null>(null);\n  const [joinError, setJoinError] = useState<string | null>(null);\n  const [hasLeft, setHasLeft] = useState(false);\n  const joiningRef = useRef(false);\n  const hasJoinedRef = useRef(false);\n\n  // Get currentUserId from auth context\n  const currentUserId = currentUser?.id ?? '';\n\n  // Validate the share link\n  const {\n    data: validationData,\n    loading: validating,\n    error: validationError,\n    refetch: refetchValidation,\n  } = useValidateShareLinkQuery({\n    variables: { token: token || '' },\n    skip: !token,\n  });\n\n  const validation = validationData?.validateShareLink;\n\n  // Mutations\n  const [joinSession, { loading: joining }] = useJoinSharedSessionMutation();\n  const [leaveSession] = useLeaveSharedSessionMutation();\n  const [requestControl, { loading: requestingControl }] = useRequestSessionControlMutation();\n  const [releaseControl, { loading: releasingControl }] = useReleaseSessionControlMutation();\n\n  // Get collaborators once joined\n  const { data: collaboratorsData, refetch: refetchCollaborators } =\n    useGetSessionCollaboratorsQuery({\n      variables: { sessionId: sessionId || '' },\n      skip: !sessionId || !joined,\n      // Subscription handles the primary signal (collaboratorJoined /\n      // collaboratorLeft). Poll is a slow safety-net to recover if the\n      // SSE stream drops silently — 60s is enough since presence flips\n      // are pushed through the subscription.\n      pollInterval: 60_000,\n    });\n\n  const collaborators = collaboratorsData?.sessionCollaborators || [];\n\n  // Real-time subscriptions for collaboration events\n  const { data: joinedData } = useCollaboratorJoinedSubscription({\n    variables: { sessionId: sessionId || '' },\n    skip: !sessionId || !joined,\n  });\n\n  const { data: leftData } = useCollaboratorLeftSubscription({\n    variables: { sessionId: sessionId || '' },\n    skip: !sessionId || !joined,\n  });\n\n  const { data: controlChangedData } = useSessionControlChangedSubscription({\n    variables: { sessionId: sessionId || '' },\n    skip: !sessionId || !joined,\n  });\n\n  // Refetch collaborators when subscription events arrive\n  useEffect(() => {\n    if (joinedData || leftData || controlChangedData) {\n      refetchCollaborators();\n    }\n  }, [joinedData, leftData, controlChangedData, refetchCollaborators]);\n\n  // Cleanup: Leave session only on unmount, and only if we actually joined\n  useEffect(() => {\n    return () => {\n      if (hasJoinedRef.current && sessionId) {\n        leaveSession({ variables: { sessionId } }).catch(console.error);\n      }\n    };\n  }, [sessionId, leaveSession]);\n\n  const handleJoinSession = useCallback(\n    async (passwordInput?: string) => {\n      if (!token || joiningRef.current) return;\n\n      joiningRef.current = true;\n      const pwd = passwordInput || password;\n      setPasswordError(null);\n      setJoinError(null);\n\n      try {\n        const result = await joinSession({\n          variables: {\n            input: {\n              shareToken: token,\n              password: pwd || undefined,\n            },\n          },\n        });\n\n        if (result.data?.joinSharedSession) {\n          hasJoinedRef.current = true;\n          setJoined(true);\n          setSessionId(result.data.joinSharedSession.sessionId);\n          void refetchValidation();\n        }\n      } catch (err) {\n        const message = err instanceof Error ? err.message : 'Failed to join session';\n        if (message.toLowerCase().includes('password')) {\n          setPasswordError('Incorrect password');\n        } else {\n          setPasswordError(message);\n          setJoinError(message);\n        }\n      } finally {\n        joiningRef.current = false;\n      }\n    },\n    [joinSession, password, refetchValidation, token]\n  );\n\n  // Auto-join if no password required and link is valid\n  useEffect(() => {\n    if (\n      validation?.isValid &&\n      !validation.requiresPassword &&\n      !joined &&\n      !hasLeft &&\n      !joiningRef.current &&\n      token\n    ) {\n      // Set sessionId early from validation so collaborators query can start\n      if (validation.sessionId && !sessionId) {\n        setSessionId(validation.sessionId);\n      }\n      void handleJoinSession();\n    }\n  }, [\n    validation?.isValid,\n    validation?.requiresPassword,\n    validation?.sessionId,\n    joined,\n    hasLeft,\n    token,\n    sessionId,\n    handleJoinSession,\n  ]);\n\n  const handleRequestControl = useCallback(async () => {\n    if (!sessionId) return;\n    try {\n      await requestControl({ variables: { sessionId } });\n      refetchCollaborators();\n    } catch (err) {\n      console.error('Failed to request control:', err);\n    }\n  }, [sessionId, requestControl, refetchCollaborators]);\n\n  const handleReleaseControl = useCallback(async () => {\n    if (!sessionId) return;\n    try {\n      await releaseControl({ variables: { sessionId } });\n      refetchCollaborators();\n    } catch (err) {\n      console.error('Failed to release control:', err);\n    }\n  }, [sessionId, releaseControl, refetchCollaborators]);\n\n  const handleLeaveSession = useCallback(async () => {\n    if (!sessionId) return;\n    try {\n      await leaveSession({ variables: { sessionId } });\n      hasJoinedRef.current = false; // Prevent cleanup from firing a second leave\n      setHasLeft(true);\n      setJoined(false);\n      setSessionId(null);\n      window.history.back();\n    } catch (err) {\n      console.error('Failed to leave session:', err);\n    }\n  }, [sessionId, leaveSession]);\n\n  // Determine current user's collaborator entry\n  const currentCollaborator = collaborators.find(\n    (c: SessionCollaboratorFieldsFragment) => c.userId === currentUserId\n  );\n  const permission = validation?.permission || SessionSharePermission.View;\n\n  // Stabilize terminal URL to prevent iframe reloads on parent re-render\n  const terminalUrl = useMemo(() => validation?.ttydUrl || null, [validation?.ttydUrl]);\n\n  // Loading state\n  if (validating) {\n    return (\n      <div className=\"min-h-screen bg-bg-canvas flex items-center justify-center\">\n        <div className=\"text-center\">\n          <Loader2 className=\"size-8 text-action-primary-bg animate-spin mx-auto mb-4\" />\n          <p className=\"text-text-secondary\">\n            {tr('sharedSession.validating', 'Validating share link...')}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (validationError || !validation) {\n    return (\n      <div className=\"min-h-screen bg-bg-canvas flex items-center justify-center p-4\">\n        <div className=\"text-center max-w-md\">\n          <div className=\"size-16 bg-status-error-bg-subtle rounded-full flex items-center justify-center mx-auto mb-4\">\n            <AlertCircle className=\"size-8 text-status-error-text\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr('sharedSession.unableToLoad', 'Unable to Load Session')}\n          </h2>\n          <p className=\"text-text-secondary mb-6\">\n            {validationError?.message ||\n              tr('sharedSession.failedValidate', 'Failed to validate the share link')}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => window.history.back()}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors\"\n          >\n            <ArrowLeft className=\"size-4\" />\n            {tr('sharedSession.goBack', 'Go Back')}\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // Invalid link\n  if (!validation.isValid) {\n    return (\n      <div className=\"min-h-screen bg-bg-canvas flex items-center justify-center p-4\">\n        <div className=\"text-center max-w-md\">\n          <div className=\"size-16 bg-status-warning-bg-subtle rounded-full flex items-center justify-center mx-auto mb-4\">\n            <AlertCircle className=\"size-8 text-status-warning-text\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr('sharedSession.invalidExpiredLink', 'Invalid or Expired Link')}\n          </h2>\n          <p className=\"text-text-secondary mb-6\">\n            {validation.error ||\n              tr('sharedSession.linkNoLongerValid', 'This share link is no longer valid.')}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => window.history.back()}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors\"\n          >\n            <ArrowLeft className=\"size-4\" />\n            {tr('sharedSession.goBack', 'Go Back')}\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // Password required - show password form\n  if (validation.requiresPassword && !joined) {\n    return (\n      <div className=\"min-h-screen bg-bg-canvas flex items-center justify-center p-4\">\n        <div className=\"w-full max-w-md\">\n          <div className=\"bg-bg-surface border border-border-subtle rounded-card p-6 shadow-elevation-1\">\n            {/* Header */}\n            <div className=\"text-center mb-6\">\n              <div className=\"size-12 bg-[var(--color-accent-soft)] rounded-full flex items-center justify-center mx-auto mb-4\">\n                <Terminal className=\"size-6 text-action-primary-bg\" />\n              </div>\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {validation.sessionName || 'Shared Session'}\n              </h2>\n              {validation.ownerName && (\n                <p className=\"text-sm text-text-secondary mt-1\">\n                  {tr('sharedSession.sharedBy', 'Shared by')} {validation.ownerName}\n                </p>\n              )}\n            </div>\n\n            {/* Permission badge */}\n            <div className=\"flex justify-center mb-6\">\n              <div\n                className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm ${\n                  validation.permission === SessionSharePermission.View\n                    ? 'bg-bg-sunken text-text-secondary'\n                    : 'bg-[var(--color-accent-soft)] text-text-primary'\n                }`}\n              >\n                {validation.permission === SessionSharePermission.View ? (\n                  <>\n                    <Eye className=\"size-4\" />\n                    {tr('sharedSession.viewOnly', 'View Only')}\n                  </>\n                ) : (\n                  <>\n                    <Gamepad2 className=\"size-4\" />\n                    {tr('sharedSession.canControl', 'Can Control')}\n                  </>\n                )}\n              </div>\n            </div>\n\n            {/* Expiry info */}\n            {validation.expiresAt && (\n              <div className=\"flex items-center justify-center gap-2 mb-6 text-xs text-text-secondary\">\n                <Clock className=\"size-3.5\" />\n                <span>\n                  {tr('sharedSession.expires', 'Expires')}{' '}\n                  {new Date(validation.expiresAt).toLocaleString()}\n                </span>\n              </div>\n            )}\n\n            {/* Password form */}\n            <PasswordForm\n              onSubmit={(pwd) => {\n                setPassword(pwd);\n                handleJoinSession(pwd);\n              }}\n              isLoading={joining}\n              error={passwordError}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Post-leave state — user explicitly left, don't show join spinner\n  if (hasLeft) {\n    return (\n      <div className=\"min-h-screen bg-bg-canvas flex items-center justify-center p-4\">\n        <div className=\"text-center max-w-md\">\n          <div className=\"size-16 bg-bg-sunken rounded-full flex items-center justify-center mx-auto mb-4\">\n            <LogIn className=\"size-8 text-text-secondary\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr('sharedSession.youLeft', 'You left the session')}\n          </h2>\n          <p className=\"text-text-secondary mb-6\">\n            {tr('sharedSession.rejoinHint', 'You can rejoin using the same share link.')}\n          </p>\n          <div className=\"flex items-center justify-center gap-3\">\n            <button\n              type=\"button\"\n              onClick={() => window.history.back()}\n              className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors\"\n            >\n              <ArrowLeft className=\"size-4\" />\n              {tr('sharedSession.goBack', 'Go Back')}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => {\n                setHasLeft(false);\n                setJoinError(null);\n                handleJoinSession();\n              }}\n              disabled={joining}\n              className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n            >\n              <LogIn className=\"size-4\" />\n              {tr('sharedSession.rejoin', 'Rejoin')}\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Joining state - show error if join failed, otherwise spinner\n  if (!joined && !validation.requiresPassword) {\n    if (joinError) {\n      return (\n        <div className=\"min-h-screen bg-bg-canvas flex items-center justify-center p-4\">\n          <div className=\"text-center max-w-md\">\n            <div className=\"size-16 bg-status-error-bg-subtle rounded-full flex items-center justify-center mx-auto mb-4\">\n              <AlertCircle className=\"size-8 text-status-error-text\" />\n            </div>\n            <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n              {tr('sharedSession.failedJoin', 'Failed to Join Session')}\n            </h2>\n            <p className=\"text-text-secondary mb-6\">{joinError}</p>\n            <div className=\"flex items-center justify-center gap-3\">\n              <button\n                type=\"button\"\n                onClick={() => window.history.back()}\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors\"\n              >\n                <ArrowLeft className=\"size-4\" />\n                {tr('sharedSession.goBack', 'Go Back')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setJoinError(null);\n                  handleJoinSession();\n                }}\n                disabled={joining}\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n              >\n                <LogIn className=\"size-4\" />\n                {tr('sharedSession.retry', 'Retry')}\n              </button>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"min-h-screen bg-bg-canvas flex items-center justify-center\">\n        <div className=\"text-center\">\n          <Loader2 className=\"size-8 text-action-primary-bg animate-spin mx-auto mb-4\" />\n          <p className=\"text-text-secondary\">{tr('sharedSession.joining', 'Joining session...')}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // Main shared session view\n  return (\n    <MotionPage className=\"min-h-screen bg-bg-canvas flex flex-col\">\n      {/* Header */}\n      <header className=\"bg-bg-surface border-b border-border-default px-4 py-3\">\n        <div className=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 max-w-screen-2xl mx-auto\">\n          <div className=\"flex items-center gap-4\">\n            <button\n              type=\"button\"\n              onClick={handleLeaveSession}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors\"\n              title=\"Leave session\"\n              aria-label=\"Leave session\"\n            >\n              <ArrowLeft className=\"size-5\" />\n            </button>\n            <div className=\"flex items-center gap-3\">\n              <div className=\"p-2 bg-[var(--color-accent-soft)] rounded-lg\">\n                <Terminal className=\"size-5 text-action-primary-bg\" />\n              </div>\n              <div>\n                <h1 className=\"font-semibold text-text-primary\">\n                  {validation.sessionName || 'Shared Session'}\n                </h1>\n                {validation.ownerName && (\n                  <p className=\"text-xs text-text-secondary\">\n                    {tr('sharedSession.sharedBy', 'Shared by')} {validation.ownerName}\n                  </p>\n                )}\n              </div>\n            </div>\n          </div>\n\n          {/* Permission and collaborator count */}\n          <div className=\"flex items-center gap-3\">\n            <div\n              className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${\n                permission === SessionSharePermission.View\n                  ? 'bg-bg-sunken text-text-secondary'\n                  : 'bg-[var(--color-accent-soft)] text-text-primary'\n              }`}\n            >\n              {permission === SessionSharePermission.View ? (\n                <>\n                  <Eye className=\"size-3.5\" />\n                  {tr('sharedSession.viewOnly', 'View Only')}\n                </>\n              ) : (\n                <>\n                  <Gamepad2 className=\"size-3.5\" />\n                  {tr('sharedSession.interactive', 'Interactive')}\n                </>\n              )}\n            </div>\n            <div className=\"flex items-center gap-1.5 px-2.5 py-1 bg-bg-sunken rounded-full text-xs text-text-secondary\">\n              <Users className=\"size-3.5\" />\n              <span>{collaborators.length}</span>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Main content */}\n      <div className=\"flex-1 flex\">\n        {/* Terminal area */}\n        <div className=\"flex-1 flex flex-col\">\n          <SharedTerminalPanel\n            isShared={true}\n            collaborators={collaborators}\n            currentUserId={currentUserId}\n            permission={permission}\n            onRequestControl={handleRequestControl}\n            onReleaseControl={handleReleaseControl}\n            isRequestingControl={requestingControl}\n            isReleasingControl={releasingControl}\n            className=\"flex-1\"\n          >\n            {/* Terminal iframe - in production this would be the ttyd URL */}\n            <div className=\"w-full h-full bg-bg-inverse text-text-inverse flex items-center justify-center\">\n              {terminalUrl ? (\n                <iframe\n                  src={terminalUrl}\n                  title=\"Shared Terminal\"\n                  className=\"w-full h-full border-0\"\n                  allow=\"clipboard-read; clipboard-write\"\n                  sandbox=\"allow-scripts allow-same-origin allow-forms\"\n                />\n              ) : (\n                <div className=\"text-center\">\n                  <Terminal className=\"size-12 text-text-secondary mx-auto mb-4\" />\n                  <p className=\"text-text-tertiary\">\n                    {tr('sharedSession.terminalLoading', 'Terminal loading...')}\n                  </p>\n                  <p className=\"text-text-secondary text-sm mt-1\">Session ID: {sessionId}</p>\n                </div>\n              )}\n            </div>\n          </SharedTerminalPanel>\n        </div>\n\n        {/* Sidebar - Collaborators */}\n        <aside className=\"w-72 bg-bg-surface border-l border-border-default p-4 hidden lg:block\">\n          <CollaboratorsList\n            collaborators={collaborators}\n            currentUserId={currentUserId}\n            onRequestControl={\n              permission === SessionSharePermission.Interact ? handleRequestControl : undefined\n            }\n            isRequestingControl={requestingControl}\n          />\n\n          {/* Session info */}\n          <div className=\"mt-6 pt-6 border-t border-border-default\">\n            <h4 className=\"text-xs font-medium text-text-secondary uppercase tracking-wide mb-3\">\n              {tr('sharedSession.sessionInfo', 'Session Info')}\n            </h4>\n            <div className=\"space-y-2 text-sm\">\n              {validation.expiresAt && (\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-text-secondary\">\n                    {tr('sharedSession.expires', 'Expires')}\n                  </span>\n                  <span className=\"text-text-primary\">\n                    {new Date(validation.expiresAt).toLocaleTimeString()}\n                  </span>\n                </div>\n              )}\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-text-secondary\">\n                  {tr('sharedSession.yourRole', 'Your role')}\n                </span>\n                <span className=\"text-text-primary capitalize\">\n                  {currentCollaborator?.role?.toLowerCase() || tr('sharedSession.viewer', 'Viewer')}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-text-secondary\">{tr('sharedSession.status', 'Status')}</span>\n                <span className=\"text-status-success-text\">\n                  {tr('sharedSession.connected', 'Connected')}\n                </span>\n              </div>\n            </div>\n          </div>\n        </aside>\n      </div>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/SharedVibeDeckPage.js

@@ -32,7 +32,7 @@ function v({ onSubmit: e, isLoading: t, error: n }) {
 				})]
 			})] }),
 			n && /* @__PURE__ */ g("div", {
-				className: "flex items-center gap-2 p-3 bg-status-error-bg/10 border border-status-error-bg/30 rounded-lg",
+				className: "flex items-center gap-2 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card",
 				children: [/* @__PURE__ */ h(s, { className: "size-4 text-status-error-text" }), /* @__PURE__ */ h("span", {
 					className: "text-sm text-status-error-text",
 					children: n
@@ -51,7 +51,7 @@ function y({ message: e }) {
 	return /* @__PURE__ */ g("div", {
 		className: "flex flex-col items-center justify-center min-h-[60vh] gap-4",
 		children: [/* @__PURE__ */ h("div", {
-			className: "size-16 rounded-full bg-status-error-bg/10 flex items-center justify-center",
+			className: "size-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
 			children: /* @__PURE__ */ h(s, {
 				size: 32,
 				className: "text-status-error-text"
@@ -131,7 +131,7 @@ function b() {
 			className: "flex flex-col items-center justify-center min-h-[60vh] gap-6",
 			children: [
 				/* @__PURE__ */ h("div", {
-					className: "size-16 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+					className: "size-16 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center",
 					children: /* @__PURE__ */ h(u, {
 						size: 28,
 						className: "text-action-primary-bg"
@@ -206,7 +206,7 @@ function b() {
 				children: [/* @__PURE__ */ h("div", { children: /* @__PURE__ */ g("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ h("div", {
-						className: "size-10 rounded-xl bg-action-primary-bg/10 flex items-center justify-center",
+						className: "size-10 rounded-xl bg-[var(--color-accent-soft)] flex items-center justify-center",
 						children: /* @__PURE__ */ h(f, {
 							size: 20,
 							className: "text-action-primary-bg"
@@ -221,7 +221,7 @@ function b() {
 				}) }), /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
 					children: /* @__PURE__ */ g("span", {
-						className: `inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${B ? "bg-status-success-bg/10 text-status-success-text border border-status-success-border/30" : "bg-bg-secondary text-text-secondary border border-border-default"}`,
+						className: `inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${B ? "bg-status-success-bg-subtle text-status-success-text border border-status-success-border" : "bg-bg-sunken text-text-secondary border border-border-default"}`,
 						children: [h(B ? d : c, { size: 12 }), B ? b("sharedVibeDeck.canExecute", "Can execute") : b("sharedVibeDeck.viewOnly", "View only")]
 					})
 				})]

package/dist/pages/SharedVibeDeckPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharedVibeDeckPage.js","names":[],"sources":["../../src/pages/SharedVibeDeckPage.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Loader2, AlertCircle, Lock, Play, Zap, Eye } from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { VibeDeckGrid } from '@/components/vibedeck/VibeDeckGrid';\nimport {\n  useValidateVibeDeckShareLinkQuery,\n  useGetSharedVibeDeckQuery,\n  useExecuteSharedVibeDeckButtonMutation,\n} from '@/generated/wspace-operations';\n\n/**\n * Password entry form for protected share links\n */\nfunction PasswordForm({\n  onSubmit,\n  isLoading,\n  error,\n}: {\n  onSubmit: (password: string) => void;\n  isLoading: boolean;\n  error?: string | null;\n}) {\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (password.trim()) onSubmit(password);\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-4 w-full max-w-sm\">\n      <div>\n        <label\n          htmlFor=\"sharedvibedeckpage-57\"\n          className=\"block text-sm font-medium text-text-primary mb-2\"\n        >\n          This VibeDeck is password protected\n        </label>\n        <div className=\"relative\">\n          <Lock className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary\" />\n          <input\n            id=\"sharedvibedeckpage-57\"\n            aria-label=\"Enter password\"\n            type=\"password\"\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Enter password\"\n            className=\"w-full pl-10 pr-4 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          />\n        </div>\n      </div>\n      {error && (\n        <div className=\"flex items-center gap-2 p-3 bg-status-error-bg/10 border border-status-error-bg/30 rounded-lg\">\n          <AlertCircle className=\"size-4 text-status-error-text\" />\n          <span className=\"text-sm text-status-error-text\">{error}</span>\n        </div>\n      )}\n      <button\n        type=\"submit\"\n        disabled={isLoading || !password.trim()}\n        className=\"w-full px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n      >\n        {isLoading ? 'Verifying...' : 'Access VibeDeck'}\n      </button>\n    </form>\n  );\n}\n\n/**\n * Error display component\n */\nfunction ShareError({ message }: { message: string }) {\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-[60vh] gap-4\">\n      <div className=\"size-16 rounded-full bg-status-error-bg/10 flex items-center justify-center\">\n        <AlertCircle size={32} className=\"text-status-error-text\" />\n      </div>\n      <div className=\"text-center\">\n        <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n        <p className=\"text-sm text-text-secondary mt-1\">{message}</p>\n      </div>\n    </div>\n  );\n}\n\n/**\n * SharedVibeDeckPage — standalone page for viewing/executing a shared VibeDeck via token.\n * Supports:\n *   - /vibecontrols/deck/:token — full page with header\n *   - ?embed=true — minimal iframe mode (no header/chrome)\n */\nexport function SharedVibeDeckPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n  const { token } = useParams<{ token: string }>();\n  const [searchParams] = useSearchParams();\n  const isEmbed = searchParams.get('embed') === 'true';\n  const transparentBg = searchParams.get('bg') === 'transparent';\n\n  const [password, setPassword] = useState<string | null>(null);\n  const [passwordError, setPasswordError] = useState<string | null>(null);\n  const [executingButtonId, setExecutingButtonId] = useState<string | null>(null);\n\n  // Step 1: Validate the share link\n  const { data: validationData, loading: validating } = useValidateVibeDeckShareLinkQuery({\n    variables: { token: token || '' },\n    skip: !token,\n  });\n\n  const validation = validationData?.validateVibeDeckShareLink;\n  const needsPassword = validation?.isValid && validation.requiresPassword && !password;\n\n  // Step 2: Fetch the deck data (once validated and password provided if needed)\n  const shouldFetchDeck =\n    validation?.isValid && (!validation.requiresPassword || password !== null);\n\n  const {\n    data: deckData,\n    loading: deckLoading,\n    error: deckError,\n  } = useGetSharedVibeDeckQuery({\n    variables: { token: token || '', password },\n    skip: !shouldFetchDeck,\n  });\n\n  const sharedDeck = deckData?.sharedVibeDeck;\n  const canExecute = sharedDeck?.permission === 'EXECUTE';\n\n  // Execute mutation for shared buttons\n  const [executeSharedButton] = useExecuteSharedVibeDeckButtonMutation();\n\n  const handlePasswordSubmit = useCallback((pw: string) => {\n    setPasswordError(null);\n    setPassword(pw);\n  }, []);\n\n  const handleExecuteButton = useCallback(\n    async (buttonId: string) => {\n      if (!token || !canExecute) return;\n      setExecutingButtonId(buttonId);\n      try {\n        await executeSharedButton({\n          variables: { token, buttonId, password },\n        });\n      } catch {\n        // Silent — execution status is visible from the button\n      } finally {\n        setExecutingButtonId(null);\n      }\n    },\n    [token, password, canExecute, executeSharedButton]\n  );\n\n  // Handle password errors from the deck query\n  const passwordRequired =\n    deckError?.message?.includes('Password is required') ||\n    deckError?.message?.includes('Incorrect password');\n\n  if (passwordRequired && password) {\n    // Reset and show password form with error\n    if (!passwordError) {\n      setPasswordError('Incorrect password. Please try again.');\n      setPassword(null);\n    }\n  }\n\n  // Loading state\n  if (validating) {\n    return (\n      <div\n        className={`flex items-center justify-center min-h-[60vh] ${transparentBg ? 'bg-transparent' : ''}`}\n      >\n        <Loader2 size={24} className=\"animate-spin text-text-tertiary\" />\n      </div>\n    );\n  }\n\n  // Invalid token\n  if (!validation?.isValid) {\n    if (isEmbed) {\n      return (\n        <div\n          className={`flex items-center justify-center p-8 ${transparentBg ? 'bg-transparent' : ''}`}\n        >\n          <p className=\"text-sm text-text-secondary\">\n            {validation?.error || tr('sharedVibeDeck.invalidLink', 'Invalid share link')}\n          </p>\n        </div>\n      );\n    }\n    return (\n      <MotionPage className=\"p-4 sm:p-6\">\n        <ShareError\n          message={\n            validation?.error ||\n            tr('sharedVibeDeck.linkInvalidOrExpired', 'This share link is invalid or has expired.')\n          }\n        />\n      </MotionPage>\n    );\n  }\n\n  // Password required\n  if (needsPassword || (passwordRequired && !password)) {\n    if (isEmbed) {\n      return (\n        <div\n          className={`flex items-center justify-center p-8 ${transparentBg ? 'bg-transparent' : ''}`}\n        >\n          <p className=\"text-sm text-text-secondary\">\n            {tr('sharedVibeDeck.requiresPassword', 'This VibeDeck requires a password')}\n          </p>\n        </div>\n      );\n    }\n    return (\n      <MotionPage className=\"p-4 sm:p-6\">\n        <div className=\"flex flex-col items-center justify-center min-h-[60vh] gap-6\">\n          <div className=\"size-16 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n            <Lock size={28} className=\"text-action-primary-bg\" />\n          </div>\n          <div className=\"text-center\">\n            <h2 className=\"text-lg font-semibold text-text-primary\">\n              {validation.vibeDeckName || 'Shared VibeDeck'}\n            </h2>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {tr('sharedVibeDeck.enterPasswordHint', 'Enter the password to continue')}\n            </p>\n          </div>\n          <PasswordForm\n            onSubmit={handlePasswordSubmit}\n            isLoading={deckLoading}\n            error={passwordError}\n          />\n        </div>\n      </MotionPage>\n    );\n  }\n\n  // Loading deck\n  if (deckLoading || !sharedDeck) {\n    return (\n      <div\n        className={`flex items-center justify-center min-h-[60vh] ${transparentBg ? 'bg-transparent' : ''}`}\n      >\n        <Loader2 size={24} className=\"animate-spin text-text-tertiary\" />\n      </div>\n    );\n  }\n\n  // Map shared buttons to the format expected by VibeDeckGrid\n  const gridButtons = sharedDeck.buttons.map((b: Record<string, unknown>) => ({\n    id: b.id,\n    label: b.label,\n    icon: b.icon || null,\n    color: b.color || null,\n    command: null,\n    actionType: b.actionType || 'COMMAND',\n    category: b.category || null,\n    confirmationRequired: b.confirmationRequired,\n    keyboardShortcut: null,\n    targetAgentId: null,\n    scriptInterpreter: null,\n    webhookUrl: null,\n    webhookMethod: null,\n    row: b.row,\n    column: b.column,\n    rowSpan: b.rowSpan,\n    colSpan: b.colSpan,\n  }));\n\n  // Embed mode: just the grid, no chrome\n  if (isEmbed) {\n    return (\n      <div className={`p-3 ${transparentBg ? 'bg-transparent' : ''}`}>\n        <VibeDeckGrid\n          gridColumns={sharedDeck.gridColumns}\n          gridRows={sharedDeck.gridRows}\n          buttons={gridButtons}\n          onExecuteButton={handleExecuteButton}\n          onEditButton={() => {}}\n          onDeleteButton={() => {}}\n          onDropButton={() => {}}\n          onAddButton={() => {}}\n          executingButtonId={executingButtonId}\n          canCreate={false}\n          canUpdate={false}\n          canDelete={false}\n          canExecute={canExecute}\n        />\n      </div>\n    );\n  }\n\n  // Full page mode\n  return (\n    <MotionPage className=\"p-4 sm:p-6 space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-xl bg-action-primary-bg/10 flex items-center justify-center\">\n              <Zap size={20} className=\"text-action-primary-bg\" />\n            </div>\n            <div>\n              <h1 className=\"text-xl font-semibold text-text-primary\">{sharedDeck.name}</h1>\n              {sharedDeck.description && (\n                <p className=\"text-sm text-text-secondary mt-0.5\">{sharedDeck.description}</p>\n              )}\n            </div>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <span\n            className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${\n              canExecute\n                ? 'bg-status-success-bg/10 text-status-success-text border border-status-success-border/30'\n                : 'bg-bg-secondary text-text-secondary border border-border-default'\n            }`}\n          >\n            {canExecute ? <Play size={12} /> : <Eye size={12} />}\n            {canExecute\n              ? tr('sharedVibeDeck.canExecute', 'Can execute')\n              : tr('sharedVibeDeck.viewOnly', 'View only')}\n          </span>\n        </div>\n      </div>\n\n      {/* Grid */}\n      <VibeDeckGrid\n        gridColumns={sharedDeck.gridColumns}\n        gridRows={sharedDeck.gridRows}\n        buttons={gridButtons}\n        onExecuteButton={handleExecuteButton}\n        onEditButton={() => {}}\n        onDeleteButton={() => {}}\n        onDropButton={() => {}}\n        onAddButton={() => {}}\n        executingButtonId={executingButtonId}\n        canCreate={false}\n        canUpdate={false}\n        canDelete={false}\n        canExecute={canExecute}\n      />\n\n      {/* Footer branding */}\n      <div className=\"text-center pt-4\">\n        <p className=\"text-xs text-text-tertiary\">\n          {tr('sharedVibeDeck.poweredBy', 'Powered by')}{' '}\n          <span className=\"font-medium text-text-secondary\">VibeControls</span>\n        </p>\n      </div>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SharedVibeDeckPage.js","names":[],"sources":["../../src/pages/SharedVibeDeckPage.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Loader2, AlertCircle, Lock, Play, Zap, Eye } from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { VibeDeckGrid } from '@/components/vibedeck/VibeDeckGrid';\nimport {\n  useValidateVibeDeckShareLinkQuery,\n  useGetSharedVibeDeckQuery,\n  useExecuteSharedVibeDeckButtonMutation,\n} from '@/generated/wspace-operations';\n\n/**\n * Password entry form for protected share links\n */\nfunction PasswordForm({\n  onSubmit,\n  isLoading,\n  error,\n}: {\n  onSubmit: (password: string) => void;\n  isLoading: boolean;\n  error?: string | null;\n}) {\n  const [password, setPassword] = useState('');\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (password.trim()) onSubmit(password);\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-4 w-full max-w-sm\">\n      <div>\n        <label\n          htmlFor=\"sharedvibedeckpage-57\"\n          className=\"block text-sm font-medium text-text-primary mb-2\"\n        >\n          This VibeDeck is password protected\n        </label>\n        <div className=\"relative\">\n          <Lock className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary\" />\n          <input\n            id=\"sharedvibedeckpage-57\"\n            aria-label=\"Enter password\"\n            type=\"password\"\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Enter password\"\n            className=\"w-full pl-10 pr-4 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          />\n        </div>\n      </div>\n      {error && (\n        <div className=\"flex items-center gap-2 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card\">\n          <AlertCircle className=\"size-4 text-status-error-text\" />\n          <span className=\"text-sm text-status-error-text\">{error}</span>\n        </div>\n      )}\n      <button\n        type=\"submit\"\n        disabled={isLoading || !password.trim()}\n        className=\"w-full px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n      >\n        {isLoading ? 'Verifying...' : 'Access VibeDeck'}\n      </button>\n    </form>\n  );\n}\n\n/**\n * Error display component\n */\nfunction ShareError({ message }: { message: string }) {\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-[60vh] gap-4\">\n      <div className=\"size-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n        <AlertCircle size={32} className=\"text-status-error-text\" />\n      </div>\n      <div className=\"text-center\">\n        <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n        <p className=\"text-sm text-text-secondary mt-1\">{message}</p>\n      </div>\n    </div>\n  );\n}\n\n/**\n * SharedVibeDeckPage — standalone page for viewing/executing a shared VibeDeck via token.\n * Supports:\n *   - /vibecontrols/deck/:token — full page with header\n *   - ?embed=true — minimal iframe mode (no header/chrome)\n */\nexport function SharedVibeDeckPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n  const { token } = useParams<{ token: string }>();\n  const [searchParams] = useSearchParams();\n  const isEmbed = searchParams.get('embed') === 'true';\n  const transparentBg = searchParams.get('bg') === 'transparent';\n\n  const [password, setPassword] = useState<string | null>(null);\n  const [passwordError, setPasswordError] = useState<string | null>(null);\n  const [executingButtonId, setExecutingButtonId] = useState<string | null>(null);\n\n  // Step 1: Validate the share link\n  const { data: validationData, loading: validating } = useValidateVibeDeckShareLinkQuery({\n    variables: { token: token || '' },\n    skip: !token,\n  });\n\n  const validation = validationData?.validateVibeDeckShareLink;\n  const needsPassword = validation?.isValid && validation.requiresPassword && !password;\n\n  // Step 2: Fetch the deck data (once validated and password provided if needed)\n  const shouldFetchDeck =\n    validation?.isValid && (!validation.requiresPassword || password !== null);\n\n  const {\n    data: deckData,\n    loading: deckLoading,\n    error: deckError,\n  } = useGetSharedVibeDeckQuery({\n    variables: { token: token || '', password },\n    skip: !shouldFetchDeck,\n  });\n\n  const sharedDeck = deckData?.sharedVibeDeck;\n  const canExecute = sharedDeck?.permission === 'EXECUTE';\n\n  // Execute mutation for shared buttons\n  const [executeSharedButton] = useExecuteSharedVibeDeckButtonMutation();\n\n  const handlePasswordSubmit = useCallback((pw: string) => {\n    setPasswordError(null);\n    setPassword(pw);\n  }, []);\n\n  const handleExecuteButton = useCallback(\n    async (buttonId: string) => {\n      if (!token || !canExecute) return;\n      setExecutingButtonId(buttonId);\n      try {\n        await executeSharedButton({\n          variables: { token, buttonId, password },\n        });\n      } catch {\n        // Silent — execution status is visible from the button\n      } finally {\n        setExecutingButtonId(null);\n      }\n    },\n    [token, password, canExecute, executeSharedButton]\n  );\n\n  // Handle password errors from the deck query\n  const passwordRequired =\n    deckError?.message?.includes('Password is required') ||\n    deckError?.message?.includes('Incorrect password');\n\n  if (passwordRequired && password) {\n    // Reset and show password form with error\n    if (!passwordError) {\n      setPasswordError('Incorrect password. Please try again.');\n      setPassword(null);\n    }\n  }\n\n  // Loading state\n  if (validating) {\n    return (\n      <div\n        className={`flex items-center justify-center min-h-[60vh] ${transparentBg ? 'bg-transparent' : ''}`}\n      >\n        <Loader2 size={24} className=\"animate-spin text-text-tertiary\" />\n      </div>\n    );\n  }\n\n  // Invalid token\n  if (!validation?.isValid) {\n    if (isEmbed) {\n      return (\n        <div\n          className={`flex items-center justify-center p-8 ${transparentBg ? 'bg-transparent' : ''}`}\n        >\n          <p className=\"text-sm text-text-secondary\">\n            {validation?.error || tr('sharedVibeDeck.invalidLink', 'Invalid share link')}\n          </p>\n        </div>\n      );\n    }\n    return (\n      <MotionPage className=\"p-4 sm:p-6\">\n        <ShareError\n          message={\n            validation?.error ||\n            tr('sharedVibeDeck.linkInvalidOrExpired', 'This share link is invalid or has expired.')\n          }\n        />\n      </MotionPage>\n    );\n  }\n\n  // Password required\n  if (needsPassword || (passwordRequired && !password)) {\n    if (isEmbed) {\n      return (\n        <div\n          className={`flex items-center justify-center p-8 ${transparentBg ? 'bg-transparent' : ''}`}\n        >\n          <p className=\"text-sm text-text-secondary\">\n            {tr('sharedVibeDeck.requiresPassword', 'This VibeDeck requires a password')}\n          </p>\n        </div>\n      );\n    }\n    return (\n      <MotionPage className=\"p-4 sm:p-6\">\n        <div className=\"flex flex-col items-center justify-center min-h-[60vh] gap-6\">\n          <div className=\"size-16 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center\">\n            <Lock size={28} className=\"text-action-primary-bg\" />\n          </div>\n          <div className=\"text-center\">\n            <h2 className=\"text-lg font-semibold text-text-primary\">\n              {validation.vibeDeckName || 'Shared VibeDeck'}\n            </h2>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {tr('sharedVibeDeck.enterPasswordHint', 'Enter the password to continue')}\n            </p>\n          </div>\n          <PasswordForm\n            onSubmit={handlePasswordSubmit}\n            isLoading={deckLoading}\n            error={passwordError}\n          />\n        </div>\n      </MotionPage>\n    );\n  }\n\n  // Loading deck\n  if (deckLoading || !sharedDeck) {\n    return (\n      <div\n        className={`flex items-center justify-center min-h-[60vh] ${transparentBg ? 'bg-transparent' : ''}`}\n      >\n        <Loader2 size={24} className=\"animate-spin text-text-tertiary\" />\n      </div>\n    );\n  }\n\n  // Map shared buttons to the format expected by VibeDeckGrid\n  const gridButtons = sharedDeck.buttons.map((b: Record<string, unknown>) => ({\n    id: b.id,\n    label: b.label,\n    icon: b.icon || null,\n    color: b.color || null,\n    command: null,\n    actionType: b.actionType || 'COMMAND',\n    category: b.category || null,\n    confirmationRequired: b.confirmationRequired,\n    keyboardShortcut: null,\n    targetAgentId: null,\n    scriptInterpreter: null,\n    webhookUrl: null,\n    webhookMethod: null,\n    row: b.row,\n    column: b.column,\n    rowSpan: b.rowSpan,\n    colSpan: b.colSpan,\n  }));\n\n  // Embed mode: just the grid, no chrome\n  if (isEmbed) {\n    return (\n      <div className={`p-3 ${transparentBg ? 'bg-transparent' : ''}`}>\n        <VibeDeckGrid\n          gridColumns={sharedDeck.gridColumns}\n          gridRows={sharedDeck.gridRows}\n          buttons={gridButtons}\n          onExecuteButton={handleExecuteButton}\n          onEditButton={() => {}}\n          onDeleteButton={() => {}}\n          onDropButton={() => {}}\n          onAddButton={() => {}}\n          executingButtonId={executingButtonId}\n          canCreate={false}\n          canUpdate={false}\n          canDelete={false}\n          canExecute={canExecute}\n        />\n      </div>\n    );\n  }\n\n  // Full page mode\n  return (\n    <MotionPage className=\"p-4 sm:p-6 space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-xl bg-[var(--color-accent-soft)] flex items-center justify-center\">\n              <Zap size={20} className=\"text-action-primary-bg\" />\n            </div>\n            <div>\n              <h1 className=\"text-xl font-semibold text-text-primary\">{sharedDeck.name}</h1>\n              {sharedDeck.description && (\n                <p className=\"text-sm text-text-secondary mt-0.5\">{sharedDeck.description}</p>\n              )}\n            </div>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <span\n            className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${\n              canExecute\n                ? 'bg-status-success-bg-subtle text-status-success-text border border-status-success-border'\n                : 'bg-bg-sunken text-text-secondary border border-border-default'\n            }`}\n          >\n            {canExecute ? <Play size={12} /> : <Eye size={12} />}\n            {canExecute\n              ? tr('sharedVibeDeck.canExecute', 'Can execute')\n              : tr('sharedVibeDeck.viewOnly', 'View only')}\n          </span>\n        </div>\n      </div>\n\n      {/* Grid */}\n      <VibeDeckGrid\n        gridColumns={sharedDeck.gridColumns}\n        gridRows={sharedDeck.gridRows}\n        buttons={gridButtons}\n        onExecuteButton={handleExecuteButton}\n        onEditButton={() => {}}\n        onDeleteButton={() => {}}\n        onDropButton={() => {}}\n        onAddButton={() => {}}\n        executingButtonId={executingButtonId}\n        canCreate={false}\n        canUpdate={false}\n        canDelete={false}\n        canExecute={canExecute}\n      />\n\n      {/* Footer branding */}\n      <div className=\"text-center pt-4\">\n        <p className=\"text-xs text-text-tertiary\">\n          {tr('sharedVibeDeck.poweredBy', 'Powered by')}{' '}\n          <span className=\"font-medium text-text-secondary\">VibeControls</span>\n        </p>\n      </div>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/TargetDetailsPage.js

@@ -52,48 +52,48 @@ function A() {
 		description: M("targetDetails.notFoundBody", "The target you requested may have been deleted or is in a different workspace.")
 	});
 	let U = B.updatedAt ? new Date(B.updatedAt).toLocaleString() : "—";
-	return /* @__PURE__ */ E(k, { children: [
-		/* @__PURE__ */ T(r, {
-			title: B.name,
-			description: `${B.type} · ${B.host ?? "no host"}`,
-			breadcrumb: [
-				{
-					label: M("breadcrumbs.targetsAgents", "Targets & Agents"),
-					path: "../agents"
-				},
-				{
-					label: M("breadcrumbs.targets", "Targets"),
-					path: "../agents?tab=targets"
-				},
-				{ label: B.name }
-			],
-			actions: /* @__PURE__ */ E("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ T(d, {
-					entity: "target",
-					resource: {
-						id: B.id,
-						name: B.name
+	return /* @__PURE__ */ E(k, {
+		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full",
+		children: [
+			/* @__PURE__ */ T(r, {
+				title: B.name,
+				description: `${B.type} · ${B.host ?? "no host"}`,
+				breadcrumb: [
+					{
+						label: M("breadcrumbs.targetsAgents", "Targets & Agents"),
+						path: "../agents"
 					},
-					label: M("targetDetails.share", "Share"),
-					variant: "button"
-				}), /* @__PURE__ */ E(D, {
-					type: "button",
-					variant: "outline",
-					size: "sm",
-					onClick: () => j("/agents?tab=targets"),
-					className: "max-md:min-h-11",
-					children: [/* @__PURE__ */ T(h, {
-						className: "size-3.5",
-						"aria-hidden": "true"
-					}), M("common.back", "Back")]
-				})]
-			})
-		}),
-		/* @__PURE__ */ E(c, {
-			className: "mt-4",
-			children: [/* @__PURE__ */ E("div", {
-				className: "p-4 border-b border-border-default flex items-center gap-2",
+					{
+						label: M("breadcrumbs.targets", "Targets"),
+						path: "../agents?tab=targets"
+					},
+					{ label: B.name }
+				],
+				actions: /* @__PURE__ */ E("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ T(d, {
+						entity: "target",
+						resource: {
+							id: B.id,
+							name: B.name
+						},
+						label: M("targetDetails.share", "Share"),
+						variant: "button"
+					}), /* @__PURE__ */ E(D, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: () => j("/agents?tab=targets"),
+						className: "max-md:min-h-11",
+						children: [/* @__PURE__ */ T(h, {
+							className: "size-3.5",
+							"aria-hidden": "true"
+						}), M("common.back", "Back")]
+					})]
+				})
+			}),
+			/* @__PURE__ */ E(c, { children: [/* @__PURE__ */ E("div", {
+				className: "p-4 border-b border-border-subtle flex items-center gap-2",
 				children: [/* @__PURE__ */ T(b, {
 					className: "size-5",
 					"aria-hidden": "true"
@@ -158,18 +158,15 @@ function A() {
 						}), /* @__PURE__ */ T("div", {
 							className: "flex flex-wrap gap-1",
 							children: B.tags.map((e) => /* @__PURE__ */ T("span", {
-								className: "px-2 py-0.5 text-xs rounded bg-bg-sunken border border-border-default",
+								className: "px-2 py-0.5 text-xs rounded-full bg-bg-sunken border border-border-subtle",
 								children: e
 							}, e))
 						})]
 					})
 				]
-			})]
-		}),
-		/* @__PURE__ */ E(c, {
-			className: "mt-4",
-			children: [/* @__PURE__ */ E("div", {
-				className: "p-4 border-b border-border-default flex items-center gap-2",
+			})] }),
+			/* @__PURE__ */ E(c, { children: [/* @__PURE__ */ E("div", {
+				className: "p-4 border-b border-border-subtle flex items-center gap-2",
 				children: [/* @__PURE__ */ T(x, {
 					className: "size-5",
 					"aria-hidden": "true"
@@ -183,12 +180,9 @@ function A() {
 					entityType: "VIBECONTROLS_TARGET",
 					entityId: B.id
 				})
-			})]
-		}),
-		/* @__PURE__ */ E(c, {
-			className: "mt-4",
-			children: [/* @__PURE__ */ E("div", {
-				className: "p-4 border-b border-border-default flex flex-wrap items-center justify-between gap-2",
+			})] }),
+			/* @__PURE__ */ E(c, { children: [/* @__PURE__ */ E("div", {
+				className: "p-4 border-b border-border-subtle flex flex-wrap items-center justify-between gap-2",
 				children: [/* @__PURE__ */ E("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ T(v, {
@@ -227,7 +221,7 @@ function A() {
 					let t = l(e);
 					return /* @__PURE__ */ E(S, {
 						to: `../agents/${e.id}`,
-						className: "flex items-center justify-between gap-3 p-3 rounded-card border border-border-default hover:bg-bg-sunken/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+						className: "flex items-center justify-between gap-3 p-3 rounded-card border border-border-subtle hover:bg-bg-sunken/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 						children: [/* @__PURE__ */ E("div", {
 							className: "flex items-center gap-3 min-w-0",
 							children: [/* @__PURE__ */ T("div", {
@@ -257,12 +251,9 @@ function A() {
 						})]
 					}, e.id);
 				})
-			})]
-		}),
-		/* @__PURE__ */ E(c, {
-			className: "mt-4",
-			children: [/* @__PURE__ */ E("div", {
-				className: "p-4 border-b border-border-default flex items-center gap-2",
+			})] }),
+			/* @__PURE__ */ E(c, { children: [/* @__PURE__ */ E("div", {
+				className: "p-4 border-b border-border-subtle flex items-center gap-2",
 				children: [/* @__PURE__ */ T(m, {
 					className: "size-5",
 					"aria-hidden": "true"
@@ -288,7 +279,7 @@ function A() {
 			}) : /* @__PURE__ */ T("div", {
 				className: "p-4 space-y-2",
 				children: H.map((e) => /* @__PURE__ */ E("div", {
-					className: "flex flex-wrap items-center justify-between gap-3 p-3 rounded-card border border-border-default",
+					className: "flex flex-wrap items-center justify-between gap-3 p-3 rounded-card border border-border-subtle",
 					children: [/* @__PURE__ */ E("div", {
 						className: "min-w-0",
 						children: [/* @__PURE__ */ T("p", {
@@ -313,9 +304,9 @@ function A() {
 						})]
 					}), /* @__PURE__ */ T(s, { status: e.status })]
 				}, e.id))
-			})]
-		})
-	] });
+			})] })
+		]
+	});
 }
 //#endregion
 export { A as TargetDetailsPage };

package/dist/pages/TargetDetailsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TargetDetailsPage.js","names":[],"sources":["../../src/pages/TargetDetailsPage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useParams, Link } from 'react-router-dom';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n  ArrowLeft,\n  Server,\n  CircleCheck,\n  CircleX,\n  Cpu,\n  ExternalLink,\n  Activity,\n  Tag,\n} from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { PageHeader, Card, StatusBadge, EmptyState, ErrorState } from '@/components/shared';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { EntityShareButton } from '@/components/sharing';\nimport { getAgentStatus } from '@/components/agents/agentStatus';\nimport { useGetTargetQuery } from '@/generated/wspace-operations';\nimport type { GetTargetQuery } from '@/generated/wspace-operations';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useTr } from '@/shared/hooks/useTr';\n\ntype TargetType = NonNullable<GetTargetQuery['target']>;\ntype AgentSummary = TargetType['agents'][number];\ntype ConnectionSummary = TargetType['inboundConnections'][number];\n\n/**\n * TargetDetailsPage — `/vibecontrols/targets/:id`\n *\n * Mirrors AgentDetailsPage shell. Three sections:\n *   1. Identity card (name, type, status, host, last updated)\n *   2. Agents on this target (table with link to AgentDetailsPage)\n *   3. Inbound agent connections\n *\n * Reuses the existing `GetTarget` query — no schema changes needed; the\n * `TargetFields` fragment already includes the agent list and metadata.\n */\nexport function TargetDetailsPage() {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useVibeNavigate();\n  const tr = useTr();\n  // Page-level read gate (the gateway enforces `target:read` on GetTarget).\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(VIBE_PERMISSIONS.TARGET_READ);\n\n  const { data, loading, error, refetch } = useGetTargetQuery({\n    variables: { id: id ?? '' },\n    skip: !id || permissionsLoading || !canRead,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const target = data?.target ?? null;\n  const agents = useMemo(() => target?.agents ?? [], [target]);\n  const connections = useMemo(() => target?.inboundConnections ?? [], [target]);\n\n  if (!id) {\n    return (\n      <ErrorState title={tr('targetDetails.missingId', 'Target id missing from URL')} message=\"\" />\n    );\n  }\n\n  if (permissionsLoading) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <AccessDenied\n        title={tr('targetDetails.denied.title', 'Access Denied')}\n        description={tr(\n          'targetDetails.denied.description',\n          'You do not have permission to view this target.'\n        )}\n      />\n    );\n  }\n\n  if (loading && !data) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (error && !target) {\n    return (\n      <ErrorState\n        title={tr('targetDetails.errorTitle', 'Failed to load target')}\n        message={error.message}\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n\n  if (!target) {\n    return (\n      <EmptyState\n        icon={<Server className=\"size-12 text-text-muted\" aria-hidden=\"true\" />}\n        title={tr('targetDetails.notFoundTitle', 'Target not found')}\n        description={tr(\n          'targetDetails.notFoundBody',\n          'The target you requested may have been deleted or is in a different workspace.'\n        )}\n      />\n    );\n  }\n\n  const lastUpdatedAt = target.updatedAt\n    ? new Date(target.updatedAt as string).toLocaleString()\n    : '—';\n\n  return (\n    <MotionPage>\n      <PageHeader\n        title={target.name}\n        description={`${target.type} · ${target.host ?? 'no host'}`}\n        breadcrumb={[\n          { label: tr('breadcrumbs.targetsAgents', 'Targets & Agents'), path: '../agents' },\n          { label: tr('breadcrumbs.targets', 'Targets'), path: '../agents?tab=targets' },\n          { label: target.name },\n        ]}\n        actions={\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <EntityShareButton\n              entity=\"target\"\n              resource={{ id: target.id, name: target.name }}\n              label={tr('targetDetails.share', 'Share')}\n              variant=\"button\"\n            />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => navigate('/agents?tab=targets')}\n              className=\"max-md:min-h-11\"\n            >\n              <ArrowLeft className=\"size-3.5\" aria-hidden=\"true\" />\n              {tr('common.back', 'Back')}\n            </Button>\n          </div>\n        }\n      />\n\n      {/* Identity */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Server className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.identity', 'Identity')}\n          </h3>\n        </div>\n        <div className=\"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.name', 'Name')}</p>\n            <p className=\"text-text-primary font-medium break-words\">{target.name}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.type', 'Type')}</p>\n            <p className=\"text-text-primary font-medium\">{target.type}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.status', 'Status')}</p>\n            <StatusBadge status={target.status} />\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.host', 'Host')}</p>\n            <p className=\"text-text-primary font-mono text-xs break-words\">{target.host ?? '—'}</p>\n          </div>\n          {target.username && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.username', 'Username')}</p>\n              <p className=\"text-text-primary font-mono text-xs break-words\">{target.username}</p>\n            </div>\n          )}\n          {target.port != null && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.port', 'Port')}</p>\n              <p className=\"text-text-primary font-mono text-xs\">{target.port}</p>\n            </div>\n          )}\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.updatedAt', 'Last updated')}</p>\n            <p className=\"text-text-primary text-xs\">{lastUpdatedAt}</p>\n          </div>\n          {target.tags && target.tags.length > 0 && (\n            <div className=\"sm:col-span-2\">\n              {/* Legacy free-text labels stored on the target row — titled\n                  \"Labels\" to disambiguate from the workspace-level tag\n                  entities managed in the Tags card below. */}\n              <p className=\"text-text-muted mb-1\">{tr('targetDetails.labels', 'Labels')}</p>\n              <div className=\"flex flex-wrap gap-1\">\n                {target.tags.map((tag: string) => (\n                  <span\n                    key={tag}\n                    className=\"px-2 py-0.5 text-xs rounded bg-bg-sunken border border-border-default\"\n                  >\n                    {tag}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </Card>\n\n      {/* Tags */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Tag className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">{tr('targetDetails.tags', 'Tags')}</h3>\n        </div>\n        <div className=\"p-4\">\n          <EntityTagPicker entityType=\"VIBECONTROLS_TARGET\" entityId={target.id} />\n        </div>\n      </Card>\n\n      {/* Agents on this target */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex flex-wrap items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            <Cpu className=\"size-5\" aria-hidden=\"true\" />\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('targetDetails.agents', 'Agents on this target')} ({agents.length})\n            </h3>\n          </div>\n          <Link\n            to=\"../agents?tab=agents\"\n            className=\"text-sm text-text-link hover:text-text-linkHover hover:underline flex items-center gap-1 rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n          >\n            {tr('targetDetails.allAgents', 'All agents')}\n            <ExternalLink className=\"size-3\" aria-hidden=\"true\" />\n          </Link>\n        </div>\n        {agents.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Cpu className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noAgents', 'No agents on this target yet')}\n              description={tr(\n                'targetDetails.noAgentsBody',\n                'Use the Agents tab to onboard an agent and select this target during setup.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {agents.map((agent: AgentSummary) => {\n              const status = getAgentStatus(agent);\n              return (\n                <Link\n                  key={agent.id}\n                  to={`../agents/${agent.id}`}\n                  className=\"flex items-center justify-between gap-3 p-3 rounded-card border border-border-default hover:bg-bg-sunken/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                >\n                  <div className=\"flex items-center gap-3 min-w-0\">\n                    <div\n                      className=\"size-8 rounded-button bg-bg-sunken flex items-center justify-center flex-shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      {status === 'ACTIVE' ? (\n                        <CircleCheck className=\"size-4 text-status-success-text\" />\n                      ) : (\n                        <CircleX className=\"size-4 text-text-muted\" />\n                      )}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium text-text-primary truncate\">{agent.name}</p>\n                      <p className=\"text-xs text-text-muted truncate\">\n                        v{agent.version}\n                        {agent.tunnelUrl ? ` · ${agent.tunnelUrl}` : ''}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 flex-shrink-0\">\n                    <StatusBadge status={status} />\n                    <ExternalLink className=\"size-3.5 text-text-muted\" aria-hidden=\"true\" />\n                  </div>\n                </Link>\n              );\n            })}\n          </div>\n        )}\n      </Card>\n\n      {/* Inbound connections */}\n      <Card className=\"mt-4\">\n        <div className=\"p-4 border-b border-border-default flex items-center gap-2\">\n          <Activity className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.connections', 'Inbound connections')} ({connections.length})\n          </h3>\n        </div>\n        {connections.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Activity className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noConnections', 'No inbound connections')}\n              description={tr(\n                'targetDetails.noConnectionsBody',\n                'No agents are currently connected to this target.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {connections.map((conn: ConnectionSummary) => (\n              <div\n                key={conn.id}\n                className=\"flex flex-wrap items-center justify-between gap-3 p-3 rounded-card border border-border-default\"\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium text-text-primary truncate\">\n                    {conn.label || `${conn.protocol} connection`}\n                  </p>\n                  <p className=\"text-xs text-text-muted truncate\">\n                    {tr('targetDetails.from', 'From')}{' '}\n                    <Link\n                      to={`../agents/${conn.sourceAgent.id}`}\n                      className=\"text-text-link hover:text-text-linkHover hover:underline rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                    >\n                      {conn.sourceAgent.name}\n                    </Link>{' '}\n                    · {conn.protocol} · {conn.status}\n                  </p>\n                </div>\n                <StatusBadge status={conn.status} />\n              </div>\n            ))}\n          </div>\n        )}\n      </Card>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TargetDetailsPage.js","names":[],"sources":["../../src/pages/TargetDetailsPage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useParams, Link } from 'react-router-dom';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n  ArrowLeft,\n  Server,\n  CircleCheck,\n  CircleX,\n  Cpu,\n  ExternalLink,\n  Activity,\n  Tag,\n} from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { PageHeader, Card, StatusBadge, EmptyState, ErrorState } from '@/components/shared';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { EntityShareButton } from '@/components/sharing';\nimport { getAgentStatus } from '@/components/agents/agentStatus';\nimport { useGetTargetQuery } from '@/generated/wspace-operations';\nimport type { GetTargetQuery } from '@/generated/wspace-operations';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useTr } from '@/shared/hooks/useTr';\n\ntype TargetType = NonNullable<GetTargetQuery['target']>;\ntype AgentSummary = TargetType['agents'][number];\ntype ConnectionSummary = TargetType['inboundConnections'][number];\n\n/**\n * TargetDetailsPage — `/vibecontrols/targets/:id`\n *\n * Mirrors AgentDetailsPage shell. Three sections:\n *   1. Identity card (name, type, status, host, last updated)\n *   2. Agents on this target (table with link to AgentDetailsPage)\n *   3. Inbound agent connections\n *\n * Reuses the existing `GetTarget` query — no schema changes needed; the\n * `TargetFields` fragment already includes the agent list and metadata.\n */\nexport function TargetDetailsPage() {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useVibeNavigate();\n  const tr = useTr();\n  // Page-level read gate (the gateway enforces `target:read` on GetTarget).\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(VIBE_PERMISSIONS.TARGET_READ);\n\n  const { data, loading, error, refetch } = useGetTargetQuery({\n    variables: { id: id ?? '' },\n    skip: !id || permissionsLoading || !canRead,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const target = data?.target ?? null;\n  const agents = useMemo(() => target?.agents ?? [], [target]);\n  const connections = useMemo(() => target?.inboundConnections ?? [], [target]);\n\n  if (!id) {\n    return (\n      <ErrorState title={tr('targetDetails.missingId', 'Target id missing from URL')} message=\"\" />\n    );\n  }\n\n  if (permissionsLoading) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <AccessDenied\n        title={tr('targetDetails.denied.title', 'Access Denied')}\n        description={tr(\n          'targetDetails.denied.description',\n          'You do not have permission to view this target.'\n        )}\n      />\n    );\n  }\n\n  if (loading && !data) {\n    return (\n      <MotionPage>\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (error && !target) {\n    return (\n      <ErrorState\n        title={tr('targetDetails.errorTitle', 'Failed to load target')}\n        message={error.message}\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n\n  if (!target) {\n    return (\n      <EmptyState\n        icon={<Server className=\"size-12 text-text-muted\" aria-hidden=\"true\" />}\n        title={tr('targetDetails.notFoundTitle', 'Target not found')}\n        description={tr(\n          'targetDetails.notFoundBody',\n          'The target you requested may have been deleted or is in a different workspace.'\n        )}\n      />\n    );\n  }\n\n  const lastUpdatedAt = target.updatedAt\n    ? new Date(target.updatedAt as string).toLocaleString()\n    : '—';\n\n  return (\n    <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-full\">\n      <PageHeader\n        title={target.name}\n        description={`${target.type} · ${target.host ?? 'no host'}`}\n        breadcrumb={[\n          { label: tr('breadcrumbs.targetsAgents', 'Targets & Agents'), path: '../agents' },\n          { label: tr('breadcrumbs.targets', 'Targets'), path: '../agents?tab=targets' },\n          { label: target.name },\n        ]}\n        actions={\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <EntityShareButton\n              entity=\"target\"\n              resource={{ id: target.id, name: target.name }}\n              label={tr('targetDetails.share', 'Share')}\n              variant=\"button\"\n            />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => navigate('/agents?tab=targets')}\n              className=\"max-md:min-h-11\"\n            >\n              <ArrowLeft className=\"size-3.5\" aria-hidden=\"true\" />\n              {tr('common.back', 'Back')}\n            </Button>\n          </div>\n        }\n      />\n\n      {/* Identity */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex items-center gap-2\">\n          <Server className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.identity', 'Identity')}\n          </h3>\n        </div>\n        <div className=\"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.name', 'Name')}</p>\n            <p className=\"text-text-primary font-medium break-words\">{target.name}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.type', 'Type')}</p>\n            <p className=\"text-text-primary font-medium\">{target.type}</p>\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.status', 'Status')}</p>\n            <StatusBadge status={target.status} />\n          </div>\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.host', 'Host')}</p>\n            <p className=\"text-text-primary font-mono text-xs break-words\">{target.host ?? '—'}</p>\n          </div>\n          {target.username && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.username', 'Username')}</p>\n              <p className=\"text-text-primary font-mono text-xs break-words\">{target.username}</p>\n            </div>\n          )}\n          {target.port != null && (\n            <div>\n              <p className=\"text-text-muted\">{tr('targetDetails.port', 'Port')}</p>\n              <p className=\"text-text-primary font-mono text-xs\">{target.port}</p>\n            </div>\n          )}\n          <div>\n            <p className=\"text-text-muted\">{tr('targetDetails.updatedAt', 'Last updated')}</p>\n            <p className=\"text-text-primary text-xs\">{lastUpdatedAt}</p>\n          </div>\n          {target.tags && target.tags.length > 0 && (\n            <div className=\"sm:col-span-2\">\n              {/* Legacy free-text labels stored on the target row — titled\n                  \"Labels\" to disambiguate from the workspace-level tag\n                  entities managed in the Tags card below. */}\n              <p className=\"text-text-muted mb-1\">{tr('targetDetails.labels', 'Labels')}</p>\n              <div className=\"flex flex-wrap gap-1\">\n                {target.tags.map((tag: string) => (\n                  <span\n                    key={tag}\n                    className=\"px-2 py-0.5 text-xs rounded-full bg-bg-sunken border border-border-subtle\"\n                  >\n                    {tag}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      </Card>\n\n      {/* Tags */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex items-center gap-2\">\n          <Tag className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">{tr('targetDetails.tags', 'Tags')}</h3>\n        </div>\n        <div className=\"p-4\">\n          <EntityTagPicker entityType=\"VIBECONTROLS_TARGET\" entityId={target.id} />\n        </div>\n      </Card>\n\n      {/* Agents on this target */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex flex-wrap items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            <Cpu className=\"size-5\" aria-hidden=\"true\" />\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('targetDetails.agents', 'Agents on this target')} ({agents.length})\n            </h3>\n          </div>\n          <Link\n            to=\"../agents?tab=agents\"\n            className=\"text-sm text-text-link hover:text-text-linkHover hover:underline flex items-center gap-1 rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n          >\n            {tr('targetDetails.allAgents', 'All agents')}\n            <ExternalLink className=\"size-3\" aria-hidden=\"true\" />\n          </Link>\n        </div>\n        {agents.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Cpu className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noAgents', 'No agents on this target yet')}\n              description={tr(\n                'targetDetails.noAgentsBody',\n                'Use the Agents tab to onboard an agent and select this target during setup.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {agents.map((agent: AgentSummary) => {\n              const status = getAgentStatus(agent);\n              return (\n                <Link\n                  key={agent.id}\n                  to={`../agents/${agent.id}`}\n                  className=\"flex items-center justify-between gap-3 p-3 rounded-card border border-border-subtle hover:bg-bg-sunken/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                >\n                  <div className=\"flex items-center gap-3 min-w-0\">\n                    <div\n                      className=\"size-8 rounded-button bg-bg-sunken flex items-center justify-center flex-shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      {status === 'ACTIVE' ? (\n                        <CircleCheck className=\"size-4 text-status-success-text\" />\n                      ) : (\n                        <CircleX className=\"size-4 text-text-muted\" />\n                      )}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium text-text-primary truncate\">{agent.name}</p>\n                      <p className=\"text-xs text-text-muted truncate\">\n                        v{agent.version}\n                        {agent.tunnelUrl ? ` · ${agent.tunnelUrl}` : ''}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 flex-shrink-0\">\n                    <StatusBadge status={status} />\n                    <ExternalLink className=\"size-3.5 text-text-muted\" aria-hidden=\"true\" />\n                  </div>\n                </Link>\n              );\n            })}\n          </div>\n        )}\n      </Card>\n\n      {/* Inbound connections */}\n      <Card>\n        <div className=\"p-4 border-b border-border-subtle flex items-center gap-2\">\n          <Activity className=\"size-5\" aria-hidden=\"true\" />\n          <h3 className=\"font-semibold text-text-primary\">\n            {tr('targetDetails.connections', 'Inbound connections')} ({connections.length})\n          </h3>\n        </div>\n        {connections.length === 0 ? (\n          <div className=\"p-6\">\n            <EmptyState\n              icon={<Activity className=\"size-10 text-text-muted\" aria-hidden=\"true\" />}\n              title={tr('targetDetails.noConnections', 'No inbound connections')}\n              description={tr(\n                'targetDetails.noConnectionsBody',\n                'No agents are currently connected to this target.'\n              )}\n            />\n          </div>\n        ) : (\n          <div className=\"p-4 space-y-2\">\n            {connections.map((conn: ConnectionSummary) => (\n              <div\n                key={conn.id}\n                className=\"flex flex-wrap items-center justify-between gap-3 p-3 rounded-card border border-border-subtle\"\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium text-text-primary truncate\">\n                    {conn.label || `${conn.protocol} connection`}\n                  </p>\n                  <p className=\"text-xs text-text-muted truncate\">\n                    {tr('targetDetails.from', 'From')}{' '}\n                    <Link\n                      to={`../agents/${conn.sourceAgent.id}`}\n                      className=\"text-text-link hover:text-text-linkHover hover:underline rounded-button focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                    >\n                      {conn.sourceAgent.name}\n                    </Link>{' '}\n                    · {conn.protocol} · {conn.status}\n                  </p>\n                </div>\n                <StatusBadge status={conn.status} />\n              </div>\n            ))}\n          </div>\n        )}\n      </Card>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}