feat(playground): org sidebar account footer, fork from any environment

The org view's footer is now the shared account and help footer: clicking your name opens
Settings (the organization's settings) and Sign out, and help offers docs, Slack and
support. The fork modal takes an optional list of sources; the Environments tab passes the
lineage, so Create fork can start from Prod, Staging or Sandbox, with the default name and
resource list following the chosen source.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: mzxchandra

apps/sim/app/playground/org/components/environments/lineage-strip.tsx

@@ -212,6 +212,7 @@ export function LineageStrip({ project, columns, lineageByEnv, canManage }: Line
           onOpenChange={setForkModalOpen}
           sourceWorkspaceId={project.id}
           sourceWorkspaceName={current?.name || project.name}
+          sources={columns.map((column) => ({ id: column.id, name: column.name }))}
           canFork={creationPolicy?.canCreate ?? true}
           onUpgrade={() => {
             if (billingEnabled) navigateToSettings({ section: 'billing' })

apps/sim/app/playground/org/components/proto-sidebar.tsx

@@ -2,7 +2,6 @@
 
 import { useRef, useState } from 'react'
 import {
-  Avatar,
   Chip,
   ChipLink,
   chipVariants,
@@ -19,15 +18,16 @@ import {
   PanelLeft,
   Plus,
   Search,
-  Settings,
   SquarePen,
 } from '@sim/emcn/icons'
 import { formatRelativeTime } from '@sim/utils/formatting'
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
 import { IdentityTile } from '@/components/identity-tile/identity-tile'
 import { useActiveOrganization, useSession } from '@/lib/auth/auth-client'
+import { DOCS_URL, SLACK_COMMUNITY_URL } from '@/lib/help-links'
+import { organizationRoutes, WORKSPACE_SETTINGS_PATH } from '@/lib/navigation/paths'
 import { RunningDot } from '@/app/playground/org/components/glyphs'
 import { ProjectRow } from '@/app/playground/org/components/project-row'
 import { type Project, useProjects } from '@/app/playground/org/lib/project'
@@ -51,7 +51,9 @@ import {
 import { type ProjectDragProps, useProjectOrder } from '@/app/playground/org/lib/use-project-order'
 import { useSidebarChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
 import {
+  HelpModal,
   isNavItemActive,
+  SidebarFooter,
   SidebarNavChip,
   type SidebarNavItemData,
   SidebarSection,
@@ -121,6 +123,8 @@ export function ProtoSidebar() {
   const [{ chat: openChat }] = useQueryStates(protoParsers)
   const { projects, roots } = useProjects()
   const { projects: orderedProjects, dragProps, isAnyDragActive } = useProjectOrder(roots)
+  const router = useRouter()
+  const [helpOpen, setHelpOpen] = useState(false)
   const { data: organization } = useActiveOrganization()
   const { data: session } = useSession()
   /** Only a mock project has a full view here; a real project's Build is its workspace pages. */
@@ -129,6 +133,10 @@ export function ProtoSidebar() {
   )
   const inSettings = Boolean(fullProject && settingsProject(pathname))
   const organizationId = projects.find((project) => project.organizationId)?.organizationId
+  /** The organization's settings; without an organization, the viewer's workspace settings. */
+  const accountSettingsHref = organizationId
+    ? organizationRoutes(organizationId).settingsSection('general')
+    : WORKSPACE_SETTINGS_PATH
   const toggleCollapsed = useSidebarStore((state) => state.toggleCollapsed)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const scrollContentRef = useRef<HTMLDivElement>(null)
@@ -275,24 +283,19 @@ export function ProtoSidebar() {
           </div>
         </div>
 
-        <div
-          className={cn(
-            'flex shrink-0 items-center gap-[1px] border-t px-2 py-2 transition-colors',
-            !scrollEdges.bottom && 'border-transparent'
-          )}
-        >
-          <div className='min-w-0 flex-1'>
-            <Chip
-              fullWidth
-              className={SIDEBAR_RAIL_CHIP_CLASS}
-              leftAdornment={<Avatar size='xs' name={userName} />}
-            >
-              {userName}
-            </Chip>
-          </div>
-          {!isCollapsed && <Chip leftIcon={Settings} aria-label='Settings' />}
-        </div>
+        <SidebarFooter
+          showDivider={scrollEdges.bottom}
+          isCollapsed={isCollapsed}
+          showCollapsedTooltips={isCollapsed}
+          accountSettingsHref={accountSettingsHref}
+          onOpenAccountSettings={() => router.push(accountSettingsHref)}
+          navigationLinks={[]}
+          onOpenDocs={() => window.open(DOCS_URL, '_blank', 'noopener,noreferrer')}
+          onJoinSlack={() => window.open(SLACK_COMMUNITY_URL, '_blank', 'noopener,noreferrer')}
+          onContactSupport={() => setHelpOpen(true)}
+        />
       </div>
+      <HelpModal open={helpOpen} onOpenChange={setHelpOpen} />
     </aside>
   )
 }

apps/sim/ee/workspace-forking/components/fork-workspace-modal/fork-workspace-modal.tsx

@@ -9,6 +9,7 @@ import {
   ChipModalError,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
   toast,
 } from '@sim/emcn'
 import { TriangleAlert } from '@sim/emcn/icons'
@@ -26,6 +27,11 @@ interface ForkWorkspaceModalProps {
   onOpenChange: (open: boolean) => void
   sourceWorkspaceId: string
   sourceWorkspaceName: string
+  /**
+   * Other workspaces the fork may be taken from, such as the environments of a project. With
+   * more than one, "Forking from" becomes a picker that starts on `sourceWorkspaceId`.
+   */
+  sources?: readonly { id: string; name: string }[]
   /** Whether the user is under their workspace cap; creating a fork is gated on this. */
   canFork: boolean
   /** Sends the user to upgrade (billing) when they try to fork at the cap. */
@@ -75,25 +81,39 @@ export function ForkWorkspaceModal({
   onOpenChange,
   sourceWorkspaceId,
   sourceWorkspaceName,
+  sources,
   canFork,
   onUpgrade,
 }: ForkWorkspaceModalProps) {
   const router = useRouter()
   const forkWorkspace = useForkWorkspace()
-  const resources = useForkResources(sourceWorkspaceId, open)
+  const [sourceId, setSourceId] = useState(sourceWorkspaceId)
+  const sourceName = sources?.find((source) => source.id === sourceId)?.name ?? sourceWorkspaceName
+  const resources = useForkResources(sourceId, open)
   const [name, setName] = useState('')
   const [selected, setSelected] = useState<ResourceSelection>(emptySelection)
   const [defaulted, setDefaulted] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     if (open) {
-      setName(`${sourceWorkspaceName} (fork)`)
+      setSourceId(sourceWorkspaceId)
       setSelected(emptySelection())
       setDefaulted(false)
       setError(null)
     }
-  }, [open, sourceWorkspaceName])
+  }, [open, sourceWorkspaceId])
+
+  /** The default name follows the chosen source until the user types one of their own. */
+  useEffect(() => {
+    if (open) setName(`${sourceName} (fork)`)
+  }, [open, sourceName])
+
+  const handleSourceChange = (nextSourceId: string) => {
+    setSourceId(nextSourceId)
+    setSelected(emptySelection())
+    setDefaulted(false)
+  }
 
   useEffect(() => {
     if (!open || !resources.data || defaulted) return
@@ -141,7 +161,7 @@ export function ForkWorkspaceModal({
       RESOURCE_KINDS.map((kind) => [kind.key, Array.from(selected[kind.key])])
     )
     forkWorkspace.mutate(
-      { workspaceId: sourceWorkspaceId, body: { name: trimmed, copy } },
+      { workspaceId: sourceId, body: { name: trimmed, copy } },
       {
         onSuccess: (result) => {
           // The copy job's progress lands in the page's Activity log; the toast action
@@ -165,7 +185,20 @@ export function ForkWorkspaceModal({
       <ChipModalBody>
         <div className='flex flex-col gap-7 px-2'>
           <SettingsSection label='Forking from'>
-            <ChipCopyInput value={sourceWorkspaceName} aria-label='Forking from' />
+            {sources && sources.length > 1 ? (
+              <ChipSelect
+                aria-label='Forking from'
+                align='start'
+                fullWidth
+                dropdownWidth='trigger'
+                value={sourceId}
+                onChange={handleSourceChange}
+                disabled={isForking}
+                options={sources.map((source) => ({ value: source.id, label: source.name }))}
+              />
+            ) : (
+              <ChipCopyInput value={sourceName} aria-label='Forking from' />
+            )}
           </SettingsSection>
 
           <SettingsSection