Function bodies 471 total

function useMobileDetection() {
  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    const checkMobile = () => {
      const isMobileWidth = window.innerWidth <= 768
      const isTouchDevice =
        'ontouchstart' in window || navigator.maxTouchPoints > 0
      setIsMobile(isMobileWidth && isTouchDevice)
    }

    checkMobile()
    window.addEventListener('resize', checkMobile)

    return () => window.removeEventListener('resize', checkMobile)
  }, [])

  return isMobile
}

export function MobileNotSupportedOverlay() {
  const isMobile = useMobileDetection()
  const [dismissed, setDismissed] = useState(false)

  if (!isMobile || dismissed) {
    return null
  }

  return (
    <div className="mobile-not-supported-overlay">
      <div className="mobile-not-supported-content">
        <div className="mobile-not-supported-icon">
          <MobileNotSupportedIcon />
        </div>
        <h2 className="mobile-not-supported-title">Mobile Not Supported</h2>
        <p className="mobile-not-supported-description">
          Centy is designed for local computer use with Git integration for
          version control and collaboration.
        </p>
        <p className="mobile-not-supported-future">
          We have plans to support mobile workflows in the future.
        </p>
        <div className="mobile-not-supported-recommendation">
          <p className="mobile-recommendation-text">
            For the best experience, please use Centy on a desktop or lapt

export function CreateOrganizationForm({
  name,
  setName,
  slug,
  onSlugChange,
  description,
  setDescription,
  saving,
  onSubmit,
}: CreateOrganizationFormProps) {
  return (
    <form
      onSubmit={e => {
        e.preventDefault()
        onSubmit()
      }}
      className="create-organization-form"
    >
      <div className="form-group">
        <label className="form-label" htmlFor="name">
          Name <span className="required">*</span>
        </label>
        <input
          className="form-input"
          id="name"
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
          placeholder="Organization name"
          required
        />
      </div>

      <div className="form-group">
        <label className="form-label" htmlFor="slug">
          Slug
        </label>
        <input
          className="form-input"
          id="slug"
          type="text"
          value={slug}
          onChange={e => onSlugChange(e

export function CreateOrganization() {
  const [name, setName] = useState('')
  const [slug, setSlug] = useState('')
  const [slugManuallySet, setSlugManuallySet] = useState(false)
  const [description, setDescription] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  // Auto-generate slug from name if not manually set
  useEffect(() => {
    if (!slugManuallySet && name) {
      setSlug(generateSlug(name))
    }
  }, [name, slugManuallySet])

  const handleSlugChange = (value: string) => {
    setSlug(value)
    setSlugManuallySet(true)
  }

  const handleSubmit = useCreateOrganizationSubmit({
    name,
    slug,
    description,
    setSaving,
    setError,
  })

  useSaveShortcut({
    onSave: handleSubmit,
    enabled: !saving && !!name.trim(),
  })

  return (
    <div className="create-organization">
      <div className="create-organization-header">
        <Link
          href={route({ pathname: '/organizat

export function CreateOrgIssueForm({
  title,
  setTitle,
  description,
  setDescription,
  priority,
  setPriority,
  status,
  setStatus,
  loading,
  error,
  stateOptions,
  onSubmit,
  onCancel,
}: CreateOrgIssueFormProps) {
  return (
    <form className="create-issue-form" onSubmit={onSubmit}>
      <div className="form-group">
        <label className="form-label" htmlFor="org-issue-title">
          Title:
        </label>
        <input
          className="form-input"
          id="org-issue-title"
          type="text"
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder="Issue title"
          required
        />
      </div>

      <div className="form-group">
        <label className="form-label" htmlFor="org-issue-description">
          Description:
        </label>
        <TextEditor
          value={description}
          onChange={setDescription}
          format="md"
          mode="edit"
          placeholder="Describe

export function CreateOrgIssue({ orgSlug }: CreateOrgIssueProps) {
  const {
    orgProjectPath,
    initLoading,
    title,
    setTitle,
    description,
    setDescription,
    priority,
    setPriority,
    status,
    setStatus,
    loading,
    error,
    stateOptions,
    handleSubmit,
    handleCancel,
  } = useCreateOrgIssue(orgSlug)

  return (
    <div className="create-issue">
      <div className="create-issue-header">
        <Link
          href={route({
            pathname: '/organizations/[orgSlug]/issues',
            query: { orgSlug },
          })}
          className="back-link"
        >
          ← Back to Org Issues
        </Link>
        <h2 className="create-issue-title">Create Org Issue</h2>
      </div>

      {initLoading ? (
        <div className="loading">Loading organization...</div>
      ) : !orgProjectPath ? (
        <div className="no-project-message">
          <p className="no-project-text">
            This organization has no initialized pro

export function useCreateOrgIssue(orgSlug: string) {
  const router = useRouter()
  const stateManager = useStateManager()
  const stateOptions = stateManager.getStateOptions()
  const { orgProjectPath, initLoading } = useOrgProjectPath(orgSlug)

  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [priority, setPriority] = useState(2)
  const [status, setStatus] = useState(() => stateManager.getDefaultState())
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = useCallback(
    async (e?: React.FormEvent) => {
      if (e) e.preventDefault()
      if (!orgProjectPath || !title.trim()) return

      setLoading(true)
      setError(null)
      try {
        const res = await centyClient.createItem(
          create(CreateItemRequestSchema, {
            projectPath: orgProjectPath,
            itemType: 'issues',
            title: title.trim(),
            body

export function useOrgProjectPath(orgSlug: string) {
  const [orgProjectPath, setOrgProjectPath] = useState<string | null>(null)
  const [initLoading, setInitLoading] = useState(true)

  useEffect(() => {
    if (!orgSlug) return
    setInitLoading(true)
    centyClient
      .listProjects(
        create(ListProjectsRequestSchema, { organizationSlug: orgSlug })
      )
      .then(res => {
        const initialized = res.projects.find(p => p.initialized)
        setOrgProjectPath(initialized ? initialized.path : null)
      })
      .catch(() => setOrgProjectPath(null))
      .finally(() => setInitLoading(false))
  }, [orgSlug])

  return { orgProjectPath, initLoading }
}

export function OrgIssuePrioritySelect({
  priority,
  setPriority,
}: OrgIssuePrioritySelectProps) {
  return (
    <div className="form-group">
      <label className="form-label" htmlFor="org-issue-priority">
        Priority:
      </label>
      <select
        className="form-select"
        id="org-issue-priority"
        value={priority}
        onChange={e => setPriority(Number(e.target.value))}
      >
        <option className="form-option" value={1}>
          High
        </option>
        <option className="form-option" value={2}>
          Medium
        </option>
        <option className="form-option" value={3}>
          Low
        </option>
      </select>
    </div>
  )
}

export function OrgIssueStatusSelect({
  status,
  setStatus,
  stateOptions,
}: OrgIssueStatusSelectProps) {
  return (
    <div className="form-group">
      <label className="form-label" htmlFor="org-issue-status">
        Status:
      </label>
      <select
        className="form-select"
        id="org-issue-status"
        value={status}
        onChange={e => setStatus(e.target.value)}
      >
        {stateOptions.map(option => (
          <option
            className="form-option"
            key={option.value}
            value={option.value}
          >
            {option.label}
          </option>
        ))}
      </select>
    </div>
  )
}

export function OrganizationDetail({ orgSlug }: OrganizationDetailProps) {
  const state = useOrganizationDetail(orgSlug)

  useSaveShortcut({
    onSave: state.handleSave,
    enabled: state.isEditing && !state.saving && !!state.editName.trim(),
  })

  if (state.loading) {
    return (
      <div className="organization-detail">
        <div className="loading">Loading organization...</div>
      </div>
    )
  }

  if (state.error && !state.organization) {
    return (
      <div className="organization-detail">
        <DaemonErrorMessage error={state.error} />
        <Link
          href={route({ pathname: '/organizations' })}
          className="back-link"
        >
          Back to Organizations
        </Link>
      </div>
    )
  }

  if (!state.organization) {
    return (
      <div className="organization-detail">
        <div className="error-message">Organization not found</div>
        <Link
          href={route({ pathname: '/organizations' })}
          className="b

export function OrganizationDetailView(props: OrganizationDetailViewProps) {
  const {
    organization,
    projects,
    error,
    isEditing,
    editName,
    editDescription,
    editSlug,
    saving,
    deleting,
    showDeleteConfirm,
    deleteError,
    setIsEditing,
    setEditName,
    setEditDescription,
    setEditSlug,
    setShowDeleteConfirm,
    setDeleteError,
    handleSave,
    handleDelete,
    handleCancelEdit,
  } = props

  return (
    <div className="organization-detail">
      <div className="organization-header">
        <Link
          href={route({ pathname: '/organizations' })}
          className="back-link"
        >
          Back to Organizations
        </Link>
        <div className="organization-actions">
          {!isEditing ? (
            <>
              <button onClick={() => setIsEditing(true)} className="edit-btn">
                Edit
              </button>
              <button
                onClick={() => setShowDeleteConfirm(true)}

export function OrganizationReadView({
  organization,
  projects,
}: OrganizationReadViewProps) {
  return (
    <>
      <h1 className="organization-name">{organization.name}</h1>
      <OrgMetadata organization={organization} />
      <OrgIssuesQuickLink orgSlug={organization.slug} />
      <OrgProjectsList projects={projects} />
    </>
  )
}

function OrgMetadata({ organization }: { organization: Organization }) {
  return (
    <div className="organization-metadata">
      {organization.description && (
        <div className="metadata-row">
          <span className="metadata-label">Description:</span>
          <span className="metadata-value">{organization.description}</span>
        </div>
      )}
      <div className="metadata-row">
        <span className="metadata-label">Projects:</span>
        <span className="metadata-value">{organization.projectCount}</span>
      </div>
      <div className="metadata-row">
        <span className="metadata-label">Created:</span>
        <span className="metadata-value">
          {organization.createdAt
            ? new Date(organization.createdAt).toLocaleString()
            : '-'}
        </span>
      </div>
      {organization.updatedAt && (
        <div className="metadata-row">
          <span className="metadata-label">Updated:</span>
          <span className="metada

function OrgProjectsList({ projects }: { projects: ProjectInfo[] }) {
  if (projects.length === 0) return null
  return (
    <div className="organization-projects">
      <h3 className="org-projects-title">Projects in this organization</h3>
      <ul className="project-list">
        {projects.map(project => (
          <li key={project.path} className="project-item">
            <span className="project-name">
              {project.userTitle || project.projectTitle || project.name}
            </span>
            <span className="project-path" title={project.path}>
              {project.displayPath || project.path}
            </span>
          </li>
        ))}
      </ul>
    </div>
  )
}

export function OrgIssuesQuickLink({ orgSlug }: OrgIssuesQuickLinkProps) {
  return (
    <div className="org-issues-section">
      <div className="org-issues-section-header">
        <h3 className="org-projects-title">Org Issues</h3>
        <Link
          href={route({
            pathname: '/organizations/[orgSlug]/issues',
            query: { orgSlug },
          })}
          className="org-issues-link"
        >
          View all issues →
        </Link>
      </div>
      <p className="org-issues-description">
        Organization-level issues that apply across all projects.
      </p>
    </div>
  )
}

function formatErr(err: unknown): string {
  const m = err instanceof Error ? err.message : 'Failed to connect to daemon'
  return isDaemonUnimplemented(m)
    ? 'Organizations feature is not available. Please update your daemon.'
    : m
}

export function useOrganizationDetail(orgSlug: string) {
  const router = useRouter()
  const [organization, setOrganization] = useState<Organization | null>(null)
  const [projects, setProjects] = useState<ProjectInfo[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [isEditing, setIsEditing] = useState(false)
  const [editName, setEditName] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editSlug, setEditSlug] = useState('')
  const [saving, setSaving] = useState(false)
  const [deleting, setDeleting] = useState(false)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [deleteError, setDeleteError] = useState<string | null>(null)

  const fetchOrganization = useCallback(async () => {
    if (!orgSlug) {
      setError('Missing organization slug')
      setLoading(false)
      return
    }
    setLoading(true)
    setError(null)
    try {
      const res 

export function getColumns() {
  return [
    columnHelper.accessor('name', {
      header: 'Name',
      cell: info => (
        <Link
          href={route({
            pathname: '/organizations/[orgSlug]',
            query: { orgSlug: info.row.original.slug },
          })}
          className="org-name-link"
        >
          {info.getValue()}
        </Link>
      ),
      enableColumnFilter: true,
      filterFn: 'includesString',
    }),
    columnHelper.accessor('slug', {
      header: 'Slug',
      cell: info => <code className="org-slug-badge">{info.getValue()}</code>,
      enableColumnFilter: true,
      filterFn: 'includesString',
    }),
    columnHelper.accessor('description', {
      header: 'Description',
      cell: info => {
        const desc = info.getValue()
        if (!desc) return <span className="org-empty-value">-</span>
        return desc.length > 50 ? `${desc.substring(0, 50)}...` : desc
      },
      enableColumnFilter: true,
      filterFn: 'include

export function OrganizationsList() {
  const state = useOrganizationsList()

  return (
    <div className="organizations-list">
      <div className="organizations-header">
        <h2 className="organizations-title">Organizations</h2>
        <div className="header-actions">
          <button
            onClick={state.fetchOrganizations}
            disabled={state.loading}
            className="refresh-btn"
          >
            {state.loading ? 'Loading...' : 'Refresh'}
          </button>
          <Link
            href={route({ pathname: '/organizations/new' })}
            className="create-btn"
          >
            + New Organization
          </Link>
        </div>
      </div>
      <div className="organizations-toolbar">
        <div className="sort-control">
          <label className="sort-label" htmlFor="orgs-sort-select">
            Sort by
          </label>
          <select
            id="orgs-sort-select"
            className="sort-select"
            val

export function OrganizationsTable({
  table,
  onContextMenu,
}: OrganizationsTableProps) {
  return (
    <div className="organizations-table">
      <table className="orgs-data-table">
        <thead className="orgs-thead">
          {table.getHeaderGroups().map(headerGroup => (
            <tr className="header-row" key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th className="header-cell" key={header.id}>
                  <div className="th-content">
                    <button
                      type="button"
                      className={`sort-btn ${header.column.getIsSorted() ? 'sorted' : ''}`}
                      onClick={header.column.getToggleSortingHandler()}
                    >
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                      <span className="sort-indicator">
                        {(() =>

function isSortPreset(value: string): value is SortPreset {
  return (
    value === 'name-asc' ||
    value === 'name-desc' ||
    value === 'projects-desc' ||
    value === 'projects-asc'
  )
}

function getSortingForPreset(preset: SortPreset): SortingState {
  if (preset === 'name-asc') return [{ id: 'name', desc: false }]
  if (preset === 'name-desc') return [{ id: 'name', desc: true }]
  if (preset === 'projects-desc') return [{ id: 'projectCount', desc: true }]
  return [{ id: 'projectCount', desc: false }]
}

function getInitialSortPreset(): SortPreset {
  try {
    const stored = sessionStorage.getItem(SORT_SESSION_KEY)
    if (stored !== null && isSortPreset(stored)) return stored
  } catch {
    // ignore
  }
  return 'name-asc'
}

export function useOrganizationsList() {
  const router = useRouter()
  const [organizations, setOrganizations] = useState<Organization[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [deleting, setDeleting] = useState(false)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(
    null
  )
  const [deleteError, setDeleteError] = useState<string | null>(null)
  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
  const initialPreset = useMemo(getInitialSortPreset, [])
  const [sortPreset, setSortPresetState] = useState<SortPreset>(initialPreset)
  const [sorting, setSorting] = useState<SortingState>(
    getSortingForPreset(initialPreset)
  )
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])

  const setSortPreset = useCallback((raw: string) => {
    if (!isSortPreset(raw)) return
    setSortPresetState(raw)
    setSorting(getSortingForP

export function useOrgIssueDetail(orgSlug: string, issueId: string) {
  const router = useRouter()
  const stateManager = useStateManager()
  const stateOptions = stateManager.getStateOptions()

  const [orgProjectPath, setOrgProjectPath] = useState<string | null>(null)
  const [issue, setIssue] = useState<Issue | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const [isEditing, setIsEditing] = useState(false)
  const [editTitle, setEditTitle] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editPriority, setEditPriority] = useState(2)
  const [editStatus, setEditStatus] = useState('')
  const [saving, setSaving] = useState(false)

  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [deleting, setDeleting] = useState(false)
  const [deleteError, setDeleteError] = useState<string | null>(null)

  const fetchIssue = useCallback(async () => {
    if (!orgSlug

export function OrgIssueDetail({ orgSlug, issueId }: OrgIssueDetailProps) {
  const state = useOrgIssueDetail(orgSlug, issueId)

  useSaveShortcut({
    onSave: state.handleSave,
    enabled: state.isEditing && !state.saving && !!state.editTitle.trim(),
  })

  const backLink = route({
    pathname: '/organizations/[orgSlug]/issues',
    query: { orgSlug },
  })

  if (state.loading) {
    return (
      <div className="issue-detail">
        <div className="loading">Loading issue...</div>
      </div>
    )
  }

  if (state.error && !state.issue) {
    return (
      <div className="issue-detail">
        <DaemonErrorMessage error={state.error} />
        <Link href={backLink} className="back-link">
          Back to Org Issues
        </Link>
      </div>
    )
  }

  if (!state.issue) {
    return (
      <div className="issue-detail">
        <div className="error-message">Issue not found</div>
        <Link href={backLink} className="back-link">
          Back to Org Issues
      

export function OrgIssueEditForm({ state }: OrgIssueEditFormProps) {
  return (
    <div className="edit-form">
      <div className="form-group">
        <label className="form-label" htmlFor="edit-title">
          Title:
        </label>
        <input
          className="form-input"
          id="edit-title"
          type="text"
          value={state.editTitle}
          onChange={e => state.setEditTitle(e.target.value)}
          placeholder="Issue title"
        />
      </div>

      <div className="form-group">
        <label className="form-label" htmlFor="edit-priority">
          Priority:
        </label>
        <select
          className="form-select"
          id="edit-priority"
          value={state.editPriority}
          onChange={e => state.setEditPriority(Number(e.target.value))}
        >
          <option className="form-option" value={1}>
            High
          </option>
          <option className="form-option" value={2}>
            Medium
          </

export function OrgIssueReadView({ issue }: OrgIssueReadViewProps) {
  const meta = issue.metadata
  const displayNum = meta ? meta.orgDisplayNumber : issue.displayNumber
  const status = (meta && meta.status) || '—'
  const priority = meta ? meta.priority : 2
  const createdAt =
    meta && meta.createdAt ? new Date(meta.createdAt).toLocaleString() : null
  const updatedAt =
    meta && meta.updatedAt ? new Date(meta.updatedAt).toLocaleString() : null

  return (
    <>
      <div className="issue-detail-meta">
        <span className="org-issue-badge">Org Issue #{displayNum}</span>
        <span className="status-badge">{status}</span>
        <span className="priority-badge">{priorityLabel(priority)}</span>
      </div>
      <h1 className="issue-title">{issue.title}</h1>
      <div className="issue-body">
        <TextEditor
          value={issue.description}
          onChange={() => undefined}
          format="md"
          mode="display"
        />
      </div>
      {(created

export function useOrgIssues(orgSlug: string) {
  const [issues, setIssues] = useState<Issue[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [orgProjectPath, setOrgProjectPath] = useState<string | null>(null)

  const fetchIssues = useCallback(async () => {
    if (!orgSlug) return
    setLoading(true)
    setError(null)
    try {
      const { issues: fetched, firstProjectPath } =
        await fetchOrgIssuesFromProjects(orgSlug)
      setOrgProjectPath(prev =>
        firstProjectPath && !prev ? firstProjectPath : prev
      )
      setIssues(fetched)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch issues')
    } finally {
      setLoading(false)
    }
  }, [orgSlug])

  useEffect(() => {
    fetchIssues()
  }, [orgSlug, fetchIssues])

  return { issues, loading, error, orgProjectPath, fetchIssues }
}

export function OrgIssuesList({ orgSlug }: OrgIssuesListProps) {
  const { issues, loading, error, orgProjectPath, fetchIssues } =
    useOrgIssues(orgSlug)

  return (
    <div className="org-issues-list">
      <div className="org-issues-header">
        <div className="org-issues-header-left">
          <Link
            href={route({
              pathname: '/organizations/[orgSlug]',
              query: { orgSlug },
            })}
            className="back-link"
          >
            ← Back to Organization
          </Link>
          <h2 className="org-issues-title">Org Issues</h2>
        </div>
        <div className="header-actions">
          <button
            onClick={fetchIssues}
            disabled={loading}
            className="refresh-btn"
          >
            {loading ? 'Loading...' : 'Refresh'}
          </button>
          {orgProjectPath && (
            <Link
              href={route({
                pathname: '/organizations/[orgSlug]/issues/new',
  

export function OrgIssuesTable({ orgSlug, issues }: OrgIssuesTableProps) {
  return (
    <div className="org-issues-table-wrapper">
      <table className="org-issues-table">
        <thead className="org-issues-thead">
          <tr className="org-issues-header-row">
            <th className="org-issues-th">#</th>
            <th className="org-issues-th">Title</th>
            <th className="org-issues-th">Status</th>
            <th className="org-issues-th">Priority</th>
            <th className="org-issues-th">Created</th>
          </tr>
        </thead>
        <tbody className="org-issues-tbody">
          {issues.map(issue => {
            const meta = issue.metadata
            const orgNum = meta ? meta.orgDisplayNumber : issue.displayNumber
            const status = (meta && meta.status) || '—'
            const priority = meta ? meta.priority : 2
            const createdAt =
              meta && meta.createdAt
                ? new Date(meta.createdAt).toLocaleDateSt

export function OrgSwitcherDropdown({
  refs,
  floatingStyles,
  selectedOrgSlug,
  organizations,
  loading,
  onRefresh,
  onSelect,
  onClose,
}: OrgSwitcherDropdownProps) {
  return (
    <div
      ref={refs.setFloating}
      style={floatingStyles}
      className="org-switcher-dropdown"
    >
      <div className="org-switcher-header">
        <h3 className="org-switcher-title">Filter by Organization</h3>
        <button
          className="refresh-btn"
          onClick={() => onRefresh()}
          disabled={loading}
          title="Refresh organizations"
        >
          ↻
        </button>
      </div>

      <ul className="org-options" role="listbox">
        <li
          role="option"
          aria-selected={selectedOrgSlug === null}
          className={`org-option ${selectedOrgSlug === null ? 'selected' : ''}`}
          onClick={() => onSelect(null)}
        >
          <span className="org-option-name">All Organizations</span>
        </li>
        <li
        

function getOrgLabel(
  selectedOrgSlug: string | null | undefined,
  organizations: Organization[]
) {
  if (selectedOrgSlug === undefined) return 'Select Org'
  if (selectedOrgSlug === null) return 'All Orgs'
  if (selectedOrgSlug === '') return 'Ungrouped'
  const org = organizations.find(o => o.slug === selectedOrgSlug)
  return (org ? org.name : '') || selectedOrgSlug
}

export function OrgSwitcher() {
  const {
    selectedOrgSlug,
    setSelectedOrgSlug,
    organizations,
    loading,
    refreshOrganizations,
  } = useOrganization()
  const [isOpen, setIsOpen] = useState(false)

  const { refs, floatingStyles } = useFloating({
    open: isOpen,
    placement: 'bottom-start',
    middleware: [offset(4), flip(), shift({ padding: 8 })],
    whileElementsMounted: autoUpdate,
  })

  useEffect(() => {
    if (isOpen) refreshOrganizations()
  }, [isOpen, refreshOrganizations])

  useEffect(() => {
    if (!isOpen) return
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target
      if (
        !(target instanceof HTMLElement) ||
        !target.closest('.org-switcher-container')
      ) {
        setIsOpen(false)
      }
    }
    document.addEventListener('click', handleClickOutside)
    return () => document.removeEventListener('click', handleClickOutside)
  }, [isOpen])

  const handleSelect = (slug: string | null | undefine

export function useCreateOrganizationSubmit({
  name,
  slug,
  description,
  setSaving,
  setError,
}: UseCreateOrganizationSubmitParams) {
  const router = useRouter()
  return useCallback(async () => {
    if (!name.trim()) return

    setSaving(true)
    setError(null)

    try {
      const request = create(CreateOrganizationRequestSchema, {
        slug: slug.trim() || undefined,
        name: name.trim(),
        description: description.trim() || undefined,
      })
      const response = await centyClient.createOrganization(request)

      if (response.success && response.organization) {
        router.push(
          route({
            pathname: '/organizations/[orgSlug]',
            query: { orgSlug: response.organization.slug },
          })
        )
      } else {
        const errorMsg = response.error || 'Failed to create organization'
        if (isDaemonUnimplemented(errorMsg)) {
          setError(
            'Organizations feature is not available. Please update

export function ArchivedProjectItem({
  project,
  confirmRemove,
  removingPath,
  onRestore,
  onRestoreAndSelect,
  onRemove,
  onSetConfirmRemove,
}: ArchivedProjectItemProps) {
  return (
    <li className="archived-item">
      <div className="archived-item-info">
        <span className="archived-item-name">
          {project.userTitle || project.projectTitle || project.name}
        </span>
        <span className="archived-item-path">{project.displayPath}</span>
        <div className="archived-item-stats">
          <span className="archived-item-stat">
            Issues: {project.issueCount}
          </span>
          <span className="archived-item-stat">Docs: {project.docCount}</span>
          {!project.initialized && (
            <span className="not-initialized-badge">Not initialized</span>
          )}
        </div>
      </div>
      <div className="archived-item-actions">
        {confirmRemove === project.path ? (
          <>
            <span className="confir

export function ArchivedProjects() {
  const state = useArchivedProjectActions()

  return (
    <div className="archived-projects">
      <div className="archived-header">
        <h2 className="archived-title">Archived Projects</h2>
        <div className="archived-header-actions">
          {state.hasArchivedProjects && !state.loading && (
            <>
              {state.confirmRemoveAll ? (
                <div className="remove-all-confirm">
                  <span className="confirm-text">Remove all permanently?</span>
                  <button
                    className="confirm-yes-btn"
                    onClick={state.handleRemoveAll}
                    disabled={state.removingAll}
                  >
                    {state.removingAll ? 'Removing...' : 'Yes'}
                  </button>
                  <button
                    className="confirm-no-btn"
                    onClick={() => state.setConfirmRemoveAll(false)}
                    disabled={state.

export function ArchivedStaleItem({
  path,
  confirmRemove,
  onRemoveStale,
  onSetConfirmRemove,
}: ArchivedStaleItemProps) {
  return (
    <li className="archived-item stale">
      <div className="archived-item-info">
        <span className="archived-item-name">
          {path.split('/').pop() || path}
        </span>
        <span className="archived-item-path">{path}</span>
        <div className="archived-item-stats">
          <span className="stale-badge">Not tracked by daemon</span>
        </div>
      </div>
      <div className="archived-item-actions">
        {confirmRemove === path ? (
          <>
            <span className="confirm-text">Remove permanently?</span>
            <button
              className="confirm-yes-btn"
              onClick={() => onRemoveStale(path)}
            >
              Yes
            </button>
            <button
              className="confirm-no-btn"
              onClick={() => onSetConfirmRemove(null)}
            >
         

export function useArchivedProjectActions() {
  const router = useRouter()
  const { archivedPaths, unarchiveProject, removeArchivedProject } =
    useArchivedProjects()
  const { setProjectPath, setIsInitialized } = useProject()
  const [allProjects, setAllProjects] = useState<ProjectInfo[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [removingPath, setRemovingPath] = useState<string | null>(null)
  const [confirmRemove, setConfirmRemove] = useState<string | null>(null)
  const [confirmRemoveAll, setConfirmRemoveAll] = useState(false)
  const [removingAll, setRemovingAll] = useState(false)

  const fetchProjects = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const request = create(ListProjectsRequestSchema, { includeStale: true })
      const response = await centyClient.listProjects(request)
      setAllProjects(response.projects)
    } catch (err) {
      setError(err instan

export function InitProject() {
  const state = useInitProject()

  return (
    <div className="init-project">
      <h2 className="init-project-title">Initialize Centy Project</h2>
      {state.step === 'input' && (
        <InputStep
          projectPath={state.projectPath}
          setProjectPath={state.setProjectPath}
          isTauri={state.isTauri}
          loading={state.loading}
          handleSelectFolder={state.handleSelectFolder}
          handleQuickInit={state.handleQuickInit}
          handleGetPlan={state.handleGetPlan}
        />
      )}
      {state.step === 'plan' && state.plan && (
        <PlanStep
          plan={state.plan}
          projectPath={state.projectPath}
          selectedRestore={state.selectedRestore}
          selectedReset={state.selectedReset}
          loading={state.loading}
          toggleRestore={state.toggleRestore}
          toggleReset={state.toggleReset}
          handleReset={state.handleReset}
          handleExecutePlan={state.ha

export function InputStep({
  projectPath,
  setProjectPath,
  isTauri,
  loading,
  handleSelectFolder,
  handleQuickInit,
  handleGetPlan,
}: InputStepProps) {
  return (
    <div className="input-step">
      <p className="input-step-description">
        Create a <code className="inline-code">.centy</code> folder to track
        issues and documentation for your project.
      </p>
      <div className="path-input">
        <label className="form-label" htmlFor="project-path">
          Project Path:
        </label>
        <div className="input-row">
          <input
            className="form-input"
            id="project-path"
            type="text"
            value={projectPath}
            onChange={e => setProjectPath(e.target.value)}
            placeholder="/path/to/your/project"
          />
          {isTauri && (
            <button
              type="button"
              onClick={handleSelectFolder}
              className="browse-btn"
            >
            

function FileList({ files, title }: { files: FileInfo[]; title: string }) {
  if (files.length === 0) return null
  return (
    <div className="file-list">
      <h4 className="file-list-title">{title}</h4>
      <ul className="file-list-items">
        {files.map(file => (
          <li className="file-list-item" key={file.path}>
            <span className="file-icon">
              {file.fileType === FileType.DIRECTORY
                ? '\uD83D\uDCC1'
                : '\uD83D\uDCC4'}
            </span>
            <span className="file-path">{file.path}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

function CheckboxList({
  files,
  title,
  selected,
  toggle,
  description,
}: {
  files: FileInfo[]
  title: string
  selected: Set<string>
  toggle: (path: string) => void
  description: string
}) {
  if (files.length === 0) return null
  return (
    <div className="file-list checkbox-list">
      <h4 className="file-list-title">{title}</h4>
      <p className="description">{description}</p>
      <ul className="file-list-items">
        {files.map(file => (
          <li className="file-list-item" key={file.path}>
            <label className="form-label">
              <input
                className="form-checkbox"
                type="checkbox"
                checked={selected.has(file.path)}
                onChange={() => toggle(file.path)}
              />
              <span className="file-icon">
                {file.fileType === FileType.DIRECTORY
                  ? '\uD83D\uDCC1'
                  : '\uD83D\uDCC4'}
              </span>
              <span classNa

export function PlanStep({
  plan,
  projectPath,
  selectedRestore,
  selectedReset,
  loading,
  toggleRestore,
  toggleReset,
  handleReset,
  handleExecutePlan,
}: PlanStepProps) {
  return (
    <div className="plan-step">
      <h3 className="plan-step-title">Reconciliation Plan</h3>
      <p className="plan-step-description">
        Review what will happen when initializing{' '}
        <code className="inline-code">{projectPath}</code>
      </p>
      <FileList files={plan.toCreate} title="Files to Create" />
      <CheckboxList
        files={plan.toRestore}
        title="Files to Restore"
        selected={selectedRestore}
        toggle={toggleRestore}
        description="These files were deleted but exist in the manifest. Select which to restore."
      />
      <CheckboxList
        files={plan.toReset}
        title="Files to Reset"
        selected={selectedReset}
        toggle={toggleReset}
        description="These files were modified. Select which to reset to or

export function SuccessStep({
  result,
  projectPath,
  handleReset,
}: SuccessStepProps) {
  return (
    <div className="success-step">
      <h3 className="result-step-title">Success!</h3>
      <p className="result-step-description">
        Centy has been initialized in{' '}
        <code className="inline-code">{projectPath}</code>
      </p>
      {result.created.length > 0 && (
        <div className="result-section">
          <h4 className="result-section-title">Created:</h4>
          <ul className="result-list">
            {result.created.map(path => (
              <li className="result-list-item" key={path}>
                {path}
              </li>
            ))}
          </ul>
        </div>
      )}
      {result.restored.length > 0 && (
        <div className="result-section">
          <h4 className="result-section-title">Restored:</h4>
          <ul className="result-list">
            {result.restored.map(path => (
              <li className="result-list-item

export function ErrorStep({ error, handleReset }: ErrorStepProps) {
  return (
    <div className="error-step">
      <h3 className="result-step-title">Error</h3>
      {error && <DaemonErrorMessage error={error} />}
      <button onClick={handleReset} className="primary">
        Try Again
      </button>
    </div>
  )
}

export function ExecutingStep() {
  return (
    <div className="executing-step">
      <div className="spinner" />
      <p className="executing-step-text">Initializing project...</p>
    </div>
  )
}

export function useInitProject() {
  const [projectPath, setProjectPath] = useState('')
  const [step, setStep] = useState<InitStep>('input')
  const [plan, setPlan] = useState<ReconciliationPlan | null>(null)
  const [result, setResult] = useState<InitResponse | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [selectedRestore, setSelectedRestore] = useState<Set<string>>(new Set())
  const [selectedReset, setSelectedReset] = useState<Set<string>>(new Set())
  const [loading, setLoading] = useState(false)
  const [isTauri, setIsTauri] = useState(false)

  useEffect(() => {
    setIsTauri(typeof window !== 'undefined' && '__TAURI__' in window)
  }, [])

  const handleSelectFolder = useCallback(async () => {
    if (!isTauri) return
    try {
      const selected = await open({
        directory: true,
        multiple: false,
        title: 'Select Project Folder',
      })
      if (selected) setProjectPath(selected)
    } catch (err) {
      if (!(err inst

function getItemHref(
  item: PinnedItem,
  createLink: (path: string) => RouteLiteral
): RouteLiteral {
  switch (item.type) {
    case 'issue':
      return createLink(`/issues/${item.id}`)
    case 'doc':
      return createLink(`/docs/${item.id}`)
  }
}